D3 Examples - Swiss Topography

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font: 10px sans-serif;
}
​
.contour {
  stroke-width: 0.5;
}
​
.key path {
  display: none;
}
​
.key line {
  stroke: #000;
  shape-rendering: crispEdges;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
 
var width = 960,
    height = 500,
    thresholds = [500, 1000, 1500, 2000, 2500, 3000, 3500, 4000],
    contour;
​
var interpolateColor = d3.interpolateHcl("#55075A", "#F7DBCA");
​
var color = d3.scale.threshold()
  .domain(thresholds)
  .range(d3.range(thresholds.length + 1).map(function(d, i) { return interpolateColor(i / thresholds.length); }));
​
var x = d3.scale.linear()
  .domain([0, 4500])
  .range([0, 280]);
​
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickSize(13)
  .tickFormat(d3.format(".0f"));
​
var path = d3.geo.path()
  .projection(null);
​
var zoom = d3.behavior.zoom()
  .scaleExtent([1, 2])
  .on("zoom", zoomed);
 
var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .call(zoom);
​
var map = svg.append("g");
​
var key = svg.append("g")
  .attr("class", "key")
  .attr("transform", "translate(" + (width - 300) + "," + (height - 30) + ")");
​
key.append("rect")
  .attr("x", -10)
  .attr("y", -10)
  .attr("width", 310)
  .attr("height", 40)
  .style("fill", "white")
  .style("fill-opacity", 0.5)
​
key.selectAll(".band")
  .data(d3.pairs(x.ticks(10)))
.enter().append("rect")
  .attr("class", "band")
  .attr("height", 8)
  .attr("x", function(d) { return x(d[0]); })
  .attr("width", function(d) { return x(d[1]) - x(d[0]); })
  .style("fill", function(d) { return color(d[0]); });
​
key.call(xAxis);
​
d3.json("ch-contours.json", function(error, topology) {
  contour = map.selectAll(".contour")
    .data(topojson.feature(topology, topology.objects.contours).features)
  .enter().append("path")
    .attr("class", "contour")
    .attr("d", path)
    .style("fill", function(d) { return color(d.id); })
    .style("stroke", function(d) { return d3.hcl(color(d.id)).brighter(); });
});
​
function zoomed() {
  map.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
  contour.style("stroke-width", 0.5 / d3.event.scale);
}
 
</script>
    