Making of: Washington Evergreens map with D3

Check out the finished map here.

Since moving to Seattle, I’ve been impressed with the biodiversity of the Pacific Northwest and its tree species in particular. Not being trained in tree identification (and wanting an excuse to learn more web visualization better), I decided that it would be fun to make a map of the state that somehow involved its trees.

I started out by following Nick Bostrom’s tutorial Let’s Make a Map, which steps you through getting a TopoJSON file, projecting it, and labeling it. I got geographic data from the EPA of Washington state subdivided into Level IV ecoregions, the most granular.

My stack ended up looking like this:

• D3.js. I haven’t found anything as capable and well-documented for native web visualization than D3.
• Coffeescript: Since I come from a Python background, I like the syntax of Coffeescript. It’s fallen out of favor in part because of improvements to Javascript with ES6, but for the purposes of a small project like this it’s great.
• NPM: Convenient for handling dependencies and scripting commands.

The core functionality of the map is that clicking on the ecoregions displays trees that grow there. So, each time an ecoregion is clicked and we get the ID, we need to look up a list of the trees that grow there. This is a bit complicated since those datasets don’t exist — instead I just have a lot of maps showing where individual trees grow.

I could have written an algorithm to perform an intersection of each tree range with each ecoregion, and mark the tree as growing in that region if more than some percentage of it was covered. But why spend a bunch of time over-engineering a solution to a problem when you can do it by hand faster? So I just drew an outline of the tree range and manually marking which ecoregions fell within it.

I ran into a problem when I tried to put in all the trees listed in Trees of Washington. For some of the ecoregions, the list of trees was ridiculously large and wouldn’t fit onto the page in any reasonable way. Eventually I just cut out everything except evergreens. I would rather the map be simple and beautiful than overburdened with information.

The last part of making the map was making it responsive — it needed to look good on cell phones, even though there’s no way it could look as good as on a desktop. The small ecoregions would inherently be awkward to tap with a finger, and some solution where the map was zoomed in further sounded even worse. At least my solution, where the map is at the top of a phone’s screen when it’s in portrait mode and the trees show up beneath it, looks okay and is mostly usable.

There were a lot of things I could have added. I didn’t add any cities or other landmarks. I didn’t add any animals or plants besides the evergreens. I wanted the map do one thing well, and hopefully that’s what it does.