Making of: Washington Evergreens map with D3

Rowan Copley
Aug 19, 2017 · 3 min read

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store