index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Maps in D3js</title>
<meta name="description" content="Maps in d3js">
<meta name="author" content="Edward Mac Gillavry">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="d3js">
<link rel="shortcut icon" href="">
<style>
body {
background-color: #fffaf5;
}
svg {
background-color: #fffaf5;
}
.gemeente {
fill: #ccc;
stroke-width: 0.4;
stroke: #fff;
}
.quakes {
fill: #317581;
fill-opacity: 0.6;
stroke-width: 0.7;
stroke: #fff;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
let width = 450,
height = 600,
svg = d3.select("body")
.append("svg")
.attr('width', width)
.attr('height', height);
d3.queue()
.defer(d3.json, "gemeenten2017.topojson")
.defer(d3.json, "aardbevingen_NL.geojson")
.await(ready);
function ready(error, municipalities,earthquakes){
if (error) throw error;
let gemeenten = topojson.feature(municipalities, municipalities.objects.municipalities);
let projection = d3.geoMercator()
.fitSize([width, height], gemeenten);
let path = d3.geoPath()
.projection(projection);
svg.append("g")
.selectAll("path")
.data(gemeenten.features)
.enter()
.append("path")
.attr("class","gemeente")
.attr("d", path)
.append("title")
.text(function(d) { return d.properties.name});
svg.selectAll(".quakes")
.data(earthquakes.features)
.enter()
.append("path")
.attr("d", path.pointRadius(3))
.attr("class", "quakes");
}
</script>
</body>
</html>