GeoJSON and TopoJSON

Get introduced to the formats used to handle geographical information in D3.

We'll cover the following

Another string to the bow of D3.js is the addition of a set of powerful routines for handling geographical information.

In the same sense that a line graph is a simple representation of data on a document, a map can be regarded as a set of points with an underlying coordinate system. When you say it like that, it seems obvious that it should be applied as a document for display. However, I don’t want to give the impression that this is some sort of trivial matter for either the original developers or for you; the person who wants to display a map. Behind the scenes for this type of work, the thought that must have gone into making the code usable and extensible must have been enormous.

GeoJSON and TopoJSON


Projecting countries and various geographic features onto a map can be a very data hungry exercise. By that, I mean that the information required to present geographic shapes can result in data files that are quite large. GeoJSON has been the default geographic data file of choice for quite some time. And as the name would suggest, it encodes the data in a JSON type hierarchy. Often these GeoJSON files include a significant amount of extraneous detail or incorporate a level of accuracy that is impractical (too detailed).


Enter TopoJSON. Mike Bostock has designed TopoJSON as an extension to GeoJSON in the sense that it has a similar structure, but the geometries are not encoded discreetly. Where they share features, they are combined. Additionally, TopoJSON encodes numeric values more efficiently and can incorporate a degree of simplification. This simplification can result in savings of file size of 80% or more, depending on the area and use of compression. The advantages of it are clear, and so you will find it in my example diagrams (not that the use of GeoJSON differs much, if at all).

Get hands-on with 1200+ tech skills courses.