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:
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:
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 !