D3.js small multiple bar charts with tooltips. Follows Mike Bostocks's small multiples example. Tooltip code from here.
forked from officeofjane's block: Small multiple bar charts with tooltips
D3.js small multiple bar charts with tooltips. Follows Mike Bostocks's small multiples example. Tooltip code from here.
forked from officeofjane's block: Small multiple bar charts with tooltips
country | year | percent | |
---|---|---|---|
China | 2002 | 0 | |
China | 2005 | 0.88 | |
China | 2006 | 0.94 | |
China | 2007 | 0.93 | |
China | 2008 | 0.95 | |
China | 2009 | 0.95 | |
China | 2010 | 0.97 | |
China | 2011 | 0.95 | |
China | 2012 | 0.94 | |
China | 2013 | 0.95 | |
Kenya | 2002 | 0 | |
Kenya | 2005 | 0 | |
Kenya | 2006 | 0 | |
Kenya | 2007 | 0.81 | |
Kenya | 2008 | 0 | |
Kenya | 2009 | 0.73 | |
Kenya | 2010 | 0.86 | |
Kenya | 2011 | 0.71 | |
Kenya | 2012 | 0 | |
Kenya | 2013 | 0.78 | |
Indonesia | 2002 | 0 | |
Indonesia | 2005 | 0.73 | |
Indonesia | 2006 | 0.62 | |
Indonesia | 2007 | 0.65 | |
Indonesia | 2008 | 0.58 | |
Indonesia | 2009 | 0.59 | |
Indonesia | 2010 | 0.58 | |
Indonesia | 2011 | 0.67 | |
Indonesia | 2012 | 0 | |
Indonesia | 2013 | 0.7 | |
Brazil | 2002 | 0 | |
Brazil | 2005 | 0 | |
Brazil | 2006 | 0 | |
Brazil | 2007 | 0 | |
Brazil | 2008 | 0 | |
Brazil | 2009 | 0 | |
Brazil | 2010 | 0.52 | |
Brazil | 2011 | 0.49 | |
Brazil | 2012 | 0.5 | |
Brazil | 2013 | 0.65 | |
Russia | 2002 | 0.71 | |
Russia | 2005 | 0.6 | |
Russia | 2006 | 0.63 | |
Russia | 2007 | 0.6 | |
Russia | 2008 | 0.6 | |
Russia | 2009 | 0.58 | |
Russia | 2010 | 0.6 | |
Russia | 2011 | 0.63 | |
Russia | 2012 | 0.62 | |
Russia | 2013 | 0.62 | |
Australia | 2002 | 0 | |
Australia | 2005 | 0 | |
Australia | 2006 | 0 | |
Australia | 2007 | 0 | |
Australia | 2008 | 0.52 | |
Australia | 2009 | 0 | |
Australia | 2010 | 0 | |
Australia | 2011 | 0 | |
Australia | 2012 | 0 | |
Australia | 2013 | 0.58 | |
Lebanon | 2002 | 0 | |
Lebanon | 2005 | 0.66 | |
Lebanon | 2006 | 0 | |
Lebanon | 2007 | 0.46 | |
Lebanon | 2008 | 0.5 | |
Lebanon | 2009 | 0.53 | |
Lebanon | 2010 | 0.56 | |
Lebanon | 2011 | 0.59 | |
Lebanon | 2012 | 0.59 | |
Lebanon | 2013 | 0.56 | |
Argentina | 2002 | 0 | |
Argentina | 2005 | 0 | |
Argentina | 2006 | 0 | |
Argentina | 2007 | 0.32 | |
Argentina | 2008 | 0.34 | |
Argentina | 2009 | 0.42 | |
Argentina | 2010 | 0.45 | |
Argentina | 2011 | 0 | |
Argentina | 2012 | 0 | |
Argentina | 2013 | 0.54 | |
Britain | 2002 | 0 | |
Britain | 2005 | 0.65 | |
Britain | 2006 | 0.65 | |
Britain | 2007 | 0.49 | |
Britain | 2008 | 0.47 | |
Britain | 2009 | 0.52 | |
Britain | 2010 | 0.46 | |
Britain | 2011 | 0.59 | |
Britain | 2012 | 0.49 | |
Britain | 2013 | 0.48 | |
South Africa | 2002 | 0 | |
South Africa | 2005 | 0 | |
South Africa | 2006 | 0 | |
South Africa | 2007 | 0 | |
South Africa | 2008 | 0.37 | |
South Africa | 2009 | 0 | |
South Africa | 2010 | 0 | |
South Africa | 2011 | 0 | |
South Africa | 2012 | 0 | |
South Africa | 2013 | 0.48 | |
Spain | 2002 | 0 | |
Spain | 2005 | 0.57 | |
Spain | 2006 | 0.45 | |
Spain | 2007 | 0.39 | |
Spain | 2008 | 0.31 | |
Spain | 2009 | 0.4 | |
Spain | 2010 | 0.47 | |
Spain | 2011 | 0.55 | |
Spain | 2012 | 0.49 | |
Spain | 2013 | 0.48 | |
Palestinian ter. | 2002 | 0 | |
Palestinian ter. | 2005 | 0 | |
Palestinian ter. | 2006 | 0 | |
Palestinian ter. | 2007 | 0.46 | |
Palestinian ter. | 2008 | 0 | |
Palestinian ter. | 2009 | 0.43 | |
Palestinian ter. | 2010 | 0 | |
Palestinian ter. | 2011 | 0.62 | |
Palestinian ter. | 2012 | 0 | |
Palestinian ter. | 2013 | 0.47 | |
South Korea | 2002 | 0.66 | |
South Korea | 2005 | 0 | |
South Korea | 2006 | 0 | |
South Korea | 2007 | 0.52 | |
South Korea | 2008 | 0.48 | |
South Korea | 2009 | 0.41 | |
South Korea | 2010 | 0.38 | |
South Korea | 2011 | 0 | |
South Korea | 2012 | 0 | |
South Korea | 2013 | 0.46 | |
Egypt | 2002 | 0 | |
Egypt | 2005 | 0 | |
Egypt | 2006 | 0.63 | |
Egypt | 2007 | 0.65 | |
Egypt | 2008 | 0.59 | |
Egypt | 2009 | 0.52 | |
Egypt | 2010 | 0.52 | |
Egypt | 2011 | 0.57 | |
Egypt | 2012 | 0.52 | |
Egypt | 2013 | 0.45 | |
Mexico | 2002 | 0 | |
Mexico | 2005 | 0 | |
Mexico | 2006 | 0 | |
Mexico | 2007 | 0.43 | |
Mexico | 2008 | 0.38 | |
Mexico | 2009 | 0.39 | |
Mexico | 2010 | 0.39 | |
Mexico | 2011 | 0.39 | |
Mexico | 2012 | 0.4 | |
Mexico | 2013 | 0.45 | |
Canada | 2002 | 0 | |
Canada | 2005 | 0.58 | |
Canada | 2006 | 0 | |
Canada | 2007 | 0.52 | |
Canada | 2008 | 0 | |
Canada | 2009 | 0.53 | |
Canada | 2010 | 0 | |
Canada | 2011 | 0 | |
Canada | 2012 | 0 | |
Canada | 2013 | 0.43 | |
Poland | 2002 | 0 | |
Poland | 2005 | 0.37 | |
Poland | 2006 | 0 | |
Poland | 2007 | 0.39 | |
Poland | 2008 | 0.33 | |
Poland | 2009 | 0.43 | |
Poland | 2010 | 0.46 | |
Poland | 2011 | 0.51 | |
Poland | 2012 | 0.5 | |
Poland | 2013 | 0.43 | |
France | 2002 | 0 | |
France | 2005 | 0.58 | |
France | 2006 | 0.6 | |
France | 2007 | 0.47 | |
France | 2008 | 0.28 | |
France | 2009 | 0.41 | |
France | 2010 | 0.41 | |
France | 2011 | 0.51 | |
France | 2012 | 0.4 | |
France | 2013 | 0.42 | |
Jordan | 2002 | 0 | |
Jordan | 2005 | 0.43 | |
Jordan | 2006 | 0.49 | |
Jordan | 2007 | 0.46 | |
Jordan | 2008 | 0.44 | |
Jordan | 2009 | 0.5 | |
Jordan | 2010 | 0.53 | |
Jordan | 2011 | 0.44 | |
Jordan | 2012 | 0.47 | |
Jordan | 2013 | 0.4 | |
Israel | 2002 | 0 | |
Israel | 2005 | 0 | |
Israel | 2006 | 0 | |
Israel | 2007 | 0.45 | |
Israel | 2008 | 0 | |
Israel | 2009 | 0.56 | |
Israel | 2010 | 0 | |
Israel | 2011 | 0.49 | |
Israel | 2012 | 0 | |
Israel | 2013 | 0.38 | |
United States | 2002 | 0 | |
United States | 2005 | 0.43 | |
United States | 2006 | 0.52 | |
United States | 2007 | 0.42 | |
United States | 2008 | 0.39 | |
United States | 2009 | 0.5 | |
United States | 2010 | 0.49 | |
United States | 2011 | 0.51 | |
United States | 2012 | 0.4 | |
United States | 2013 | 0.37 | |
Czech Republic | 2002 | 0 | |
Czech Republic | 2005 | 0 | |
Czech Republic | 2006 | 0 | |
Czech Republic | 2007 | 0.35 | |
Czech Republic | 2008 | 0 | |
Czech Republic | 2009 | 0 | |
Czech Republic | 2010 | 0 | |
Czech Republic | 2011 | 0 | |
Czech Republic | 2012 | 0.33 | |
Czech Republic | 2013 | 0.34 | |
Germany | 2002 | 0 | |
Germany | 2005 | 0.46 | |
Germany | 2006 | 0.56 | |
Germany | 2007 | 0.34 | |
Germany | 2008 | 0.26 | |
Germany | 2009 | 0.29 | |
Germany | 2010 | 0.3 | |
Germany | 2011 | 0.34 | |
Germany | 2012 | 0.29 | |
Germany | 2013 | 0.28 | |
Italy | 2002 | 0 | |
Italy | 2005 | 0 | |
Italy | 2006 | 0 | |
Italy | 2007 | 0.27 | |
Italy | 2008 | 0 | |
Italy | 2009 | 0 | |
Italy | 2010 | 0 | |
Italy | 2011 | 0 | |
Italy | 2012 | 0.3 | |
Italy | 2013 | 0.28 | |
Turkey | 2002 | 0 | |
Turkey | 2005 | 0.4 | |
Turkey | 2006 | 0.33 | |
Turkey | 2007 | 0.25 | |
Turkey | 2008 | 0.24 | |
Turkey | 2009 | 0.16 | |
Turkey | 2010 | 0.2 | |
Turkey | 2011 | 0.18 | |
Turkey | 2012 | 0.22 | |
Turkey | 2013 | 0.27 | |
Japan | 2002 | 0.55 | |
Japan | 2005 | 0 | |
Japan | 2006 | 0.27 | |
Japan | 2007 | 0.29 | |
Japan | 2008 | 0.14 | |
Japan | 2009 | 0.26 | |
Japan | 2010 | 0.26 | |
Japan | 2011 | 0.34 | |
Japan | 2012 | 0.15 | |
Japan | 2013 | 0.05 | |
India | 2002 | 0 | |
India | 2005 | 0 | |
India | 2006 | 0 | |
India | 2007 | 0 | |
India | 2008 | 0 | |
India | 2009 | 0 | |
India | 2010 | 0 | |
India | 2011 | 0.25 | |
India | 2012 | 0.23 | |
India | 2013 | 0 |
<!DOCTYPE html> | |
<html> | |
<meta charset="utf-8"> | |
<head> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.min.js"></script> | |
<style type="text/css"> | |
body { | |
font: 11px sans-serif; | |
margin: 10px; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.bar:hover { | |
fill: #bcbcbc ; | |
} | |
.x.axis path { | |
display: none; | |
} | |
.d3-tip { | |
line-height: 1; | |
font-weight: bold; | |
padding: 12px; | |
background: rgba(0, 0, 0, 0.8); | |
color: #efefef; | |
border-radius: 2px; | |
} | |
/* Creates a small triangle extender for the tooltip */ | |
.d3-tip:after { | |
box-sizing: border-box; | |
display: inline; | |
font-size: 10px; | |
width: 100%; | |
line-height: 1; | |
color: rgba(0, 0, 0, 0.8); | |
content: "\25BC"; | |
position: absolute; | |
text-align: center; | |
} | |
/* Style northward tooltips differently */ | |
.d3-tip.n:after { | |
margin: -1px 0 0 0; | |
top: 100%; | |
left: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="vis"></div> | |
<script type="text/javascript"> | |
var margin = {top: 45, right: 100, bottom: 20, left: 20}, | |
width = 450 - margin.left - margin.right, | |
height = 90 - margin.top - margin.bottom; | |
var formatPercent = d3.format(".0%"); | |
var color = d3.scale.linear() | |
.range(["#ca0020","#f4a582","#f7f7f7","#92c5de","#0571b0"]) | |
.domain([0,0.2,0.4,0.6,0.8]); | |
var x = d3.scale.ordinal() | |
.rangeRoundBands([0, width], .1); | |
// Scales. Note the inverted domain fo y-scale: bigger is up! | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left") | |
.tickFormat(formatPercent); | |
var tip = d3.tip() | |
.attr('class', 'd3-tip') | |
.offset([-10, 0]) | |
.html(function(d) { | |
return "<strong>" + d.country + "\t" + d.year + "</strong><br/><span style='color:#fff'>" + d.percent*100 + "%</span>"; | |
}) | |
// csv loaded asynchronously | |
d3.tsv("data.tsv", type, function(data) { | |
// Data is nested by country | |
var countries = d3.nest() | |
.key(function(d) { return d.country; }) | |
.entries(data); | |
// Parse dates and numbers. We assume values are sorted by date. | |
// Also compute the maximum price per symbol, needed for the y-domain. | |
// symbols.forEach(function(s) { | |
// s.values.forEach(function(d) { d.date = parse(d.date); d.price = +d.price; }); | |
// s.maxPrice = d3.max(s.values, function(d) { return d.price; }); | |
// }); | |
// Compute the minimum and maximum year and percent across symbols. | |
x.domain(data.map(function(d) { return d.year; })); | |
y.domain([0, d3.max(countries, function(s) { return s.values[0].percent; })]); | |
// Add an SVG element for each country, with the desired dimensions and margin. | |
var svg = d3.select("#vis").selectAll("svg") | |
.data(countries) | |
.enter() | |
.append("svg:svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
// Hide y axis | |
// .attr("class", "y axis") | |
// .call(yAxis) | |
.append("text") | |
.attr("x", width + 10) | |
.attr("y", height/3) | |
.attr("dy", ".71em") | |
.attr("text-anchor", "start") | |
.attr("font-size", "1.1em") | |
.text(function(d) { return d.key}); | |
// Accessing nested data: https://groups.google.com/forum/#!topic/d3-js/kummm9mS4EA | |
// data(function(d) {return d.values;}) | |
// this will dereference the values for nested data for each group | |
svg.selectAll(".bar") | |
.data(function(d) {return d.values;}) | |
.enter() | |
.append("rect") | |
.attr("class", "bar") | |
.attr("x", function(d) { return x(d.year); }) | |
.attr("width", x.rangeBand()) | |
.attr("y", function(d) { return y(d.percent); }) | |
.attr("height", function(d) { return height - y(d.percent); }) | |
.attr("fill", function(d) {return color(d.percent)}) | |
.on('mouseover', tip.show) | |
.on('mouseout', tip.hide) | |
svg.call(tip); | |
}); | |
function type(d) { | |
d.percent = +d.percent; | |
return d; | |
} | |
</script> | |
</body> | |
</html> |