Old school D3 from simpler times

All examples By author By category About

allardw

Full window Github gist

Wind energy production per province in the Netherlands 1990 - 2016

<!DOCTYPE html>
<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