This is a companion post to my NACIS 2019 Practical Cartography Day talk, in which there’s not enough time to say anything practical. If you’ve arrived here after seeing the slides, I hope you’re ready for some coding!
Desktop computer and hand-drawn cartography have a long history of subtle-yet-advanced design tricks to turn good maps into great maps. With web maps, it’s easy to spend all your effort on getting code to work or building user interfaces or programming interactivity, and neglect little cartographic design enhancements. Today I’m here to demonstrate web technology as a design tool and show some processes for bringing desktop-esque design enhancements to web maps. My hope is to explain some technical approaches well enough for cartographers to get the hang of them and adapt them to their own design ideas.
A helpful prerequisite—and it’s a doozy—is a basic understanding of using D3 to draw maps on the web. But don’t run away if you’re not a D3 expert. Start by playing with the forthcoming map examples, and fill in gaps later.
As promised, here are links to fully explained examples and code. They are written in Observable notebooks, which are live and interactive. Play around with the code and see what happens!
The presentation also includes a few images of Canvas examples not contained in the tutorials:
If you’ve arrived here from elsewhere, below are the less-than-informative slides that these tutorials are meant to accompany.
Happy mapping!
