Tag: D3

Spinning globe with glowing city markers in D3

D3 (Data-Driven Documents) is not only one of the currently leading dataviz tool, it also has huge capabilities when it comes to mapping. Here at mappable we’ve so used it for building Travel Score and the Berlin A-Z maps. D3 has a quite steep learning curve, but since I’ve successfully worked with it while only having very basic JavaScript knowledge at that time, it’s definitely doable and in my eyes well worth the effort.

Not having used D3 in quite a while and a little worried that my skills would turn rusty soon, I was pleased to find this tutorial by Curran Kelleher in my twitter feed the other day. It’s a great introduction into D3 and was a welcome opportunity for me to kick start working with D3 again. Close to the end of his tutorial (here), Curran shows how to draw a world map in D3 simply by plotting graduated circle markers according to their lat/long coordinates using Geonames data. I instantly liked the idea and though it would be a good exercise to give the visualization a few additional touches, making use of D3’s extensive mapping functionalities.

First of all, I decided to use D3’s build in orthographic projection. With just a few twists and configurations I had a beautiful globe instead of a flat map. Next, I wanted to get that globe spinning. Why? Basically, because spinning globes are totally fascinating and look awesome! Again, this can be done by adding just a few lines of code. There’s a great example by Mike Bostock showing the basic principle, which I adopted. Finally, to add some simple interactivity, I’ve integrated some HTML5 sliders and a color picker with the corresponding event listeners.

All together this gives us a spinning globe, showing all cities in the GeoNames databast with a population of more than 100.000 and handlers to manipulate rotation speed & direction, marker opacity, size & color. The result might challenge the rendering capabilities / the processing power of your computer, since it constantly re-calculates and re-projects the positions of over 4.000 markers on the globe. Looking at my machine (a 2013 MacBook Air) that amount is probably at the limit of what you should do with SVG transformations. If you want to build something bigger, working with either canvas or WebGL might be a good idea (see this OpenViz conference talk by Dominikus Bauer for a proper explanation).

Anyway, I’m quite happy with what I’ve build and wanted to share it, since I’ve learned so much just by looking at all the awesome examples out there.

The globe visualization and the source code can be found here or by clicking the image. I decided not to embed it into the blog post, but to use a animated GIF instead, since it could lag or crash browsers on weaker machines. Please also note that the visualization is only optimized for Chrome browsers. I didn’t invest any time in cross-browser compatibility.

Have fun playing with it and happy mapping with D3!

What’s your Travel Score?

Today we’re releasing a new project: Travel Score. It’s an interactive map which, by selecting those areas of the world that you’ve visited, calculates how much of the earth you’ve already explored.

The geographic data, gathered from Natural Earth & SEDAC/CIESIN, was processed in QGIS and finally visualized in D3 for making everything interactive. The project page includes a detailed description of the way everything works and how I’ve built the map as well as some words about the dataviz / cartography journey I’m currently planning. Or if you, like most of the people on the web, are just interested in the fancy, interactive content, take this shortcut to reach the full-sized, interactive version of the map or simply click on the image.

BTW: My travel score is 6.91…still a lot to explore! what’s yours?

The potential of phone directories for urban analytics

One of our main interests at mappable is to find creative ways to use (geo-)data for mapping urban dynamics. In our newest project we will explore how phone directories can serve as a data source for various analytical tasks, starting with urban migration patterns.

For this purpose we bought German CD-ROM phone directories for the years 2004 – 2012 and exported all datasets for Berlin. We subsequently identified approximately 50.000 individual intra-city relocations and started to visualize and analyze the derived migration data. The first result of our work is an interactive, explorative visualization that let’s you explore Berlin’s intra-city migration patterns with high spatial granularity. You can take a closer look at it and explore the dataset on your own by clicking on the image bellow.

The migration patterns generated with our approach resemble those of the city’s official migration statistics. Thanks to the fact that our raw data are addresses, we are even able to analyze intra-city migration on a more detailed level than with the officially released data, which is aggregated to the county (‘Bezirk’)-level.

To sum things up: we are quite enthusiastic about the potential of phone directories as a data source and there are definitely more research questions that can be answered with these data sets besides only migration patterns (e.g. monitoring gentrification processes, identifying ethnicity patterns).
We will continue to publish short updates about this project here on our blog. If you want to take a more in depth look, see our project page, where you can find some words on how we processed the data, created the visualization and how we interpret the migration patterns we’ve found.