jstcki/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Topographic map of Switzerland with map data from Swiss Maps 2.0.
Thanks to Hugo Lopez for his approach on generating contour polygons.

  
## ch-contours.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>