xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.7em;
}
</style>
</head>
<body>
<div id="dataviz">
</div>
<script>
var width = 960;
var height = 500;
var step = 110;
var color = d3.scaleOrdinal(d3.schemeCategory10);
var svg = d3.select("#dataviz").append("svg")
.attr("width", width)
.attr("height", height);
var projection = d3.geoMercator();
var path = d3.geoPath();
d3.queue()
.defer(d3.tsv, "Windenergie_op_land__241116094832.tsv")
.defer(d3.json, "prov.json")
.defer(d3.tsv, "target.tsv")
.await(ready);
function ready(error, data, map, target) {
var targetByRegio = {};
target.forEach(function(d) {
targetByRegio[d.regio] = d.target2020;
})
mapbyId = {};
map.features.forEach(function(d) {
mapbyId[d.properties.PRVNM] = d;
});
dataProv = [];
provs = [];
var last, p;
data.forEach(function(d) {
if (d.Regio != last) {
if (p!=undefined) {
f = [mapbyId[p[0].regio]];
if (f[0] == undefined) {
f = map.features.filter(function(d) {return provs.indexOf(d.properties.PRVNM) == -1;});
}
provs.push(p[0].regio);
dataProv.push({
regio:p[0].regio,
data:p,
feature: f});
}
p = [];
}
p.push({
regio: d.Regio,
jaar: d.jaar,
vermogen: d.MW
});
last = d.Regio;
});
var provs = svg.selectAll('.prov')
.data(dataProv)
.enter().append('g')
.attr("transform", function(d,i) {return "translate("+step*i+",0)";});
var charts = provs.append("g")
.attr("transform","translate(0,140)");
var titles = provs.append("text")
.text(function(d) {return d.regio;})
.attr("transform", "translate(0,155)");
var chartw = 3.1;
var bars = charts.selectAll('verm')
.data(function(d) {return d.data;})
.enter().append("rect")
.attr("width", chartw)
.attr("height", function(d) {return d.vermogen/10;})
.attr("transform", function(d,i) {return "translate("+chartw*i+","+-(d.vermogen/10)+")";})
.style("fill", function(d) {
c = (d.jaar!=2016)?"lightblue":"steelblue";
return c;});
var targetbar = charts.append("rect")
.attr("height", function(d) {return targetByRegio[d.regio]/10})
.attr("width", chartw)
.style("fill", "darkred")
.attr("transform", function(d) {return "translate("+chartw*30+","+-(targetByRegio[d.regio]/10)+")";});
var envals = charts.append('text')
.text(function(d) {return d.data[26].vermogen + "MW";})
.attr("text-anchor", "end")
.attr("transform",function(d) {return "translate("+chartw*27+","+-(3+d.data[26].vermogen/10)+")";});
scalefactor = projection.scale();
center = d3.geoCentroid(map);
bounds = path.bounds(map);
hscale = 14*width / (bounds[1][0]-bounds[0][0]);
vscale = 14*height / (bounds[1][1]-bounds[0][1]);
scale = (hscale < vscale) ? hscale : vscale;
// TODO: center zet de kaart iets teveel naar onder, daarom een offset
offset = [width/2, (height/2-height/50)];
projection
.center(center)
.scale(scale)
.translate(offset);
path.projection(projection);
// draw map
var provincies = charts.selectAll("prov")
.data(function(d) {return d.feature})
.enter().append("path")
.attr("d", path)
.style("fill","#bcccd3")
.attr("transform",function(d,i) {
dx = -path.centroid(d)[0]+(step/2.1);
dy = -path.centroid(d)[1]+60;
return "translate(" + dx + ", " + (dy+i*60) + ")"});
}
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js