All examples By author By category About

jgujgu

Contours of Nepal using topojson and d3.js

This is an answer to this Stackoverflow question which asks how to render topographic contour lines. The second part of the question looks into animating parts of the visualisation which isn't covered here.

To demonstrate this a visualisation of topographic contours of Nepal (and Tibet) was created. The visualisation here is based on ETOPO1 1 minute resolution dataset from the NOAA National Geophysical Data Centre. It was downloaded as an ArcGIS ASCII grid and processed in QGIS where the resulting DEM was contoured into 500m contours.

The resulting contours were then converted to topojson using the command line version. This was necessary to preserve the properties of the topojson as I wanted to colour code the contours based on elevation. On-line topojson tools typically don't allow this as the default in topojson to to remove properties.

The contours are then rendered using the typical pattern for geo-objects. The stroke property for the paths set based on the elevation property using the interpolateLab function.

Well, there is a little bit of interaction when you mouse over a contour just to give a bit of a demo of what's possible.