Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

codeA guest post by Kirby Wu is one of the co-founders of, an open source community dedicated to open government in Taiwan. He also plays the role of both a front end developer and a specialist of data visualization in this community and contributes to projects including government budget visualization in D3.js (, and open congress with online cinema ). You can find some of his work at

In the past year I’ve been involved in an open source community called “” This community is dedicated to promoting open government and open data. Give this fact, for our first project we visualized the government budget using D3.js. We soon realized that D3.js is a powerful framework, so we began exploring its capabilities by using D3.js in various g0v projects, such as visualizing population or crime rate on maps.


It’s quite simple to show some geographic features with d3js. You just need Mike Bostock’s topojson.js and the map you want to show, in topojson format. In this post I’ll demonstrate how to render a topojson file with topojson.js using Taiwan’s county boundaries as an example.

First, load the topojson file and parse it with topojson.js:

Next, prepare a projection function to project all of the features on the screen. The Mercator projection is used here:

We also prepare an svg path data generator function:

Finally, we create one path for each county inside the root svg element named “map”:

Since we don’t provide any style for these paths, you will see a black block like this:


This whole code snippet looks like this:

Map with Data

Now, Let’s visualize some data on the map. Here I paint each county with colors in a heatmap style to represent their population. First, initialize features with population data from a preloaded hash named “population”:

Since D3.js interpolates colors, we simply create a linear scale for color interpolation:

Then use the scale function to paint each county:

The result looks like this:


Encode Data with Area

With a different dataset, you can fill counties in different ways. For example, you can fill counties according to their political affiliation. Here is an example of visualizing political affiliation: the color blue, green and gray represent different political parties in Taiwan.


But be careful. The geometrical size of each county also affects what readers learn from the figure that is drawn, and sometimes it brings incorrect information. For example, in the above figure you might think that the blue party is larger than other parties, but the only fact here is: it’s the area that these counties cover that is bigger, not the population in these counties.

There are some approaches that resolve this issue. Cartograms distort the shape of regions to encode data, and Dorling cartograms distort the shape into non-overlapping circles. The following demonstrates how to render maps with Dorling cartogram and D3.js.

To build a Dorling cartogram, the basic idea is to put proper-sized circles at the centroid of each county, and apply force layout and collision detection over them. So, first let’s add one circle for each county, assuming that the root svg element has 800 by 600 pixels in its width and height, respectively:

Now we have circles on the counties, which is a common bubble chart on the map. To better illustrate the relationship between circles and counties, I added some colors:


To prevent circles from overlapping each other, we have to add a force layout and collision detection mechanism:

For simplicity here, we use a collision detection algorithm with time complexity Θ( n2) here. For a more efficient algorithm in D3.js, please check mbostock’s example of collision detection.

Then update circles with a new position:


Circles don’t overlap each other now, and they still roughly preserve the shape of this island.


Let’s go back to the previous party example. With a Dorling cartogram, we can visualize population as a radius of circles, and the party affiliation as a color of them. The result is shown in the next figure: blue party still rules, but total population of every party is more accurate now.


Working with Google Map

It is useful to overlay what we’ve done on something real, such as Google maps. For example, people may like to check real estate prices together with satellite images in order to better understand the neighborhood they are going to live in. So now, I am going to show you how to overlay your D3.js map on Google Maps.

The idea is also simple: Google Maps provides an API to project latitude and longitude on its own map widget, so instead of using a Mercator projection, we can use a customized projection that wraps the Google Maps API, and it’s done:

We also have to adjust the position and size of the root svg element if we allow users to browse around or zoom in/out of the map. The simple way of doing this is to use two coordinates to bind the corners of the root element on the map:

We also need an update to the position of all its children:

The final result is shown below. I didn’t enlarge the circles when zoomed so that you can read the detail of the map. When you zoom in, sometimes you will want to break circles into small pieces to show data in higher resolution, but this is simple by using the enter and exit function that D3.js provides.



Data visualization with maps can help your audience understand what you want to tell them, but only when you do it in the right way. Geographic information might be redundant or misleading if the shape, size or even the locality doesn’t matter in what you want to express. You should always keep this in mind when doing visualization: keep the information as useful as possible.

Look below for some great D3.js books from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Developing a D3.js Edge is aimed at intermediate D3.js developers, so to get the most from this book you need to know some JavaScript, and you should have experience creating graphics using D3. You will also want to have a good debugger handy (Chrome Developer panel or the Firefox/Firebug combo), to help you step through the many real world examples that you’ll find in this book.
Interactive Data Visualization for the Web shows you how to create and publish your own interactive data visualization projects on the Web – even if you have little or no experience with data visualization or web development. It’s easy and fun with this practical, hands-on introduction. Author Scott Murray teaches you the fundamental concepts and methods of D3, a JavaScript library that lets you express data visually in a web browser.
Data Visualization with d3.js walks you through 20 examples. You can finally stop struggling to piece together examples you’ve found online. With this book, you will learn enough of the core concepts to conceive of and build your own visualizations from scratch.
It begins with the basics of putting lines on the screen, and builds on this foundation all the way to creating interactive animated visualizations using d3.js layouts.
Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript provides readers with a strong framework of principles for making well-conceived and well-crafted infographics, as well as detailed and practical instructions for how to really wield D3, the best tool for making web infographics available. An extended example is used in the book to explain how to put theory to practical use.

Tags: D3.js, Google Maps, Maps, Taiwan,

One Response to “Using D3.js with Maps”