Fun with Bubbles!

I'm on a train up to Liverpool for the UK Oracle User Group Tech 14 conference, and decided it's about time for a post showing something I've been working on.  I don't post often these days, which I blame on work and family commitments, but is probably just down to pure laziness.  Anyhow, I'm feeling in the mood so I'll just get on with it in case the desire to catch some zzz's becomes overwhelming.  Also it takes my mind of the bad coffee served up on the train.

So, I've been getting into D3 a little, which if you don't already know is a JavaScript library for manipulating data to create interactive graphs and charts.  Some of the stuff people are creating using D3 is amazing, including this dynamic bubble chart example.  I thought I would use this example as the basis for creating a bubble chart in Apex, that dynamically updates with some cool transitions, using data from the database rather than the real time API in the example.

The demo can be found here (login using demo/demo):  https://apex.oracle.com/pls/apex/f?p=9208

Here's a screenshot (not animated sorry, as no time to make one):


Each bubble in the demo is a country, and is coloured according to which region it belongs in.  You can see the regions in the legend to the right.   The size of each bubble is based on a simple value stored for each country, and is not representative of anything in particular (it's server hits on the original demo).  I've stored a number of different values for each country and these are pulled from the DB using an Ajax call (apex.server.process) with a javascript interval which cycles through each set of data.

Interestingly, whilst I was working on this I noticed that Carsten Czarski was also working on some D3 demos (here), and actually these helped me solve an issue I had (I ended up ditching a call to apex_util.json_from_sql as it wasn't correct for this).

The one thing I want add is text labels (country code and value), but I've not quite figured that out yet though will endeavour to do so as it will make it more intuitive.

I'll add another post later with all the code, which is really not that complex.  Promise!

Comments

Unknown said…
I only recently discovered D3 and was amazed by the visualizations. I immediately started experimenting with the library in APEX. Glad to know that others are doing the same. Hoping to share my discoveries later. Good luck on the journey.
8 December 2014 at 12:02
Paul Brookes said…
Thanks Steve. I see the Apex development team use D3, so maybe it could make it into a later release somehow. Also I notice there are a number of Apex/D3 related blog post demos coming out all the time, so definitely worth exploring further.
9 December 2014 at 11:01
Joel R. Kallman said…
Actually, all of the approvals have been completed internally for d3.js to be included in APEX 5.0. Thus, it will "make it into a later release". Let the good times roll.
11 December 2014 at 05:47
Paul Brookes said…
That's great news Joel. With D3 in the mix, Apex 5 will be a serious player in the BI space.
11 December 2014 at 14:07
Post a Comment

Popular posts from this blog

Fun with Bubbles - Part 2

Image
In my previous  post a couple of days back, I demonstrated a simple Apex demo with D3 pulling dynamic data from the database in the form of a bubble chart.  I promised to share the code so here it is. It's really quite simple.  In short, i've created a table, D3_COUNTRIES, which contains 10 sets of rows each with a country code, name and a value.  The Javascript code on the page has an interval that runs every 2 seconds, and each time calls an Ajax callback process to get another set of country data.  The code then uses D3 to create a bubble chart for that data, using a nice transition between each set. First of all create the table and upload the data.  Here's the DDL to create the D3_COUNTRIES table. CREATE TABLE "D3_COUNTRIES" ( "ID" NUMBER(10,0), "COUNTRY_CODE" VARCHAR2(2) NOT NULL ENABLE, "COUNTRY_NAME" VARCHAR2(100) NOT NULL ENABLE, "CREATED_DATE" DATE, "
Read more

UKOUG Tech14 - APEX Highlights

Image
Last week I spent 4 days at the annual UK Oracle User Group conference, this time around called  Tech14 .  It was my first  UKOUG  conference in a number of years and I set out with the intention of treating it like an all you can eat buffet of APEX presentations and workshops. So, what were the APEX highlights of Tech14? Well, I have to start with the presentations given by  Joel Kallman ,  David Peake  and  Shakeeb Rahman .  They gave a number of talks over all 4 days, a fair few of these covered various features of APEX 5.  I'm really impressed with the new Page Designer which looks even more like a traditional IDE and will help convince Forms (and ADF,  .Net, etc) developers of just how serious a development tool APEX really is.  Oracle consider this to be a 'game changer' for APEX and it's hard to disagree. Shakeeb gave a number of talks centred on the new Universal Theme within APEX 5.  This is a new central theme where the look of the template can be ch
Read more

Range Slider Plugin

I've spent a little time updating my online shop demo recently. I've still a long way to go but initially I am trying to get as much core functionality built into the search page, such as trying not to submit the page at all and do as much with Ajax as I can.  From hereonin I think I shall refer to this as 'Ajaxifying' my application.  Ok maybe not. You can go to the demo here.... Online Store Demo Something to note.  You can drag and drop the product images into the shopping basket and the basket inventory will update, but this doesn't work with pagination.  If you use the range slider this will reset pagination and it will work again.  Also note, that this page only works properly with Firefox, which I think maybe down to Apex 4 EA not yet being supported in IE (it doesn't work with Chrome either). You will notice that I have created a new plugin which I have based on Patrick Wolf's slider plugin, but this uses 2 markers on the slider to represent a
Read more