D3 Examples - Maryland Contour Map

xxxxxxxxxx
 
<!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>
    