block by jeremycflin 45532740a932694fb8282a6c2752be58

Diverging bar chart

Full Screen

An example of a divering bar chart. Visualising the population growth rate of European countries (2016). Uses d3-scale-chromatic for bar colours.

This is part of a series of visualisations called My Visual Vocabulary which aims to recreate every visualisation in the FT’s Visual Vocabulary from scratch using D3.

forked from tlfrd‘s block: Diverging bar chart

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body { margin:0; position:fixed; top:0; right:0; bottom:0; left:0; }
    
    body {
      font-family: monospace;
    }
    
    .y-axis line{
      stroke: black;
    }
    
    .annual-growth {
      fill: black;
    }
    
    .bar-label, .x-axis {
      font-size: 8px;
    }
    
    .domain, .tick line {
      opacity: 0.5;
    }
    
  </style>
</head>

<body>
  <script>
		var margin = {top: 40, right: 50, bottom: 60, left: 50};
    
    var width = 960 - margin.left - margin.right,
    		height = 500 - margin.top - margin.bottom;
    
    var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    // Config
    var cfg = {
      labelMargin: 5,
      xAxisMargin: 10,
      legendRightMargin: 0
    }
    
    var x = d3.scaleLinear()
    	.range([0, width]);
    
    var colour = d3.scaleSequential(d3.interpolatePRGn);
    
    var y = d3.scaleBand()
    	.range([height, 0])
    	.padding(0.1);
    
    function parse(d) {
      d.rank = +d.rank;
      d.annual_growth = +d.annual_growth;
      return d;
    }
    
    var legend = svg.append("g")
    	.attr("class", "legend");
    
    legend.append("text")
    	.attr("x", width - cfg.legendRightMargin)
    	.attr("text-anchor", "end")
    	.text("European Countries by");
    
    legend.append("text")
      .attr("x", width - cfg.legendRightMargin)
    	.attr("y", 20)
    	.attr("text-anchor", "end")
    	.style("opacity", 0.5)
    	.text("2016 Population Growth Rate (%)");
    
    d3.csv("popgrowth.csv", parse, function(error, data) {
      if (error) throw error;
      
      y.domain(data.map(function(d) { return d.country; }));
      x.domain(d3.extent(data, function(d) { return d.annual_growth; }));
      
      var max = d3.max(data, function(d) { return d.annual_growth; });
      colour.domain([-max, max]);
      
      var yAxis = svg.append("g")
      	.attr("class", "y-axis")
      	.attr("transform", "translate(" + x(0) + ",0)")
      	.append("line")
          .attr("y1", 0)
          .attr("y2", height);
      
      var xAxis = svg.append("g")
      	.attr("class", "x-axis")
      	.attr("transform", "translate(0," + (height + cfg.xAxisMargin) + ")")
      	.call(d3.axisBottom(x).tickSizeOuter(0));
      
      var bars = svg.append("g")
      	.attr("class", "bars")
      
      bars.selectAll("rect")
      	.data(data)
      .enter().append("rect")
      	.attr("class", "annual-growth")
      	.attr("x", function(d) {
       		return x(Math.min(0, d.annual_growth));
      	})
      	.attr("y", function(d) { return y(d.country); })
      	.attr("height", y.bandwidth())
      	.attr("width", function(d) { 
        	return Math.abs(x(d.annual_growth) - x(0))
      	})
      	.style("fill", function(d) {
        	return colour(d.annual_growth)
      	});
      
      var labels = svg.append("g")
      	.attr("class", "labels");
      
      labels.selectAll("text")
      	.data(data)
      .enter().append("text")
      	.attr("class", "bar-label")
      	.attr("x", x(0))
      	.attr("y", function(d) { return y(d.country )})
      	.attr("dx", function(d) {
        	return d.annual_growth < 0 ? cfg.labelMargin : -cfg.labelMargin;
      	})
      	.attr("dy", y.bandwidth())
      	.attr("text-anchor", function(d) {
        	return d.annual_growth < 0 ? "start" : "end";
      	})
      	.text(function(d) { return d.country })
      	.style("fill", function(d) {
        	 if (d.country == "European Union") {
             return "blue";
           }
      	});
      	
    });
    
  </script>
</body>

popgrowth.csv

rank,country,annual_growth
1,Luxembourg,2.05
2,Cyprus,1.38
3,Ireland,1.20
4,Iceland,1.17
5,Kazakhstan,1.09
6,Norway,1.07
7,Azerbaijan,0.92
8,Turkey,0.90
9,Spain,0.84
10,Liechtenstein,0.82
11,Sweden,0.81
12,Belgium,0.73
13,Switzerland,0.70
14,United Kingdom,0.53
15,Austria,0.51
16,France,0.41
17,Netherlands,0.40
18,Finland,0.38
19,Albania,0.31
20,Malta,0.29
-,European Union,0.25
21,Italy,0.23
22,Denmark,0.22
23,Macedonia,0.18
23,Monaco,0.18
25,Czech Republic,0.14
26,Andorra,0.07
26,Portugal,0.07
28,Slovakia,0.01
29,Greece,-0.03
30,Georgia,-0.05
31,Russia,-0.06
32,Poland,-0.11
33,Bosnia and Herzegovina,-0.14
34,Germany,-0.16
35,Armenia,-0.18
36,Belarus,-0.21
37,Hungary,-0.24
38,Slovenia,-0.29
39,Romania,-0.32
40,Montenegro,-0.35
41,Ukraine,-0.39
42,Serbia,-0.46
43,Croatia,-0.50
44,Estonia,-0.54
45,Bulgaria,-0.60
46,Moldova,-1.04
47,Lithuania,-1.06
48,Latvia,-1.07