When I finished my last job I decided that unless the perfect role magically appeared I’d spend some time getting to grips with, to be vague, “data visualisation and mappy stuff”. I decided I could treat it like studying: set myself projects, learn new things, read related material, watch talks, and post frequent updates here. But there have been no updates here.
I thought a good way to get up to speed with designing and making “data viz stuff” would be to take another stab at D3.js. I’ve used it a handful of times before but only to the extent of trying to cram different bits of example code together and being confused for days at a time.
From talking to friends, this seems a common pattern with D3. How is this code doing something? Why is it now doing nothing? What is enter(), what am I entering? Where’s the data gone, how do I get at it, can I please get a single sodding line to appear, show me something anything please oh God please.
But this time, this time, I’d methodically make progress until it clicked, until I was, to some degree, fluent. One step at a time. I wanted to be able to sketch an idea and know how to make a live, data-driven version of it appear on the screen. D3 can do so many things and before long I would be able to as well!
To warm up, and remember what little I’d learned before, I set myself a quick project. Re-reading The Visual Display of Quantitative Information I came across William Playfair’s 18th century charts showing the balance of imports and exports for a country:
Making a D3 version of this, with modern data, letting the user compare different countries, seemed feasible. I’d drawn simple line charts before with D3 so this would be a manageable next step. “Only two or three days,” I thought.
I just… I don’t know. Is it my brain? Does my brain work at a substantially slower speed than it should? Am I an imbecile and all my friends are too polite to tell me? Even with so much example code floating around this was difficult. IT’S JUST A LINE CHART! What’s wrong with me?
After stumbling around for a while, making little progress, I thought I should go back to basics. I read a little book that in retrospect only confused me further. I tried another, bigger book that did begin to help. I could almost see understanding on the horizon, only a day or two’s journey away. I could almost grasp the basics, but not quite, not so as the understanding lasted.
“This is fine,” I told myself, “learning new things is always like this.” I remembered back a few years when I started learning Python and Django and how I’d spend days at a time making no progress at all, bashing my head against mysterious and un-Googlable error messages. But eventually, although there are always new problems, I felt gradually less and less of an idiot.
Learning new coding stuff is, for me, like this scene from Intacto:
“I’m doing new things! This is so exhilarating!” I think as I run blindfold through a forest of new terms and concepts. “Look what I can do!” Then, BAM! I come to a complete and bloody halt, flat on my back, and I feel more stupid than before I started.
And trying to draw this one simple chart was the densest, most unforgiving of forests for this clumsy-footed idiot of a runner. Every. Single. Sodding. Step. I’d end up broken-nosed on the ground for a day or two, often, eventually, having to reluctantly ask for a hand up (usually the hand of Lars Kotthoff to whom I owe many thanks).
Why is it so hard to work out what format this data needs to be in? Why does my x-axis only have two points on it? Why do the shaded areas between the lines break when new countries are added to the chart? How do I display two lines each for multiple countries? Why does it keep re-drawing the axes over and over? Why can’t I update the chart with new data? Why can I only draw one circle, rather than one for every data point? Why can’t I give a unique name to each point so that they update correctly? Have I really got the data into the correct format?
The weeks went by. It was much less exhilarating that running through a forest blindfold. But now, I’ve finished. You can try it out. Here’s a static picture of it:
Ignoring this sorry tale, it’s OK, and I’m reasonably pleased. It could be improved, but it’s not embarrassing. Comparing too many lines will get confusing and the country names labelling lines will become useless. It’s not ideal if you’re colourblind. I haven’t done any browser testing.
I don’t know how long this “two or three day” quick little project took me. We could count it in weeks. Imagine if I was being paid a day rate for this. Pathetic. Really. I don’t even have any interest in the imports or exports of different countries.
But, still… even though it was painful right up until the end, and even though, even after all that, I still don’t feel I “get” D3 yet, something has stuck. Over the final few days I managed to figure out a few things for myself, things that would have left me flat on the forest floor a few weeks earlier. It’s not much. I couldn’t even create this really quite simple chart, very, very slowly, without getting completely and utterly stuck several times. But I’m clinging on to those tiny, possibly imagined, moments of understanding as embarrassingly tiny signs that maybe I’m not entirely an idiot.
Commenting is disabled on posts once they’re 30 days old.