What is the best way for journalists to learn D3.js?

An interview with data artist Scott Murray


Being able to find data, verify it, and create interactive visualisations are widely sought skills in newsrooms. Compared to the early 2000s, when it was necessary to study a textbook and work through examples, there are now numerous interactive trainings available online. However, the perception that getting into coding is ‘difficult’ persists. Many journalists claim that they got into journalism because they are ‘not good with math’. and this thinking runs so deep in the profession that it’s very hard to overcome.

A non-coding journalist’s first steps towards handling folders of code, navigating the command line, and working with code editors are awkward. Is there a way to overcome this? What is the best way for journalists to get started? And, when can one expect to become productive? To answer these questions, Mirko Lorenz reached out to Scott Murray.

You have interacted with a number of training participants. What kind of mindset is required to overcome the first hurdles?

For me, the most important thing is to help someone feel comfortable with being uncomfortable. Coding can be hard! It can also be super rewarding. But everyone -- even experienced coders -- stumbles along the way. That’s part of what I love about Processing; its ‘sketching’ metaphor helps beginners feel more comfortable. When everything you code is simply a ‘sketch’ and not a ‘program’, it feels like it’s okay to make mistakes. If you smudge a bit, just erase, and draw over it.

Can you outline your experience and the path to success for people who have never thought about getting into coding? Is training journalists different to other groups?

I love working with journalists because they are uniformly curious and energetic people. To me, curiosity and energy are the only two things you really need to get into creative coding and data visualisation. You need a computer, of course, but that’s really secondary. I have taught many classes and workshops with non-journalists -- people in other industries -- and it’s so sad to me when people take the class simply because their boss told them to, or because they think it would be a good step for their career. When their heart isn’t in it, learning to code is a struggle. The learning process should be both fun and challenging at the same time.

Many people will ask -- how long does it take to become productive with data visualisations in general?

New practitioners can become productive right away, starting with their first sketches! There is no need to be an expert or have years of experience; everyone has to start somewhere. Just start sketching and -- crucially! -- sharing your creations.

The field is exploding in size and reach right now; the more you can share your ideas, the more you get to be a part of this growing conversation.

What are the most important concepts for understanding D3?

D3’s principal concept is data binding, in which data values are attached to (or ‘bound’) to elements of the web page. Those elements are usually visual things, like rectangles in a bar chart, or circles in a scatterplot. But they can be anything, such as shapes representing different countries on a map. Data binding is so powerful, because then going forward, each element continues to keep track of its own data.

For example, say you make a world map, and your data has values for each country like total population, GDP, and land area. Once the data values for each country are ‘bound’ to the shape that will be used to represent each country, it is easy to adjust visual properties. You just tell the shapes what to do, such as ‘colour yourselves in according to population values’ or ‘make yourself red if your GDP exceeds x amount; otherwise, make yourself grey’.

MIRKO-2

D3 can 'bound' data values to countries on a world map.

You are teaching D3.js and you are a contributor to Processing. How do they differ? Which is the better one to start with?

Processing is a language and an application designed for a beginner audience. D3 was never intended for beginners; it is trying to address a different need -- loading data and displaying it on the web. And, the web context is enormously more complex, involving interactions between different technologies like HTML, CSS, JavaScript, SVG, and so on. That said, I always recommend people start learning what seems most relevant to them.

You describe yourself as a ‘code artist’. What is your personal motivation and background? How did you get into coding and interactive data visualisation?

Looking back (way back!), my first coding class was in LOGO (I think we used Commodore 64s, as this was even before the Apple II came out!). LOGO, for those who haven’t heard of it, is a language created in the 1960s by Seymour Papert. It is a language designed specifically for children -- Papert wanted to create ‘building blocks for the mind’, and saw computing as a powerful tool for helping children explore abstract ideas like logic, mathematics, and geometry (I recommend Papert’s book, Mindstorms, for more). In LOGO, by typing in commands like ‘FORWARD 100’ you can make an on-screen triangle (the ‘turtle’) move around, drawing lines to the screen as it goes.

MIRKO-4

An example of LOGO output. Credit: Wikimedia (CC BY-SA 3.0).

So, LOGO provides visual feedback in response to the logical rules crafted by the coder. I was quite young and didn’t grasp the full complexity of it at the time, but I knew that it was a powerful feeling to create such amazing patterns and shapes from simple instructions. These images looked very different from my crayon drawings at the time, and my pencil sketches today!

Processing is a modern, conceptual descendent of LOGO. It has a similar pedagogical intent -- a language designed for learning language. It is a beautiful project and allows me to relive that same feeling of excitement from my first taste of LOGO.

D3
subscribe figure