Our D3.js project is still in its infancy, but we thought we would share some of our early work with you.
So, what is it all about?
The goal is to be able to set out your data in a familiar spreadsheet environment and create great visualisations and charts that you can embed into your WordPress post or other webpage in D3.js format with a click of the mouse, whilst also providing a standard image version for older browsers and use in printed work (raster .png or vector .svg format).
Think big, start small
When working on a project like this it is important to get the basics right before moving on – “think big, start small” is our motto. So, we are starting off with some simple charts of the styles that you frequently use in spreadsheet programmes like Microsoft Excel.
Below is our first example. The chart below shows the percentage of visits to one website from desktop, mobile phone and tablet web browsers in the month of May 2013:
Taking it to a new dimension
Simple bar and pie charts like the one above are great, but they are restricted to two dimensions of data. If you want to look at how this data has changed over time you need a different chart.
Below is a multidimensional line chart showing how the visits from desktop, mobile and tablet browsers to the same website have changed over the past twelve months:
Again, if you are on an older browser you can see the basic chart with all the information you need, but if you have a more modern browser (most people do) then you can get a little bit extra. Run your mouse over the dots on the chart to see the base data for each point and use the links below the chart to zoom in for a better view of the mobile and tablet visits. You can also add in a D3.js smoothing algorithm so you can get a less spiky view on the data!
If you take a look at the tablet and mobile data you can really see how mobile traffic has increased over the last 12 months, something we have talked about in detail before.
We’ve still got some way to go before our Refined Charts project is ready for the big time, but in the meantime we would love to know what you think! Comments below, and if you’d like to find out more then please contact us – we would be especially interested to hear from anyone who might be interested in using the system when it becomes available (did someone say ‘early adopter discount‘?). Also take a look at our ministerial lobbying visualization to see some of the more complex visualizations we can create.
If you are a developer and want to know more about D3.js then take a look at the d3js.org website where there is tons of stuff to get you started, check out the book, and have browse through Roland’s personal site, where he posts more radical experiments with D3.js.