Skip to content

Instantly share code, notes, and snippets.

@asuozzo

asuozzo/index.html

Last active November 23, 2015 16:43
Show Gist options
  • Save asuozzo/6a5cef7044ca6cc1202a to your computer and use it in GitHub Desktop.
Save asuozzo/6a5cef7044ca6cc1202a to your computer and use it in GitHub Desktop.
Download ZIP
US Regional Milk Production
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>U.S. Regional Milk Production, 1970-2014</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
margin: 0;
background-color: lightGray;
font-family: Helvetica, Arial, sans-serif;
}
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 50px;
background-color: white;
box-shadow: 3px 3px 5px 6px #ccc;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 15px 0 10px 0;
}
svg {
background-color: white;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.axis path,
.axis line {
opacity: 0;
}
.axis text {
font-weight: bold;
}
#tooltip {
position:absolute;
right:0;
left:0;
margin: 0 auto;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
</style>
</head>
<body>
<div id="container">
<h1>U.S. Regional Milk Production, 1970-2014</h1>
<p>Annual milk production, in millions of pounds. <strong>Source:</strong> <a href="http://www.ers.usda.gov/topics/animal-products/dairy.aspx">USDA Economic Research Service</a></p>
<div id="tooltip" class="hidden">
<p><strong>Region</strong></p>
<p><span id="value">U.S.</span></p>
</div>
</div>
<script type="text/javascript">
var stack = d3.layout.stack()
.values(function(d){
return d.milkprod;
});
var w = 800;
var h = 600;
var padding = [ 20, 10, 30, 50 ]; //Top, right, bottom, left
var dateFormat = d3.time.format("%Y");
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
var area = d3.svg.area()
.x(function(d){
return xScale(dateFormat.parse(d.x));
})
.y0(function(d){
return yScale(d.y0);
})
.y1(function(d){
return yScale(d.y0 + d.y);
})
var color = d3.scale.category20();
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h)
d3.csv("regionalmilkproduction.csv", function(data){
var years = ["1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'];
var dataset = [];
for (var i=0; i< data.length; i++){
dataset[i] = {
region: data[i].Region,
milkprod: []
};
for (var j = 0; j<years.length;j++){
var amount = null;
if (data[i][years[j]]) {
amount = +data[i][years[j]];
}
dataset[i].milkprod.push({
x: years[j],
y: amount
});
}
}
stack(dataset);
xScale.domain([
d3.min(years, function(d){
return dateFormat.parse(d);
}),
d3.max(years, function(d){
return dateFormat.parse(d)
})
]);
var totals = [];
for (i=0; i< years.length; i++) {
totals[i] = 0;
for (j = 0; j < dataset.length; j++){
totals[i] += dataset[j].milkprod[i].y;
}
}
yScale.domain([ d3.max(totals), 0 ]);
var paths = svg.selectAll("path")
.data(dataset)
.enter()
.append("path")
.attr("class", "area")
.attr("d", function(d){
return area(d.milkprod);
})
.attr("stroke", "none")
.attr("fill", function(d,i){
return color(i);
});
paths.on("mouseover", function(d) {
var xPosition = parseFloat(d3.select(this).attr("x"));
var yPosition = parseFloat(d3.select(this).attr("y"));
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(d.region);
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
d3.select("#tooltip").classed("hidden", true);
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
regionalmilkproduction.csv
Region 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014
Northeast 24224 24368 24021 22785 23140 23555 24264 24633 24842 25238 26139 26798 27340 28319 27596 28681 28830 28221 28000 27182 27223 27509 28402 28051 27864 28413 28254 28530 29051 29494 29365 28787 29198 28146 27370 28270 28308 28163 28431 28216 28709 28604 28923 29309 29808
Lake States 32673 33262 33772 32349 32445 32257 34155 35285 35134 35825 36885 38164 38824 40241 39182 41103 40518 40468 40641 39159 39451 38801 39137 37972 37299 37916 37246 36988 37482 38004 38457 36881 36652 36899 36517 37811 38882 40361 41017 42226 43470 43426 45288 45874 46531
Corn Belt 17334 17308 17290 16441 16017 15648 16033 16166 15531 15403 15880 16204 16450 16961 16048 16877 16838 16752 16822 16591 16775 16550 16486 16283 15897 15950 15000 14862 14899 14693 15166 14616 14934 15172 15263 15767 16086 16224 16135 16306 16313 16222 16896 17064 17196
Northern Plains 5949 5852 5824 5733 5502 5296 5454 5392 5084 5013 5253 5549 5478 5658 5127 5489 5410 5406 5442 5370 5379 5219 5099 4742 4693 4694 4528 4422 4457 4652 4955 4790 5079 5089 5077 5258 5438 5347 5712 5965 5933 5976 6233 6461 6739
Appalachian 8202 8216 8389 7900 7858 7953 8292 8434 8109 8163 8415 8600 8784 8810 8243 8689 8769 8468 8333 8106 8073 8026 7980 7785 7488 7384 6855 6852 6581 6432 6454 6283 6200 5661 5508 5459 5267 5118 4957 4883 4744 4680 4746 4664 4633
Southeast 4151 4308 4440 4293 4288 4375 4533 4503 4424 4464 4546 4650 4668 4654 4249 4461 4486 4358 4586 4739 4926 4881 5016 5026 5129 4809 4702 4779 4534 4592 4614 4511 4419 4175 4201 4183 4055 4022 3923 3969 3970 4141 4277 4332 4562
Delta States 2823 2838 2853 2718 2672 2637 2660 2672 2628 2563 2569 2648 2703 2682 2548 2635 2483 2415 2513 2511 2506 2455 2503 2449 2409 2344 2171 2063 1870 1783 1724 1561 1450 1296 1181 1114 998 893 796 686 611 579 554 497 488
Southern Plains 4315 4499 4575 4420 4517 4268 4411 4492 4523 4447 4735 4815 4945 5168 4978 5151 5235 5447 6054 6402 6784 6641 6821 7167 7512 7406 7365 7017 6841 6869 7057 6432 6607 6942 7272 7680 8371 8528 9477 9842 9787 10505 10455 10389 11007
Mountain 4662 4817 4995 5018 5078 5081 5179 5342 5422 5589 6131 6694 7104 7354 7121 7812 7913 7821 8376 8630 9486 9935 10644 11412 13008 13915 15007 15943 16874 18293 19993 20902 22631 23651 24196 25850 27774 28507 30352 29761 30621 31978 32688 32501 33573
Pacific 12674 13098 13866 13834 14069 14328 15199 15735 15764 16646 17853 18648 19209 19741 20260 22114 22643 23353 24267 25203 27118 27679 28797 29750 32303 32462 32878 34635 34672 37778 39607 40568 42893 43318 44247 45540 46603 48492 49179 47348 48718 50144 50582 50139 51509
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment