Maryland Contour Map

Recipe for making a contour map (see Makefile). Requires make, gdal and mapshaper.

<!DOCTYPE html>
<head>
<style>

/* See https://soliton.vm.bytemark.co.uk/pub/cpt-city/wkp/template/tn/wiki-1.02.png.index.html */
.elevation-0 { fill: rgb(172,208,165); }
.elevation-1 { fill: rgb(148,191,139); }
.elevation-2 { fill: rgb(168,198,143); }
.elevation-3 { fill: rgb(189,204,150); }
.elevation-4 { fill: rgb(209,215,171); }
.elevation-5 { fill: rgb(225,228,181); }
.elevation-6 { fill: rgb(239,235,192); }
.elevation-7 { fill: rgb(232,225,182); }
.elevation-8 { fill: rgb(222,214,163); }
.elevation-9 { fill: rgb(211,202,157); }
.elevation-10 { fill: rgb(202,185,130); }
.elevation-11 { fill: rgb(195,167,107); }

</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

var width = 960,
		height = 500;

var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

// EPSG:26985 (See https://github.com/veltman/d3-stateplane)
var projection = d3.geoConicConformal()
  .parallels([38 + 18 / 60, 39 + 27 / 60])
  .rotate([77, -37 - 40 / 60]);

var path = d3.geoPath()
	.projection(projection);

d3.json("contours.json", function(error, topology) {
	if (error) throw error;

var contours = topojson.feature(topology, topology.objects.contours);

projection.fitSize([width, height], contours);

svg.selectAll("path").data(contours.features)
		.enter().append("path")
			.attr("class", function(d) { return "elevation-" + d.properties.DN; })
			.attr("d", path);
});

</script>
</body>
</html>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js