Old school D3 from simpler times

All examples By author By category About

jerstucki

Full window Github gist

Swiss Cantons and Municipalities

Map of Switzerland with TopoJSON and map data from Swiss Maps. Cantons and municipalities are combined in a single TopoJSON file.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
 
.country {
  fill: #222;
}

.canton-boundaries {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
}
 
.municipality-boundaries {
  fill: none;
  stroke: #fff;
  stroke-width: .3;
}
 
</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;
 
var path = d3.geo.path()
  .projection(null);
 
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
 
d3.json("ch.json", function(error, ch) {
  svg.append("path")
    .datum(topojson.feature(ch, ch.objects.country))
    .attr("class", "country")
    .attr("d", path);
 
  svg.append("path")
    .datum(topojson.mesh(ch, ch.objects.municipalities, function(a, b) { return a !== b; }))
    .attr("class", "municipality-boundaries")
    .attr("d", path);
 
  svg.append("path")
    .datum(topojson.mesh(ch, ch.objects.cantons, function(a, b) { return a !== b; }))
    .attr("class", "canton-boundaries")
    .attr("d", path);
});
 
</script>

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
 
.country {
  fill: #222;
}
​
.canton-boundaries {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
}
 
.municipality-boundaries {
  fill: none;
  stroke: #fff;
  stroke-width: .3;
}
 
</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;
 
var path = d3.geo.path()
  .projection(null);
 
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
 
d3.json("ch.json", function(error, ch) {
  svg.append("path")
    .datum(topojson.feature(ch, ch.objects.country))
    .attr("class", "country")
    .attr("d", path);
 
  svg.append("path")
    .datum(topojson.mesh(ch, ch.objects.municipalities, function(a, b) { return a !== b; }))
    .attr("class", "municipality-boundaries")
    .attr("d", path);
 
  svg.append("path")
    .datum(topojson.mesh(ch, ch.objects.cantons, function(a, b) { return a !== b; }))
    .attr("class", "canton-boundaries")
    .attr("d", path);
});
 
</script>
    

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

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

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