Writing a green book for D3

2017 was the year of the pen. It started with D3 and Canvas in 3 Steps, which trickled out of the canvas-infused Winter Olympics project.

Aiming at a 5 minute note, it turned into a 30 minute read. Long, but cracking Canvas seemed worth it.

Then a fabulous thing happened. Sebastian Gutierrez introduced me to Oscar Villarreal and Thomas Newton back in May, with whom I then had the great pleasure to write the 2nd edition of Learning D3js mapping — now re-named to Learning D3js 5 mapping.

Here's a picture of it:

And a link

It was a fantastic experience. I read the 1st edition in 2015 and learned a lot from it, so it was a true honour to be part of the 2nd edition.

Oscar and Thomas updated content and D3 version of chapters 1 to 7, I added chapters 8 to 12. Here's a brief summary of the chapters:

1. Gathering Your Cartography Toolbox sets the reader up with some great examples.
2. Creating Images from Simple Text dives into SVG, its shapes and what you can do with it.
3. Producing Graphics from Data - the Foundations of D3 explains D3, its lifecycle methods and how it interacts with the DOM.
4. Creating a Map goes into mapping along a line of examples!
5. Click-Click Boom! Applying Interactivity to Your Map demonstrates how to make a map interactive.
6. Finding and Working with Geographic Data shows you an important step of mapping: getting good geo data and preparing it.
7. Testing explains how you can integrate testing into your D3 workflow.

The summaries of the following chapters I was lucky to write are a little extended — certainly not because the chapters deserve longer descriptions but because I can go into more excrutiatingly boring detail. There were three chapters about Canvas mapping, a chapter about how to build Hexbin maps and a final chapter about publishing visuals (or anything really) on GitHub.

8. Drawing with Canvas and D3. This chapter was unplanned. The idea was to write two chapters (the next two) about Mapping with Canvas. However, it became apparent that Canvas fundamentals would allow non-initiated readers to follow from the ground up within this very book and knowledgable readers to just dismiss this chapter. The contents quicken the beatings of the heart: first, we draw a blue house, next it rains and in the end a rain puddle turns to grass.

9. Mapping with Canvas and D3. While I would have liked to take the blue house to the next level, this next chapter is about airplanes. Many of them. Thousands and tens of thousands are turned into tomato coloured dots before being animated to fly from their origin to their destination. We do this first in SVG and then in Canvas to test performance and establish that Canvas can win these things easily. However, the chapter also gives you reason not to use Canvas, as it is a good friend at the right time but can be square at others.

10. Adding Interactivity to your Canvas map. ...like for example when you want to interact with your visual. Canvas can make this hard. Annoyingly hard when you come from HTML and SVG, which gives you elements you can actually grab and watch telly with. Sometimes it pays out to go with Canvas though, so this chapter is all about how to do it. Picking. Mainly picking. But also rotating and zooming and everything you do need to make a map or globe on the web.

11. Shaping Maps with Data - Hexbin Maps. I probably had most fun with this chapter (nothing against the blue house). My idea was to make a regularly tessellated hexbin map - hexagons covering the entire map area. I had no idea how to make this first. But trekking up hills like these is worth the sweat. I also learned another tonne by reading and taking on the comments from Andrew Reid, the technical reviewer, who I would read every book from.

12. Publishing your visualization with GitHub Pages. The last chapter is a photo-story about how to publish your visualization on GitHub. I'm really good at taking screenshots now. This could've been more exciting than it already is, by including the command line, but it was unfortunately already time to wrap up the writing.

After this highlight, I embarked on a tutorial of D3 zoom (also on freeCodeCamp). There isn't much written about zoom, so I thought I'd have a go. 5 min read, simply letting it float out of my fingers. Took me four months for a 30 min read. Rabbit holes... I did add a short 5 min zoom manual as an intro to the article (and as a spin-off article here and on freeCodeCamp).

So there. off to some more 5 minute articles...

Happy making !