Skip to content

Instantly share code, notes, and snippets.

@officeofjane

officeofjane/README.md

Last active December 17, 2017 18:04
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save officeofjane/7315455 to your computer and use it in GitHub Desktop.
Save officeofjane/7315455 to your computer and use it in GitHub Desktop.
Download ZIP
Small multiple bar charts with tooltips
Raw
README.md
Raw
data.tsv
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
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment