Skip to content

Instantly share code, notes, and snippets.

@cornfact

cornfact/cropsVertical.csv

Created November 10, 2015 02:17
Show Gist options
  • Save cornfact/db04e79ae8e0299c002d to your computer and use it in GitHub Desktop.
Save cornfact/db04e79ae8e0299c002d to your computer and use it in GitHub Desktop.
Download ZIP
Stacked crop bars
Raw
cropsVertical.csv
year corn soy wheat sorghum
1929 99.13 2.43 67.18 3.52
1930 103.92 3.07 67.56 3.48
1931 109.36 3.84 66.46 4.44
1932 113.02 3.7 66.28 4.4
1933 109.83 3.54 69.01 4.35
1934 100.56 5.76 64.06 2.4
1935 99.97 6.97 69.61 4.6
1936 101.96 6.13 73.97 2.79
1937 97.17 6.33 80.81 4.92
1938 94.47 7.32 78.98 4.7
1939 91.64 9.57 62.8 4.76
1940 88.69 10.49 61.82 6.37
1941 86.84 10.07 62.71 6.02
1942 88.82 13.7 53 5.99
1943 94.34 14.19 55.98 6.89
1944 95.48 13.12 66.19 9.39
1945 89.26 13.06 69.19 6.32
1946 88.9 11.71 71.58 6.67
1947 85.04 13.05 78.31 5.48
1948 85.52 11.99 78.35 7.32
1949 86.74 11.87 83.91 6.6
1950 82.86 15.05 71.29 10.35
1951 83.28 15.18 78.52 8.54
1952 82.23 15.96 78.65 5.33
1953 81.57 16.39 78.93 6.3
1954 82.19 18.54 62.54 11.72
1955 80.93 19.67 58.25 12.89
1956 77.83 21.7 60.66 9.21
1957 73.18 21.94 49.84 19.68
1958 73.35 25.11 56.02 16.52
1959 82.74 23.35 56.71 15.41
1960 81.43 24.44 54.91 15.6
1961 65.92 27.79 55.71 10.99
1962 65.02 28.42 49.27 11.57
1963 68.77 29.46 53.36 13.33
1964 65.82 31.72 55.67 11.74
1965 65.17 35.23 57.36 13.03
1966 66.35 37.29 54.11 12.81
1967 71.16 40.82 67.26 14.99
1968 65.13 42.27 61.86 13.89
1969 64.26 42.53 53.45 13.44
1970 66.86 43.08 48.74 13.57
1971 74.18 43.48 53.82 16.14
1972 67.13 46.87 54.91 13.21
1973 72.25 56.55 59.25 15.7
1974 77.94 52.48 71.04 13.81
1975 78.72 54.59 74.9 15.4
1976 84.59 50.27 80.4 14.47
1977 84.33 58.98 75.41 13.8
1978 81.68 64.71 65.99 13.41
1979 81.39 71.41 71.42 12.9
1980 84.04 69.93 80.79 12.51
1981 84.1 67.54 88.25 13.68
1982 81.86 70.88 86.23 14.14
1983 60.21 63.78 76.42 10
1984 80.52 67.76 79.21 15.36
1985 83.4 63.15 75.54 16.78
1986 76.58 60.41 72 13.86
1987 66.2 58.18 65.83 10.53
1988 67.72 58.84 65.53 9.04
1989 72.32 60.82 76.62 11.1
1990 74.17 57.8 77.04 9.09
1991 75.96 59.18 69.88 9.87
1992 79.31 59.18 72.22 12.05
1993 73.24 60.09 72.17 8.92
1994 78.92 61.62 70.35 8.88
1995 71.48 62.5 69.03 8.25
1996 79.23 64.2 75.11 11.81
1997 79.54 70.01 70.41 9.16
1998 80.17 72.03 65.82 7.72
1999 77.39 73.73 62.66 8.54
2000 79.55 74.27 62.55 7.73
2001 75.7 74.08 59.43 8.58
2002 78.89 73.96 60.32 7.13
2003 78.6 73.4 62.14 7.8
2004 80.93 75.21 59.64 6.52
2005 81.78 72.03 57.21 5.74
2006 78.33 75.52 57.33 4.94
2007 93.53 64.74 60.46 6.79
2008 85.98 75.72 63.62 7.31
2009 86.38 77.45 59.02 5.5
2010 88.19 77.4 52.62 4.81
2011 91.94 75.05 54.28 3.95
2012 97.29 77.2 55.29 5
2013 95.37 76.84 56.24 6.59
2014 90.6 83.28 56.84 6.4
2015 88.38 83.21 54.64 7.65
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stack layout, stacked bar chart, but flipped</title>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
</style>
</head>
<body>
<h1>Crop acres planted 1929-2015</h1>
<p>Acres planted in millions for corn, soybeans, wheat and sorghum . Source: USDA</p>
<script type="text/javascript">
//Width and height
var w = 800;
var h = 500;
// planned out what each data should look like
// {
// crop: "Corn",
// acres: [
// { x: "1929", y: 12.34 },
// { x: "1930", y: 56.78 },
// { x: "1931", y: 90.12 },
// …
// ]
// }
//d3.csv("cropsVertical.csv", function(data) {
//console.log(data);
//all arrays have a map function
// var dataset = data.map(function(d,i) {
// return {x:d.year, y: d.corn}
// })
// console.log(dataset)
var newData = []
// d3 helper maps out object keys
// {year: "1929", corn: "99.13", soy: "2.43", wheat: "67.18", sorghum: "3.52"}
d3.csv("cropsVertical.csv", function(data) {
var keys = d3.keys(data[0])
//console.log(keys);
// Arrays have a forEach function
keys.forEach (function(k,i) {
if (k != "year") {
//console.log(k)
var innerData = data.map(function(d,i) {
return {
x: +d.year,
y: +d[k]
};
})
//console.log(innerData)
// adding each data to data array
newData.push({crop: k, acres: innerData})
//console.log(newData)
}
});
//Set up stack method
var stack = d3.layout.stack()
.values(function(d) {
return d.acres;
})
.order("reverse"); //Flip the order
//Data, stacked
stack(newData);
//console.log(newData);
//Set up scales
var xScale = d3.scale.ordinal()
.domain(d3.range(data[0].length))
.rangeRoundBands([0, w], 0.05);
var yScale = d3.scale.linear()
.domain([0,
d3.max(data, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
})
])
.range([0, h]);
//Easy colors accessible via a 10-step ordinal scale
var colors = d3.scale.category10();
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// Add a group for each row of data
var groups = svg.selectAll("g")
.data(newData)
.enter()
.append("g")
.style("fill", function(d, i) {
return colors(i);
});
// Add a rect for each data value
var rects = groups.selectAll("rect")
.data(function(d) { return d; })
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("width", xScale.rangeBand())
.attr("y", function(d) {
return h - yScale(d.y0) - yScale(d.y); //Flip the math!
})
.attr("height", function(d) {
return yScale(d.y);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment