DimpleJs is a wrapper for d3, the javascript charting library, which makes beautiful charts but is way more complicated than I want to cope with, so I was looking for a helper toolkit. I’ve been using dimplejs lately and wanted to write down what I did while I can remember, but I didn’t think my clients would thank me for publishing their data! Instead, I made some graphs using Joind.in‘s data, just pulling what I needed over the API and producing something like this:

Point at the graph and you get more information about each of the points on it (if you can’t see the graph above, try refreshing the page, trying to embed this thing in wordpress apparently wasn’t all that clever)

Fetching the Data

So what is happening here? First of all, I pulled the data I wanted to use (a list of past events) from the Joind.in API (http://api.joind.in, it speaks HTML as well as JSON so feel free to just click on the link). Be default you get 20 events and a link to get the next page, so I created a script that does so until it finds an event before 2013, then it stops. I also discarded events with less than 10 attendees to keep the data set pretty small. You can see my PHP script on GitHub if you’re interested.

Graphing with DimpleJS

Dimplejs (in common with most other graphing tools) likes a multidimensional, but not nested, array. I created an array element per event, and within that key/value pairs for the various columns. Dimplejs is client side so I just asked my PHP to json_encode() the array and echo it – this gets picked up by the javascript in the page – so I have something like:

    var data = [{"event":"Italian Agile Days 2013","date":"November 2013","continent":"Europe","place":"Rome","attendees":96,"comments":423,"talks":39,"comments_per_attendee":4.40625,"comments_per_talk":10.846153846154},{"event":"PHP Conference Brazil 2013","date":"November 2013","continent":"America","place":"Sao_Paulo","attendees":50,"comments":225,"talks":52,"comments_per_attendee":4.5,"comments_per_talk":4.3269230769231},{"event":"DrupalCampNW 2013","date":"November 2013","continent":"Europe","place":"London","attendees":14,"comments":41,"talks":21,"comments_per_attendee":2.9285714285714,"comments_per_talk":1.952380952381}, ...

Next, I need to get dimple, this just needs me to include source files for dimple and for d3, which it builds upon, so I include them like this:

Then I describe my graph. It’s a surprisingly few lines of code (at least, I was surprised, having tried to do this with raw d3 in the past), which I’ll put here and then explain each line in turn:

    var svg = dimple.newSvg("#chartContainer", 600, 400);
    var myChart = new dimple.chart(svg, data);
    myChart.addMeasureAxis("x", "attendees");
    myChart.addMeasureAxis("y", "comments");
    myChart.addSeries(["event", "talks", "attendees", "comments", "place"], dimple.plot.bubble);
    myChart.draw();

First the svg variable gets defined; “chartContainer” is the id of a div that exists on the page, and this line defines our drawing area. Next we create our chart with new dimple.chart().

I add two axes to the graph, and for many types of graph, this is all you would need. Both axes are quantitative data, i.e. they’re numeric the numbers mean something, so we use addMeasureAxis and specify which is for x and which for y. In this case, I’m measuring comment counts so that’s my y axis, and charting that against the number of attendees, which becomes x. At this point, we’ve specified the position of the points on the graph.

To place the bubbles, we add a data series. This is extra information beyond just drawing the points. Whichever fields you include here are the data shown on the tooltip when you hover over the point. For a dimple.plot.bubble, the final argument in this list dictates what colour the bubble will be … “place” isn’t particularly informative (it’s taken from the timezone information which is why it looks odd) and there are more places than this graph has colours, but it made such a pretty result that I thought I’d keep it – very scientific!

Finally, we tell the graph to draw itself, and it will appear.

Observing Events, Attendees and Comments

What surprised me about this graph was how closely the number of attendees correlated to the number of comments given for talks at a particular event. The outliers on the right hand side are the events I’d expect to see: PHPNW, DPC and ZendCon have all been fanatical users and supporters of joind.in. But look at those two points above the main line in the middle – those are smaller events, with a much higher comment-to-attendee ratio than most of them manage. I can only say that clearly my friends at PHPDay and jsDay in Italy are doing something great to motivate their community :)

Bubble Charts With DimpleJs

Using the same data as before, we can also look at how many comments there are when compared to the number of talks at an event. The bigger conferences might have high numbers of people marked as attending and high numbers of comments, but it would be nice to try to take account of sheer conference size and see some data that shows how the smaller events are faring in relation to their size, so I created this:

Again, the code behind it is fewer lines than you might think. Here it is:

    var svg = dimple.newSvg("#ratioChartContainer", 600, 400);
    var myChart = new dimple.chart(svg, data);
    myChart.addMeasureAxis("x", "talks");
    myChart.addMeasureAxis("y", "comments");
    myChart.addMeasureAxis("z", "comments_per_talk");
    myChart.addSeries(["event", "talks", "attendees", "comments", "place"], dimple.plot.bubble);
    myChart.draw();

The example begins and ends much the same as the previous one, attach to a div and create a chart there. All our axes in this case are measures again – meaningful numeric data. Here I’ve counted comments again, but against the number of talks at an event. Very large events may have many tracks, but only a few vocal users giving feedback. I’ve also calculated the average comments per talk, and stored that in a field called “ratio”. This field then becomes our Z axis, which for a dimple.plot.bubble dictates the actual size of the bubble (by not defining it for the first graph, we created a scatterplot).

I’ve added the series again, showing the data I’d like available in the tooltip, and again I kept the place as the colour by keeping it as the last element on the axis – useless, but pretty!

Observing Comments-Per-Talk Ratios

What this graph shows me is that there is a clear trend, but also some surprises. ConFoo, which has a lot of participation on joind.in, doesn’t look so impressive from this angle because it has a very large number of talks (it’s the point at the furthest right side). Those two Italian conferences rate highly on this metric also, which is impressive. I grabbed a list of events when considered from this one metric of comments per talk, and these are the top performers:

1. Day Camp 4 Developers #5: Public Speaking for Developers
2. jsDay 2013
3. SymfonyDayIt
4. phpDay 2013
5. Day Camp 4 Developers Master Series II
6. PHPCon Poland 2013
7. Day Camp 4 Developers #6: Non-Programming for Programmers
8. Nomad PHP July 2013
9. PHPNW 2013
10. Laracon EU

I can’t help but notice the strong themes of Italian and virtual conferences here – perhaps we should ask those conference organisers what they particularly do to boost participation? (I actually created this as a horizontal bar chart, perhaps I should share that in a future post). There are other ways to measure an event but I found this interesting.

DimpleJs and Joind.in Data

Whether you found this post interesting for the dimplejs examples or for the technical conference metrics, I hope it’s been useful or interesting. Dimple have some great examples of many kinds of graph on their site, but usually without any accompanying words which is why I wanted to write down what I had done to create these. And the joind.in data is available via the API for anyone interested in their own event or some insightful visualisations of the conference space as a whole. Whichever one you picked up, let me know what you think!