Skip to content

Instantly share code, notes, and snippets.

@jgujgu
Last active February 5, 2017 18:54
Show Gist options
  • Save jgujgu/0c9075172fcc72f75c71303734516b2e to your computer and use it in GitHub Desktop.
Save jgujgu/0c9075172fcc72f75c71303734516b2e to your computer and use it in GitHub Desktop.
Contours of Nepal
license: mit

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.

forked from phil-pedruco's block: Contours of Nepal using topojson and d3.js

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Nepal Topographic Contours</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
var h = 500,
w = 960;
// set-up unit projection and path
var projection = d3.geo.mercator()
.scale(1)
.translate([0, 0]);
var path = d3.geo.path()
.projection(projection);
// set-up svg canvas
var svg = d3.select("body").append("svg")
.attr("height", h)
.attr("width", w);
// set-up scale for colour coding contours
var cScale = d3.scale.linear()
.domain([0, 1]);
// read in topojson of Nepal
d3.json("z_contours_500_clipped.json", function(error, nepal) {
// first variable is used to centre and scale map to viewport
// could have used the bbox feature (see https://github.com/mbostock/topojson/issues/67)
var bTopo = topojson.feature(nepal, nepal.objects.contours_500_clipped),
topo = bTopo.features;
// calculate range for colours based on ELVE property
// Note when converting to topojon the default is to REMOVE all properties
// from the input file, you need to use the -p switch.
var hRange = d3.extent(topo, function(d, i) {
return d.properties.ELEV
});
cScale.domain(hRange);
// calculate bounds, scale and transform
// see http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object
var b = path.bounds(bTopo),
s = .95 / Math.max((b[1][0] - b[0][0]) / w, (b[1][1] - b[0][1]) / h),
t = [(w - s * (b[1][0] + b[0][0])) / 2, (h - s * (b[1][1] + b[0][1])) / 2];
projection.scale(s)
.translate(t);
svg.selectAll("path")
.data(topo).enter()
.append("path")
.style("fill", "none")
.style("stroke", function(d, i) {
return interp(cScale(d.properties.ELEV));
})
.attr("d", path)
.on("mouseover", highlight) // just a little example of what's available in terms of interaction
.on("mouseout", function (d,i) {unhighlight(this,d);
});
});
// function to interpolate between to colours
// see http://stackoverflow.com/questions/12217121/continuous-color-scale-from-discrete-domain-of-strings
function interp(x) {
var ans = d3.interpolateLab("#ffffe5", "#004529")(x);
return ans
}
// A simple highlight example
function highlight(x) {
var s = d3.select(this);
s.style("stroke", "red");
}
function unhighlight(x,y) {
var old = y.properties.ELEV;
var u = d3.select(x);
u.style("stroke", function(d, i) {
return interp(cScale(old));
})
}
</script>
</html>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment