jgujgu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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

  
## index.html
<!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>


## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## z_contours_500_clipped.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              z_contours_500_clipped.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!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>