Skip to content

Instantly share code, notes, and snippets.

@tlfrd
Last active January 16, 2020 09:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save tlfrd/187e45e0629711c4560cf6bcd0767b27 to your computer and use it in GitHub Desktop.
Save tlfrd/187e45e0629711c4560cf6bcd0767b27 to your computer and use it in GitHub Desktop.
Diverging bar chart
license: mit
<!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>
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment