datamake

Writing a green book for D3

Co-authoring Learning D3js 5 Mapping and other writing adventures

I had a lot of fun with writing in 2017. The year got started with D3 and Canvas in 3 Steps, which trickled out of the Canvas-infused Winter Olympics project.

One sensible rainbow colour scale

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:

The green D3 book

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 all 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.

Canvas image vs SVG DOM — SVG Scream courtesy of Marco Pecce (udronotto.it)

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.

A blue house, a tree and some heavy rain.

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.

Tomato coloured dots as aeroplanes

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.

A movable globe

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.

The evolution of a regular tessellation.

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.

A pink GitHub project

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).

A zoom telescope from the 90's



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

Happy making !