Creating a Population Density Map of Toyota City, Japan Using d3-geo’s CLI (and some other stuff) — Part 2

This is a tutorial series based on Mike Bostock’s Command-Line Cartography. Read part 1 and part 3 of this series here.

In part 1, we manipulated our data in a way which allowed us to create an early version of our population density choropleth map of Toyota. In this part, we’re going to work on reducing our file size. The file size of our GeoJSON ended up being about 3.3MB. That’s not huge, but it would be nice to have it smaller. If you are interested in having a deeper understanding of how all of this works, check out part 3 of Mike Bostock’s tutorial. I won’t be getting too deep into it.

First, we’ll convert out GeoJSON into TopoJSON. TopoJSON is similar to GeoJSON, but for reasons I won’t get into, smaller in file size and can be manipulated to be even smaller. With a little bit of work, TopoJSON files can be identical in topology to GeoJSON while being significantly smaller.

Let’s install the TopoJSON CLI:

npm install -g topojson

Now we’ll convert our GeoJSON into TopoJSON using geo2topo, which is part of the package we just installed:

geo2topo -n \
  choumes=toyota-density.ndjson \
  > toyota-choumes-topo.json

First thing to notice here is that we are inputting our NDJSON file with density encoded. The ‘-n’ lets geo2topo know that we are using NDJSON. The other weird thing here is ‘choumes=’. This isn’t a keyword, any word you use here will be used as an object in the resulting TopoJSON which will contain the topology. I used choumes because that is generally what these administrative areas are called in Japan (I don’t think all of them are choumes but most are, there may be a more appropriate name for them). Putting the topology in an object is necessary for TopoJSON to work it’s magic and reduce our filesize.

And as you can see, its size has already been reduce to 1.9MB. Pretty good! If you wanted to, you could reduce it even further by using toposimplify. At this scale, it seemed like overkill, and had too much of an effect on the topology, so I didn’t do it. If you do want to do it, you could use something like below:

toposimplify -p 1 -f \
  < toyota-choumes-topo.json \
  > toyota-choumes-simp.json

What I did do is use topoquantize. This basically does some math and gets rid of all the numbers after the decimal points in the in the coordinates while only resulting in a small visible effect. It’s kind of amazing:

topoquantize 1e5 \
  < toyota-choumes-topo.json \
  > toyota-quant-topo.json

So after this, my file size is a mere 542KB. That’s significantly smaller that the 3.3MB we started with, and that’s the power of TopoJSON! Below is the output in Mapshaper (upside down again). As you can see it looks exactly the same.

Mike Bostock’s tutorial goes over some very cool topomerge stuff. So if you are interested in utilizing other, larger administrative areas for this map I would suggest checking it out. I will just be sticking with the choumes and so won’t go over it.

I’ll leave it there for now, because next time we’ll be doing a lot of work to finish our map.

Part 1

Part 3