geochart in d3.js

Question

I'm looking for some guidance or an example how to do a geochart in d3.js. I need something like this one in google charts, and turning to d3.js since I need some customization. So far the closest d3.js sample I found is this but the code is very long there and I am hoping to find something simpler.

Answer 1

Are you looking for a choropleth map? Here's a recent example in 28 lines of code.

This example uses the default projection, d3.geo.albersUsa, which is a composite projection for the United States including Alaska, Hawaii and Puerto Rico. If you want to change the visible region, you probably also want to change the projection; d3.geo.albers is good for choropleth maps because it is equal-area. The albers projection lets you set the origin so that you can focus on a specific part of the global, and all projections allow you to specify scale and translate to position the map on-screen.

If you want to display a world map, I'd also take a look at the ongoing development of the extended projections plugin. This adds a number of useful map projections, particularly for world maps, such as the Winkel Tripel. The next release of D3 will also include some exciting new features such as three-dimensional rotation for any projection (including antemeridian cutting; try dragging this example), adaptive resampling and improved clipping.

As for coloring the choropleth, you can of course color geographic features however you like by redefining the "fill" style as a function of data.

Answer 2

With all due respect to @mbostock and his answer, I thought I would add some additional resources for anyone coming across this question.

The example in the link provided by @Yaron Naveh appears to be a Mercator projection. You can find out more about d3.js' Mercator projection facilities in the d3.js API. @mbostock has also been kind enough to create blocks/gists for each of the projections in the API (click on the projection thumbnail image for the example). Here are the links to a simple Mercator projection block/gist.

Regarding the "The Art of Asking - How are you feeling?" link, here is a little code to go with what @mbostock said about coloring using the fill style as a function of data. In this example, I am simply picking the unicode value for the first character of the country's name in the JSON file and making a CSS color from that value using "steelblue" (#4682B4 = 4620980) as a sort of seed (you will probably want to calculate shades/tints).

d3.json("readme.json", function(collection) {
  d3.select("svg").selectAll("path")
      .data(collection.features)
    .enter().append("path")
      .attr("d", d3.geo.path().projection(d3.geo.mercator()))
      .style("fill", function(d) { return '#'+Math.floor(d.properties.name.charCodeAt(0)/100*4620980).toString(16); });
});

You can check out the full example here as a block/gist.

(@mbostock - Thank you for such a great tool!)