Create a gist now

Instantly share code, notes, and snippets.

@cavedave /index.html
Last active Dec 28, 2015

What would you like to do?
US cereals grown over recent history. Data from http://www.fas.usda.gov/psdonline/psdDownload.aspx Graph uses d3.js to make a stacked area graph
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.browser text {
text-anchor: end;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 30, right: 50, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse,
formatPercent = d3.format(".0%");
var formatDate = d3.time.format("%Y");
var x = d3.scale.linear() //time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category20();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var stack = d3.layout.stack()
.values(function(d) { return d.values; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("uscereal.tsv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
//d.date = +d.date;
d.date = formatDate(parseDate(d.date));
});
var browsers = stack(color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, y: d[name] / 100};
})
};
}));
x.domain(d3.extent(data, function(d) { return d.date; }));
var browser = svg.selectAll(".browser")
.data(browsers)
.enter().append("g")
.attr("class", "browser");
browser.append("path")
.attr("class", "area")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d) { return color(d.name); });
browser.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.y0 + d.value.y / 2.3) + ")"; })
.attr("x", 35)//-6
.attr("dy", "1.00em")//.35em
.text(function(d) { return d.name; });
browser.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2.5))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Cereal % per year grown in US");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
date corn wheat oats sorghum barley rice rye
1960 54.96776409 20.42549185 9.272531904 8.722527473 5.173254165 0.972616094 0.465814428
1961 56.13230146 20.61114182 9.007431976 7.492168786 5.2478349 1.082857318 0.426263743
1962 56.73646853 18.40675846 9.099636436 8.028143716 5.767479886 1.321094781 0.640418192
1963 58.74774142 17.96273492 8.064126319 8.556697472 4.921683489 1.320620087 0.42639629
1964 55.36725284 21.84374003 7.73917885 7.782970178 5.25808732 1.492658697 0.516112081
1965 57.38213092 19.22519973 7.432510558 9.408053034 4.711459578 1.374841015 0.465805166
1966 57.6860621 19.50150942 6.351559009 9.896792615 4.650871323 1.528493739 0.384711793
1967 59.67489342 19.82444438 5.570700772 9.27418965 3.935984069 1.425906055 0.293881655
1968 56.20428156 21.07213009 6.864417315 9.23692782 4.612247943 1.720082548 0.289912728
1969 58.37357874 19.25503905 6.873507651 9.090641655 4.558804062 1.472369176 0.37605966
1970 56.79790196 19.81453658 7.154127423 9.345331373 4.878377141 1.505678605 0.504046915
1971 60.66330264 18.63270494 5.390761474 9.325657825 4.258468931 1.200390825 0.528713365
1972 62.45934726 18.5442575 4.417376896 8.97004257 4.046324288 1.246243203 0.316408281
1973 60.93937073 19.69784787 4.047450829 9.921267837 3.84522636 1.283575396 0.265260967
1974 58.80837946 23.88165541 4.293143184 7.789508933 3.202375559 1.805799043 0.219138417
1975 59.95877789 23.39354995 3.747979308 7.743695441 3.336162302 1.656563207 0.163271904
1976 62.25017438 22.78775976 3.056552455 7.035448059 3.249437905 1.4733331 0.147294343
1977 62.46588185 21.0455085 4.130469299 7.499187213 3.521068191 1.179486016 0.158398923
1978 67.19638346 17.58839331 3.073109654 6.760986831 3.603797072 1.554571992 0.222757682
1979 66.94590713 19.30748364 2.541753098 6.817788947 2.773456199 1.428780384 0.184830594
1980 62.95208269 24.18747364 2.485638244 5.493114943 2.935061348 1.795452764 0.151176376
1981 62.79207848 23.08158406 2.251980683 6.773906742 3.139253765 1.820523595 0.140672671
1982 63.2092804 22.73867297 2.599309832 6.409737289 3.394332405 1.498788278 0.149878828
1983 51.43191145 31.94491604 3.354708525 6.007043142 5.367727665 1.559483503 0.334209684
1984 62.34077401 22.59009744 2.199254013 7.038892408 4.165307128 1.401764521 0.263910482
1985 65.32764226 19.1172465 2.180804516 8.245678089 3.723536809 1.255281047 0.149810781
1986 66.68794444 18.15930243 1.783502917 7.611484891 4.22863818 1.374650513 0.154476631
1987 65.05381557 20.60039289 1.947919023 6.666523015 4.077557631 1.475663582 0.178128288
1988 61.31250306 24.15397424 1.545129536 7.17371076 3.092218032 2.539791371 0.182673001
1989 67.83507128 19.6527406 1.922797363 5.542535199 3.120157993 1.803664058 0.123033503
1990 64.98413558 23.95527008 1.673825001 4.695803023 2.963937471 1.643837383 0.083191456
1991 68.39452896 19.41269492 1.274823762 5.351450072 3.641839003 1.835688581 0.088974702
1992 68.72678477 19.16746371 1.219397296 6.345947952 2.828796163 1.628527787 0.083082326
1993 62.69950693 25.40135069 1.168804867 5.284742832 3.375162604 1.968000997 0.102431083
1994 72.31722759 17.89326981 0.941020506 4.646465791 2.312043759 1.808391002 0.081581549
1995 68.33533282 21.59595739 0.849965463 4.235285564 2.844366888 2.046024648 0.093067219
1996 70.39475067 18.60439986 0.667573173 6.063689602 2.56463363 1.63681498 0.068138089
1997 70.07979959 20.23727117 0.727575657 4.82243618 2.347839897 1.723047787 0.06202972
1998 71.5214782 20.00294301 0.694204002 3.810620225 2.208699767 1.672898922 0.089155876
1999 72.16200747 18.82003856 0.636823714 4.554163152 1.783949873 1.958669719 0.084347512
2000 74.14339756 17.85212771 0.637355197 3.518553954 2.036887116 1.748973314 0.062705153
2001 75.09286394 16.48871633 0.531051089 4.062058624 1.682128435 2.08873873 0.054442847
2002 77.48231052 14.86766907 0.572867057 3.117090761 1.680500748 2.223431759 0.056130086
2003 74.21055223 18.47957993 0.607055866 3.025142424 1.754843269 1.859398215 0.06342807
2004 77.78117851 15.22495837 0.435495334 2.988551064 1.579870207 1.935477177 0.054469339
2005 77.74683656 15.76707597 0.459160345 2.747800603 1.270609882 1.955907386 0.052609254
2006 79.73691584 14.67053374 0.40449264 2.096088613 1.169362291 1.868058495 0.054548381
2007 80.38862053 13.54977304 0.318712528 3.067213632 1.110517756 1.526324732 0.038837779
2008 76.70323578 16.98578275 0.323153418 2.996286483 1.306099209 1.634746734 0.050695629
2009 79.89088393 14.50220298 0.324561446 2.337034599 1.188937524 1.713617166 0.042762352
2010 79.46020393 15.09508886 0.296060982 2.206383155 0.986451063 1.908311573 0.047500446
2011 81.75606174 14.16979378 0.202860885 1.418463726 0.883317231 1.52757632 0.041926319
2012 77.35148725 17.42069433 0.262421965 1.771701364 1.35476399 1.789214994 0.04971611
2013 81.55475734 13.30311342 0.219419548 2.422795763 1.07483446 1.380323391 0.044756079
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment