Skip to content

Instantly share code, notes, and snippets.

@luluwuluying
Last active March 21, 2016 21:04
Show Gist options
  • Save luluwuluying/945cb0ac8e9f77b136d9 to your computer and use it in GitHub Desktop.
Save luluwuluying/945cb0ac8e9f77b136d9 to your computer and use it in GitHub Desktop.
Week9: Stacked Transition
<!DOCTYPE html>
<!-- mod of Mike Bostock's block http://bl.ocks.org/mbostock/3020685 -->
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
body {
font: 12px font-family: 'Montserrat', sans-serif;;
padding: 50px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.tooltip {
position: absolute;
z-index: 10;
}
.tooltip p {
background-color:pink;
border: none;
padding: 2px;
}
button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 4px;
}
.selected {
background: #ccc;
}
.layer {
fill: white;
}
.layer.unfocused{
stroke-opacity: 40%;
}
.layer.focused {
stroke-width: 2px;
stroke-opacity: 100%;
font-size:16px;
font-weight: bold;
opacity: 1;
}
</style>
<body>
<h2>Alcohol consumptionTotal, Litres/capita (aged 15 and over), 2000 – 2011</h2>
<p> Alcohol use is associated with numerous harmful health and social consequences, including an increased risk of a range of cancers, stroke and liver cirrhosis. Alcohol also contributes to death and disability through accidents and injuries, assault, violence, homicide and suicide.<a href="https://data.oecd.org/healthrisk/alcohol-consumption.htm">OECD</a></p>
<button id="stream">Stream It!</button><button id="stacked" class="selected">Stack It!</button>
<div id="chart"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>
var originaldata;
var formatDate = d3.time.format("%Y");
var years = ["1999", "2012"];
var fullheight = 500, fullwidth = 960;
var margin = {top: 20, right: 30, bottom: 30, left: 60},
width = fullwidth - margin.left - margin.right,
height = fullheight - margin.top - margin.bottom;
var xScale = d3.time.scale()
.range([ 0, width ])
.domain(
d3.extent(years, function(d) {
return formatDate.parse(d);
}));
var yScale = d3.scale.linear()
.range([height, 0]);
var colorScale = d3.scale.category20b();
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10)
.tickFormat(function(d) {
return formatDate(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var stack = d3.layout.stack()
.offset("zero") // try "silhouette" next, that's a streamgraph!
//.order("inside-out") // try this and see what you think
.values(function(d) { return d.values; })
.x(function(d) { return formatDate.parse(d.Year);})
.y(function(d) { return +d.Amount; });
// exactly the same except for offset:
var stream = d3.layout.stack()
.offset("silhouette") // try "silhouette" next, that's a streamgraph!
//.order("inside-out") // try this and see what you think
.values(function(d) { return d.values; })
.x(function(d) { return formatDate.parse(d.Year);})
.y(function(d) { return +d.Amount; });
// what's another way we can DRY this out? how about just updating the "offset" when we do the redraw below...
var area = d3.svg.area()
.x(function(d) { return xScale(formatDate.parse(d.Year)); })
.y0(function(d) { return yScale(d.y0); })
.y1(function(d) { return yScale(d.y0 + d.y); });
var svg = d3.select("#chart").append("svg")
.attr("width", fullwidth)
.attr("height", fullheight)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tooltip = d3.select("body").append("div").attr("class", "tooltip");
d3.csv("jiu.csv", setup);
function setup(error, data) {
if (error) { console.log(error) };
originaldata = data; // assign to a global so i can use it in other function
var dataset = d3.nest()
.key(function(d) {
return d.Country;
})
.sortKeys(d3.descending) // alphabetic order from top layer
.sortValues(function (a, b) { return formatDate.parse(a.Year) - formatDate.parse(b.Year)})
.entries(data);
console.log(dataset);
// set up the UI function:
d3.selectAll("button").on("click", function() {
var method = d3.select(this).attr("id"); // this is stream or stacked
d3.selectAll("button").classed("selected", false);
d3.select(this).classed("selected", true);
redraw(dataset, method);
});
// default first view: create the axes, so you transition them in the redraw.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
redraw(dataset, "stacked"); // method is either stacked or stream
}
function redraw(dataset, method) {
var layers;
if (method == "stacked") {
layers = stack(dataset); // this operation also modifies the dataset
} else {
layers = stream(dataset); // this operation also modifies the dataset
}
console.log("layers", layers); // it adds a y and y0 to the data values.
// reset these AFTER doing the layer stacking.
xScale.domain(d3.extent(originaldata, function(d) { return formatDate.parse(d.Year); }));
yScale.domain([0, d3.max(originaldata, function(d) { return d.y0 + d.y; })]);
var layers = svg.selectAll(".layer")
.data(layers, function(d) {return d.key;});
layers.enter().append("path")
.attr("class", "layer")
.append("title")
.text(function(d) {
// return d.key; // country is the key
});
layers.transition().duration(1000)
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return colorScale(i); });
layers.exit().remove();
// transition your axes.
d3.select(".x.axis").transition().call(xAxis);
d3.select(".y.axis").transition().call(yAxis); // there is no visible change actually
d3.selectAll(".layer")
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
// this sets it to invisible!
}
function mouseover(d) {
d3.selectAll(this).classed("unfocused", false).classed("focused", true);
tooltip
.style("display", null)
.html("<p>Country: <span style='color:white'>" + d.key +"</span>"+ "</p>");
}
function mousemove(d) {
tooltip
.style("top", (d3.event.pageY - 10) + "px" )
.style("left", (d3.event.pageX + 10) + "px");
}
function mouseout(d) {
d3.selectAll(this).classed("unfocused", false).classed("focused", false);
tooltip.style("display", "none");
}
</script>
Country ��_VAR" Variable UNIT Measure COU Year Amount
Austria INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population AUT 2000 6856.2
Austria INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population AUT 2001 6996.1
Austria INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population AUT 2002 7013.5
Austria INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population AUT 2003 7006.6
Austria INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population AUT 2004 6837.3
Austria INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population AUT 2005 6472
Austria INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population AUT 2006 6280.9
Austria INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population AUT 2007 6414.7
Austria INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population AUT 2008 6071.1
Austria INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population AUT 2009 5893.2
Austria INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population AUT 2010 5894.88
Austria INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population AUT 2011 5367.4
France INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population FRA 2000 2735
France INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population FRA 2001 2579
France INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population FRA 2002 2293
France INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population FRA 2003 1916
France INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population FRA 2004 1727
France INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population FRA 2005 1768
France INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population FRA 2006 1666
France INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population FRA 2007 1668
France INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population FRA 2008 1507
France INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population FRA 2009 1450
France INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population FRA 2010 1342
France INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population FRA 2011 1285
Iceland INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ISL 2000 5292.5
Iceland INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ISL 2001 4483.4
Iceland INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ISL 2002 5164.2
Iceland INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ISL 2003 4220.9
Iceland INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ISL 2004 3951
Iceland INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ISL 2005 3423.9
Iceland INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ISL 2006 4360.3
Iceland INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ISL 2007 5324.4
Iceland INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ISL 2008 4925.6
Iceland INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ISL 2009 4015.7
Iceland INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ISL 2010 3965.3
Iceland INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ISL 2011 3814.9
Italy INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ITA 2000 6322
Italy INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ITA 2001 6551
Italy INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ITA 2002 6622
Italy INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ITA 2003 6188
Italy INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ITA 2004 5899
Italy INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ITA 2005 5714
Italy INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ITA 2006 5649
Italy INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ITA 2007 5488
Italy INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ITA 2008 5194
Italy INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ITA 2009 5105
Italy INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ITA 2010 5005
Italy INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population ITA 2011 4809
Japan INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population JPN 2000 9105
Japan INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population JPN 2001 9278
Japan INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population JPN 2002 9166
Japan INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population JPN 2003 9259
Japan INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population JPN 2004 9270
Japan INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population JPN 2005 9056
Japan INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population JPN 2006 8598
Japan INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population JPN 2007 8098
Japan INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population JPN 2008 7406
Japan INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population JPN 2009 7146
Japan INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population JPN 2010 6999
Japan INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population JPN 2011 6687
Korea INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population KOR 2000 9083
Korea INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population KOR 2001 8162
Korea INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population KOR 2002 7311
Korea INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population KOR 2003 7867
Korea INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population KOR 2004 7223
Korea INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population KOR 2005 7109
Korea INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population KOR 2006 7034
Korea INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population KOR 2007 6912
Korea INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population KOR 2008 6925
Korea INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population KOR 2009 7358
Korea INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population KOR 2010 7133
Korea INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population KOR 2011 6858
Mexico INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population MEX 2000 1535.6
Mexico INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population MEX 2001 1619.5
Mexico INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population MEX 2002 1645.1
Mexico INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population MEX 2003 1628.5
Mexico INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population MEX 2004 1507.4
Mexico INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population MEX 2005 1670.5
Mexico INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population MEX 2006 1682.6
Mexico INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population MEX 2007 1756
Mexico INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population MEX 2008 1688.6
Mexico INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population MEX 2009 1644.2
Mexico INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population MEX 2010 1511.1
Mexico INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population MEX 2011 1398.5
New Zealand INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NZL 2000 10133
New Zealand INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NZL 2001 9047.8
New Zealand INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NZL 2002 10087.5
New Zealand INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NZL 2003 10403.3
New Zealand INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NZL 2004 10164.8
New Zealand INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NZL 2005 10669.6
New Zealand INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NZL 2006 10910.1
New Zealand INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NZL 2007 11213.1
New Zealand INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NZL 2008 10266
New Zealand INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NZL 2009 9099.3
New Zealand INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NZL 2010 9507.8
New Zealand INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NZL 2011 8101.2
Norway INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NOR 2000 2597
Norway INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NOR 2001 2553
Norway INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NOR 2002 2731
Norway INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NOR 2003 2596
Norway INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NOR 2004 2640
Norway INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NOR 2005 2426
Norway INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NOR 2006 2387
Norway INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NOR 2007 2567
Norway INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NOR 2008 2279
Norway INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NOR 2009 2039
Norway INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NOR 2010 1867
Norway INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population NOR 2011 1688
Turkey INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population TUR 2000 2028.3
Turkey INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population TUR 2001 1695.7
Turkey INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population TUR 2002 1672
Turkey INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population TUR 2003 1683.2
Turkey INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population TUR 2004 1900.4
Turkey INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population TUR 2005 2138.2
Turkey INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population TUR 2006 2317
Turkey INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population TUR 2007 2678.4
Turkey INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population TUR 2008 2579.4
Turkey INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population TUR 2009 2775
Turkey INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population TUR 2010 2869
Turkey INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population TUR 2011 3186
United Kingdom INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population GBR 2000 5628
United Kingdom INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population GBR 2001 5462
United Kingdom INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population GBR 2002 5242
United Kingdom INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population GBR 2003 4992
United Kingdom INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population GBR 2004 4796
United Kingdom INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population GBR 2005 4579
United Kingdom INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population GBR 2006 4362
United Kingdom INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population GBR 2007 4167
United Kingdom INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population GBR 2008 3873
United Kingdom INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population GBR 2009 3715
United Kingdom INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population GBR 2010 3495
United Kingdom INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population GBR 2011 3391
United States INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population USA 2000 11293
United States INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population USA 2001 10634
United States INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population USA 2002 10161
United States INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population USA 2003 9941
United States INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population USA 2004 9507
United States INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population USA 2005 9118
United States INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population USA 2006 8617
United States INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population USA 2007 8257
United States INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population USA 2008 7703
United States INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population USA 2009 7216
United States INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population USA 2010 7241
United States INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population USA 2011 7105
Chile INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population CHL 2000 3030.2
Chile INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population CHL 2001 2912
Chile INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population CHL 2002 2802.2
Chile INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population CHL 2003 2847.8
Chile INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population CHL 2004 2890
Chile INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population CHL 2005 2937.9
Chile INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population CHL 2006 2861.7
Chile INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population CHL 2007 3254
Chile INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population CHL 2008 3298
Chile INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population CHL 2009 3082
Chile INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population CHL 2010 3098.3
Chile INJRACIR Injuries in road traffic accidents BLESSETX Injured per million population CHL 2011 3143
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment