With the coronavirus situation I've found the time to dust off this blog again and add some content. When looking at some old pictures, I found a curious one:
In 2018, I had the chance to visit Zurich's water treatment plant, Klärwerk Werdhölzli. The place is a lot more interesting than I had expected.
The first interesting thing I noticed is the amazing degree of automation. I was there on a Friday afternoon, and you'd hardly see any people around even though the place is huge.
It's also one of the few treatment plants in the world that has all its pipes overground in a massive structure on stilts - to protect the ground water that it was built upon. The plant also produces more energy than it consumes: The residue from filtration is turned into biogas.
Finally, they've come up with some creative uses for some of the basins they aren't using anymore. Some of them are used for growing fish that are then released into the Limmat river. And another one has actually been converted into a swimming pool, the one in the picture.
The OpenData initiative has resulted in a lot of cool publicly available data in Switzerland. The portal for it is opendata.admin.ch, which is where I found this CSV file containing tax rates in the canton of Zurich from 1990 to 2014.
For drawing a map, d3.js supports GeoJSON, a relatively simple format for map geometry. But an extension of this called TopoJSON is even more popular, because it can re-use shared line-segments on borders and thus results in smaller files.
For this project, I need a map of the municipalities in the canton of Zurich. Apparently, map data is available from swisstopo for free, but I couldn't really figure out what data I need and how to get it in the right format. Instead I found this cool GitHub repository, which contains all sorts of maps for Switzerland, readily available in TopoJSON format. Here's how I got my map data:
Now that we have, we need a web server. The reason for this is that we want to load data from outside of the website, but for security reasons we can't just load file:// URLs from JS. If you have Python 3 installed, the simplest way to start a web server in the current directory is with the command
Let's load the TopoJSON file first. d3.js has a very nice way to load and parse JSON files.
For the next step, we would like to colour the municipalities by tax rate. This means that we're going to access two data sources at once, the TopoJSON file and the CSV containing the tax data. We can use d3.json and d3.csv to load both files separately, then call a function in both that checks whether both files have been loaded or just one, and if both, execute main. However, there's a much nicer implementation that scales to an arbitrary number of datasources: queue.js. queue.js is embedded just like the other JS files:
If you want to find out more about map drawing in d3, there's a nice tutorial called Let's Make a Map by Mike Bostock, king of visualizations and writer of d3.js.
Confused by what those data() and enter() calls do? Take a look at Thinking with Joins by the same guy. Finally, there's always the d3.js API Reference for all the details.
I'm sure you can come up with many more interesting maps and visualizations. If you've made a cool one, shoot me an e-mail!