Friday Lunchtime Learning – First Time with D3

First in an occasional series, maybe?

I’ve long been of the opinion that anyone who’s going to want to be anywhere near employment in the analytics market is going to have to learn to code sooner rather than later.

No, don’t panic, I’ve not done that.

What I have done, though, is have a look at D3. This was inspired by Bath:Hacked’s Mark Owen linking to this nifty little viz

D3 is, in it’s own words

a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to Document Object Model (DOM) manipulation.

Which I think is a long-form of saying ‘makes pretty graphs on the web’. Either way, I couldn’t help but feel my life will be better if I knew how to do it.

First job was off to the lovely google for a “wordpress + D3” question, assuming that it would of course be as easy as cutting and pasting some stuff.

It is… well, sort of…

First off I installed the WP-D3 plugin (based on the rigorous scientific criteria of being the first one to appear in the search) After that I stared at it for a bit before googling the instructions.

Documentation is clearly not aimed at the rank amateur, but there are some useful step-by-step guides on the web (third post here helped me- note: the required d3.min.js file wasn’t where they said it was – but it’s easy enough to find).

The instructions were based on this library, though I’m sure there are many different ways of getting to things. The main job was in disassembling the code provided (and the above .js script). This meant creating and uploading the following files:

  • The d3.min.js file – I think this sort of works like the basic program and is possibly consistent for all of D3’s visualisations.
  • The “style” elements of the viz. This was saved as a .css file. I think this is what tells it how it looks
  • The raw data – Hurrah, something I definitely recognise, the e.g. was a tsv, which I’ve not seen for years, but hey, numbers and characters with a delimiter, I can get my head around this.

The remaining code (the bit which actually tells the viz what to show and how to display itself) was input into the wp-d3 plugin itself. The code was then linked to the above three files and a couple of minor amendments to point the code to the right place.

A click of a button to insert the viz and here we are.

Of course, it’s completely meaningless and not the most inspiring of designs; but it’s a start and although it’s hardly the most intuitive process in the world, it didn’t prove too dispiriting.

Next step, I think will be to try a completely different viz without the tutorial and then maybe next try to do a graph of a real thing.

Leave a Reply

Your email address will not be published. Required fields are marked *