Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@dougdowson

dougdowson/chart.js

Last active November 12, 2017 23:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dougdowson/9732115 to your computer and use it in GitHub Desktop.
Save dougdowson/9732115 to your computer and use it in GitHub Desktop.
Download ZIP
Reusable Bar Chart
Raw
chart.js
d3.svg.barchart = function() {
var margin = {top: 10, right: 10, bottom: 20, left: 0},
width = 760,
height = 350,
padding = 0.25,
duration = 250,
tickFormat = null,
xValue = function(d){ return d[0]; },
yValue = function(d){ return d[1]; },
xDomain,
yDomain;
function barchart(selection) {
selection.each(function(datum, index) {
var data = datum.map(function(d, i) {
return [xValue.call(datum, d, i), yValue.call(datum, d, i)];
});
var xScale = d3.scale.ordinal()
.domain(xDomain ? xDomain.call(this) : data.map(function(d){ return d[0]; }))
.rangeBands([0, width - margin.left - margin.right], padding);
var yScale = d3.scale.linear()
.domain(yDomain ? yDomain.call(this) : [0, d3.max(data, function(d){ return 1.1*(d[1]); })])
.range([height - margin.top - margin.bottom, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickSize(6, 0);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickSize(-width - margin.left - margin.right)
.tickFormat(tickFormat ? tickFormat : null);
var svg = d3.select(this).selectAll("svg").data([datum]);
var g = svg.enter().append("svg")
.attr("width", width)
.attr("height", height*1.1)
.style("padding", "3px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g.append("g").attr("class", "bars");
g.append("g").attr("class", "x axis");
g.append("g").attr("class", "y axis");
g = svg.select("g");
var bar = g.select(".bars").selectAll(".bar")
.data(data);
bar.exit().transition()
.duration(duration)
.attr("y", height - margin.top - margin.bottom)
.attr("height", 0)
.remove();
bar.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d){ return xScale(d[0]); })
.attr("y", height - margin.top - margin.bottom)
.attr("width", xScale.rangeBand())
.attr("height", 0)
.transition()
.delay(duration)
.duration(duration)
.attr("y", function(d){ return yScale(d[1]); })
.attr("height", function(d){ return height - margin.top - margin.bottom - yScale(d[1]); });
bar.transition()
.delay(duration)
.duration(duration)
.text(function(d){ return d3.round(yScale(d[1]),1); })
.attr("y", function(d){ return yScale(d[1]); })
.attr("height", function(d){ return height - margin.top - margin.bottom - yScale(d[1]); });
g.select(".x.axis")
.attr("class", "x axis")
.attr("transform", "translate(0," + yScale.range()[0] + ")")
.transition()
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-0.5em")
.attr("dy", "0.1em")
.attr("transform", function(d) {
return "rotate(-45)"
});
g.select(".y.axis")
.attr("class", "y axis")
.transition()
.delay(duration)
.call(yAxis);
svg.selectAll("g")
.classed("g-baseline", function(d) { return d == 0 });
});
}
barchart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
return barchart;
};
barchart.width = function(_) {
if (!arguments.length) return width;
width = _;
return barchart;
};
barchart.height = function(_) {
if (!arguments.length) return height;
height = _;
return barchart;
};
barchart.padding = function(_) {
if (!arguments.length) return padding;
padding = _;
return barchart;
};
barchart.duration = function(_) {
if (!arguments.length) return duration;
duration = _;
return barchart;
};
barchart.tickFormat = function(_) {
if (!arguments.length) return tickFormat;
tickFormat = _;
return barchart;
};
barchart.x = function(_) {
if (!arguments.length) return xValue;
xValue = _;
return barchart;
};
barchart.y = function(_) {
if (!arguments.length) return yValue;
yValue = _;
return barchart;
};
barchart.xDomain = function(_) {
if (!arguments.length) return xDomain ? xDomain.call(this) : xDomain;
xDomain = d3.functor(_);
return barchart;
};
barchart.yDomain = function(_) {
if (!arguments.length) return yDomain ? yDomain.call(this) : yDomain;
yDomain = d3.functor(_);
return barchart;
};
return barchart;
}
Raw
data.csv
country variable value
Australia CO2 emissions 17.77324852
Austria CO2 emissions 8.147571324
Belgium CO2 emissions 9.829159629
Canada CO2 emissions 15.36481578
Denmark CO2 emissions 7.482175978
Finland CO2 emissions 10.32056288
France CO2 emissions 5.190746618
Germany CO2 emissions 9.139380131
Greece CO2 emissions 7.519412112
Iceland CO2 emissions 5.799127623
Ireland CO2 emissions 7.631979941
Italy CO2 emissions 6.54837368
Japan CO2 emissions 9.280510802
Luxembourg CO2 emissions 20.12169478
Netherlands CO2 emissions 10.45164251
New Zealand CO2 emissions 6.880817253
Norway CO2 emissions 7.692307692
Portugal CO2 emissions 4.554082572
Spain CO2 emissions 5.854300849
Sweden CO2 emissions 4.751718979
Switzerland CO2 emissions 5.037663677
Turkey CO2 emissions 3.849563484
United Kingdom CO2 emissions 7.000225962
United States CO2 emissions 16.96850775
Australia Education 44.61
Austria Education 21.16
Belgium Education 42.45
Canada Education 56.7
Denmark Education 38.58
Finland Education 39.37
France Education 43.01
Germany Education 27.67
Greece Education 32.52
Iceland Education 39.37
Ireland Education 47.19
Italy Education 20.98
Japan Education 58.7
Luxembourg Education 46.64
Netherlands Education 39.9
New Zealand Education 46.04
Norway Education 46.8
Portugal Education 26.92
Spain Education 39.15
Sweden Education 42.86
Switzerland Education 39.8
Turkey Education 18.87
United Kingdom Education 46.91
United States Education 43.13
Australia Employment to population ratio 72.3
Austria Employment to population ratio 72.5
Belgium Employment to population ratio 61.8
Canada Employment to population ratio 72.2
Denmark Employment to population ratio 72.6
Finland Employment to population ratio 69.5
France Employment to population ratio 63.9
Germany Employment to population ratio 72.8
Greece Employment to population ratio 51.3
Iceland Employment to population ratio 80.2
Ireland Employment to population ratio 58.8
Italy Employment to population ratio 57.6
Japan Employment to population ratio 70.6
Luxembourg Employment to population ratio 65.8
Netherlands Employment to population ratio 75.1
New Zealand Employment to population ratio 72.1
Norway Employment to population ratio 75.8
Portugal Employment to population ratio 61.8
Spain Employment to population ratio 56.2
Sweden Employment to population ratio 73.8
Switzerland Employment to population ratio 79.4
Turkey Employment to population ratio 48.9
United Kingdom Employment to population ratio 70.9
United States Employment to population ratio 67.1
Australia GDP per capita 44407.02
Austria GDP per capita 44141.3
Belgium GDP per capita 40838.06
Canada GDP per capita 42114.49
Denmark GDP per capita 42787.23
Finland GDP per capita 39130.04
France GDP per capita 36932.83
Germany GDP per capita 42682.16
Greece GDP per capita 25585.7
Iceland GDP per capita 39096.54
Ireland GDP per capita 43802.59
Italy GDP per capita 34140.73
Japan GDP per capita 35481.64
Luxembourg GDP per capita 89417.04
Netherlands GDP per capita 43347.62
New Zealand GDP per capita 32847.38
Norway GDP per capita 66135.07
Portugal GDP per capita 25801.55
Spain GDP per capita 32550.74
Sweden GDP per capita 42874.26
Switzerland GDP per capita 53641.07
Turkey GDP per capita 18314.72
United Kingdom GDP per capita 35670.57
United States GDP per capita 51688.63
Australia Health expenditures 8.9
Austria Health expenditures 10.8
Belgium Health expenditures 10.5
Canada Health expenditures 11.2
Denmark Health expenditures 10.9
Finland Health expenditures 9.1
France Health expenditures 11.6
Germany Health expenditures 11.3
Greece Health expenditures 9.1
Iceland Health expenditures 8.9
Ireland Health expenditures 8.9
Italy Health expenditures 9.2
Japan Health expenditures 9.6
Luxembourg Health expenditures 6.6
Netherlands Health expenditures 11.9
New Zealand Health expenditures 10.3
Norway Health expenditures 9.4
Portugal Health expenditures 10.2
Spain Health expenditures 9.3
Sweden Health expenditures 9.5
Switzerland Health expenditures 11.3
Turkey Health expenditures 6.1
United Kingdom Health expenditures 9.4
United States Health expenditures 17.7
Australia Income inequality 33.4
Austria Income inequality 26.7
Belgium Income inequality 26.2
Canada Income inequality 32
Denmark Income inequality 25.2
Finland Income inequality 26
France Income inequality 30.3
Germany Income inequality 28.6
Greece Income inequality 33.7
Iceland Income inequality 24.4
Ireland Income inequality 33.1
Italy Income inequality 31.9
Japan Income inequality 33.6
Luxembourg Income inequality 27
Netherlands Income inequality 28.8
New Zealand Income inequality 31.7
Norway Income inequality 24.9
Portugal Income inequality 34.4
Spain Income inequality 33.8
Sweden Income inequality 26.9
Switzerland Income inequality 29.8
Turkey Income inequality 41.1
United Kingdom Income inequality 34.1
United States Income inequality 38
Australia Infant mortality 3.8
Austria Infant mortality 3.6
Belgium Infant mortality 3.3
Canada Infant mortality 4.9
Denmark Infant mortality 3.6
Finland Infant mortality 2.4
France Infant mortality 3.5
Germany Infant mortality 3.6
Greece Infant mortality 3.4
Iceland Infant mortality 0.9
Ireland Infant mortality 3.5
Italy Infant mortality 3.4
Japan Infant mortality 2.3
Luxembourg Infant mortality 4.3
Netherlands Infant mortality 3.6
New Zealand Infant mortality 5.5
Norway Infant mortality 2.8
Portugal Infant mortality 3.1
Spain Infant mortality 3.2
Sweden Infant mortality 2.1
Switzerland Infant mortality 3.8
Turkey Infant mortality 7.7
United Kingdom Infant mortality 4.3
United States Infant mortality 6.1
Australia Poverty rate 14.5
Austria Poverty rate 8.1
Belgium Poverty rate 9.7
Canada Poverty rate 11.9
Denmark Poverty rate 6
Finland Poverty rate 7.3
France Poverty rate 7.9
Germany Poverty rate 8.8
Greece Poverty rate 14.3
Iceland Poverty rate 6.4
Ireland Poverty rate 9
Italy Poverty rate 13
Japan Poverty rate 16
Luxembourg Poverty rate 7.2
Netherlands Poverty rate 7.5
New Zealand Poverty rate 10.3
Norway Poverty rate 7.5
Portugal Poverty rate 11.4
Spain Poverty rate 15.4
Sweden Poverty rate 9.1
Switzerland Poverty rate 9.5
Turkey Poverty rate 19.3
United Kingdom Poverty rate 9.9
United States Poverty rate 17.4
Australia Public social spending 19.518
Austria Public social spending 28.293
Belgium Public social spending 30.728
Canada Public social spending 18.155
Denmark Public social spending 30.786
Finland Public social spending 30.534
France Public social spending 33.021
Germany Public social spending 26.183
Greece Public social spending 21.995
Iceland Public social spending 17.219
Ireland Public social spending 21.592
Italy Public social spending 28.44
Japan Public social spending 22.296
Luxembourg Public social spending 23.379
Netherlands Public social spending 24.299
New Zealand Public social spending 22.371
Norway Public social spending 22.88
Portugal Public social spending 26.383
Spain Public social spending 27.428
Sweden Public social spending 28.643
Switzerland Public social spending 19.097
Turkey Public social spending 12.8
United Kingdom Public social spending 23.773
United States Public social spending 20.033
Australia Tax revenue 26.507
Austria Tax revenue 43.175
Belgium Tax revenue 45.283
Canada Tax revenue 30.738
Denmark Tax revenue 47.957
Finland Tax revenue 44.083
France Tax revenue 45.285
Germany Tax revenue 37.593
Greece Tax revenue 33.755
Iceland Tax revenue 37.188
Ireland Tax revenue 28.283
Italy Tax revenue 44.42
Japan Tax revenue 28.627
Luxembourg Tax revenue 37.756
Netherlands Tax revenue 38.56
New Zealand Tax revenue 32.879
Norway Tax revenue 42.207
Portugal Tax revenue 32.484
Spain Tax revenue 32.866
Sweden Tax revenue 44.305
Switzerland Tax revenue 28.173
Turkey Tax revenue 27.659
United Kingdom Tax revenue 35.245
United States Tax revenue 24.347
Raw
index.html
<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body, h1, h2, h3, p {
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1em;
color: #333;
font-weight: 400;
}
#content {
margin: 5px;
padding: 20px;
width: 775px;
text-align: left;
border: 1px solid #ccc;
}
h1 {
line-height: 1em;
font-size: 1.75em;
font-weight: 900;
color: #000;
}
p {
margin: 5px 0px 0px 0px;
}
.domain {
fill: none;
stroke-width: 0;
}
#menu {
margin: 5px 0px 0px 0px;
display: block;
}
#unit {
margin: 10px 0px 5px 0px;
font-size: 0.9em;
}
select {
font-family: 'Source Sans Pro', sans-serif;
font-size: 0.9em;
color: #333;
font-weight: 400;
}
.bar {
fill: #2980B9;
}
.bar:hover {
fill: #2C3E50;
}
.axis line {
stroke: #eee;
stroke-width: 1;
opacity: 0.5;
shape-rendering: crispEdges;
}
.g-baseline line {
stroke: #333;
stroke-width: 2;
opacity: 1;
shape-rendering: crispEdges;
}
.x.axis .tick text, .y.axis .tick text {
fill: #333;
font-size: 0.9em;
}
</style>
</head>
<body>
<div id="content">
<h1>OECD Social Indicators, 2012</h1>
<select id="menu">
<option>Poverty rate</option>
<option>Infant mortality</option>
<option>Health expenditures</option>
<option>Education</option>
<option>Income inequality</option>
<option>Public social spending</option>
<option>Tax revenue</option>
<option>Employment to population ratio</option>
<option>GDP per capita</option>
<option>CO2 emissions</option>
</select>
<p id="unit">Percent of population earning less than 50% of median household income</p>
<div id="chart"></div>
<p>Source: OECD.</p>
</div>
<script src="chart.js"></script>
<script>
var map = d3.map(),
barchart;
d3.csv("data.csv", function(error, data) {
data = d3.nest()
.key(function(d){ return d.variable; })
.entries(data);
data.forEach(function(d){
d.value = +d.value;
d.values.sort(function(a, b){ return d3.ascending(+a.value, +b.value); });
map.set(d.key, d.values);
});
barchart = d3.svg.barchart()
.margin({top: 0, right: 10, bottom: 40, left: 40})
.tickFormat(d3.format(",.0f"))
.x(function(d){ return d.country; })
.y(function(d){ return d.value; });
d3.select("#chart")
.datum(map.get("Poverty rate"))
.call(barchart);
});
d3.select("#menu").on("change", function() {
d3.select("#chart")
.datum(map.get(this.value))
.call(barchart);
var unit;
var selectedVariable = document.getElementById("menu").value;
switch (selectedVariable)
{
case "CO2 emissions": unit = "Metric tons of CO<sub>2</sub> per capita"; break;
case "Education": unit = "Percent of 25&ndash;34 year-olds with a post-secondary degree"; break;
case "Employment to population ratio": unit = "Percent of working age population (15&ndash;64)"; break;
case "GDP per capita": unit = "$US PPP adjusted"; break;
case "Health expenditures": unit = "Percent of GDP"; break;
case "Income inequality": unit = "Gini coefficient (0 = perfect equality, 100 = perfect inequality)"; break;
case "Infant mortality": unit = "Deaths per 1,000 live births"; break;
case "Poverty rate": unit = "Percent of population earning less than 50% of median household income"; break;
case "Public social spending": unit = "Percent of GDP"; break;
case "Tax revenue": unit = "Percent of GDP"; break;
}
d3.select("#unit")
.html(unit);
});
d3.select(self.frameElement).style("height", "560px");
</script>
</body>
</html>
@subasish
Copy link

I tried to replicate it but failed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment