Skip to content

Instantly share code, notes, and snippets.

@jstcki
Last active December 1, 2018 13:34
Show Gist options
  • Save jstcki/6312708 to your computer and use it in GitHub Desktop.
Save jstcki/6312708 to your computer and use it in GitHub Desktop.
Swiss Topography
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.
<!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="http://d3js.org/d3.v3.min.js"></script>
<script src="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment