Skip to content

Instantly share code, notes, and snippets.

@ajzeigert

ajzeigert/cpi.csv

Created September 3, 2015 20:26
Show Gist options
  • Save ajzeigert/5b9a7849e6f0e77d09e0 to your computer and use it in GitHub Desktop.
Save ajzeigert/5b9a7849e6f0e77d09e0 to your computer and use it in GitHub Desktop.
Download ZIP
Chart comparing CPI change from 1974-2014
Raw
cpi.csv
Year All food Food away from home Food at home Meats, poultry, and fish Meats Beef and veal Pork Other meats Poultry Fish and seafood Eggs Dairy products Fats and oils Fruits and vegetables Fresh fruits & vegetables Fresh fruits Fresh vegetables Processed fruits & vegetables Sugar and sweets Cereals and bakery products Nonalcoholic beverages Other foods
1974 14.3 12.7 14.9 2.2 1.8 2.9 -0.5 3.1 -5.1 15.3 0.4 18.6 41.9 16.5 7.8 8.7 7.3 N/A 52.4 29.9 19.3 21.4 All food
1975 8.5 9.4 8.2 8.5 8.5 1 22.4 5.9 10.5 8.5 -1.8 3.1 10.7 3.1 2.3 6.8 -1.1 N/A 26.1 11.3 15 12.8 Food away from home
1976 3 6.8 2.1 0.9 0.2 -3.2 1.3 5.9 -4.1 11.7 9.2 8.1 -12.5 2.6 2.4 -0.2 4.3 N/A -11.3 -2.2 19.6 4.1 Food at home
1977 6.3 7.6 5.9 -0.6 -2.3 -0.7 -5.4 -0.6 0.7 10.8 -3.2 2.7 10.1 9.2 13.6 14.9 12.6 N/A 5 1.6 50.6 3.4 Meats, poultry, and fish
1978 9.9 9.1 10.5 16.7 18.6 22.9 12.9 17.7 10.4 9.4 -5.4 6.8 9.6 11.1 12.9 19.5 8 N/A 12.3 9 5.8 8 Meats
1979 11 11.1 10.8 14.9 17 27.4 1.6 14.7 4.9 9.7 9.5 11.6 7.9 8 7.6 12.4 3 N/A 7.8 10 5 10.1 Beef and veal
1980 8.6 9.9 8.1 3.7 2.9 5.7 -3.3 3.8 5.2 9.2 -1.8 9.8 6.7 7.2 7.5 6.3 8.8 N/A 23 12 10.7 10.9 Pork
1981 7.8 9 7.2 4.1 3.6 0.8 9.3 4.3 4.1 8.3 8.2 7.2 10.6 12.1 12 5.4 18.6 N/A 8 10 4.3 10.3 Other meats
1982 4.1 5.4 3.5 4.1 4.9 1.4 12.8 3 -1.7 3.6 -2.7 1.4 -2.7 5.4 5.6 11.1 0.5 N/A -0.2 4.6 2.7 5.2 Poultry
1983 2.1 4.4 1 -0.7 -1.2 -1.5 -0.9 -0.4 1.3 1.1 4.7 1.2 1.4 0.3 -0.3 -4.2 3.6 N/A 1.8 3.2 1.9 3.1 Fish and seafood
1984 3.8 4.2 3.7 1.7 0.3 1.2 -1.3 0.4 10.6 3.2 11.7 1.3 9.4 8.6 10.9 11 10.9 N/A 3.9 4.3 2.5 3 Eggs
1985 2.3 3.9 1.5 -0.4 -0.9 -2.1 0.3 0.7 -1 4.9 -16.6 1.9 2.2 2.6 2.6 10.1 -4.3 N/A 2.5 3.8 2 3.3 Dairy products
1986 3.2 3.9 2.9 4.4 3.1 0.6 8.2 2.6 7.5 9.2 6.8 0.1 -2.2 0.9 3 2.1 4.1 N/A 3 2.8 5.8 2.6 Fats and oils
1987 4.1 4 4.3 6.5 7.5 7.6 8.2 6.3 -1.4 10.6 -5.9 2.5 1.5 8.9 12.2 11.2 12.9 N/A 1.8 3.5 -2.6 4.2 Fruits and vegetables
1988 4.1 4.1 4.2 3.5 2.4 5.5 -3 2.6 7.2 5.8 2.3 2.4 4.6 7.6 7.3 8.3 6.3 N/A 2.7 6.4 0 3.7 Fresh fruits & vegetables
1989 5.8 4.6 6.5 5 4 6.4 0.6 2.8 9.9 4.5 26.6 6.6 7.2 7.7 8.5 6.6 10.7 N/A 4.7 8.4 3.5 6.4 Fresh fruits
1990 5.8 4.7 6.5 7.3 10.1 8 14.7 9.3 -0.2 2.2 4.7 9.4 4.2 8 9 12.1 5.6 N/A 4.4 5.7 2 4.5 Fresh vegetables
1991 2.9 3.4 2.6 2.3 3.1 2.8 3.3 3.7 -0.8 1.1 -2.3 -1.1 4.3 4.6 8.1 13.5 2.2 N/A 3.7 4.1 0.5 4.5 Processed fruits & vegetables
1992 1.2 2 0.7 -0.8 -1.4 -0.1 -4.7 0.2 -0.1 2.3 -10.6 2.7 -1.4 -0.3 -1.8 -5 2.3 N/A 2.9 3.9 0.2 2.2 Sugar and sweets
1993 2.2 1.8 2.4 3.3 3 3.6 3.1 1.6 4.2 3.2 8.1 0.7 0.2 2.3 4.4 2.5 6.6 N/A 0.2 3.4 0.3 2.6 Cereals and bakery products
1994 2.4 1.7 2.9 1.5 0.6 -0.8 1.7 2.4 3.4 4.5 -2.4 1.8 2.7 3.8 4.5 6.6 2.3 N/A 1.3 4.1 7.5 2.6 Nonalcoholic beverages
1995 2.8 2.3 3.3 0.9 0.1 -0.8 0.7 1.5 1.4 4.8 5.4 0.8 2.8 7.7 10.3 8.8 12.1 N/A 1.7 2.8 6.9 2.4 Other foods
1996 3.3 2.5 3.7 3.5 3.5 -0.3 9.9 3.6 6.2 0.9 17.9 7 2.3 3.5 2.8 7 -2 N/A 4.5 3.9 -2.4 3.4
1997 2.6 2.8 2.5 2.9 3 1.7 5.2 2.8 2.8 2.3 -1.5 2.4 0.9 2 1.7 0.8 2.9 N/A 2.9 2.1 3.7 3.2
1998 2.2 2.6 1.9 -0.8 -1.9 -0.2 -4.7 -0.9 0.3 2.6 -3.3 3.6 3.7 5.7 7.3 4.3 10.9 N/A 1.6 2 -0.3 2.7
1999 2.1 2.5 1.9 0.7 0.5 2 -1.8 1 0.5 2 -5.4 5.8 1 2.5 2.6 8 -3 2.3 1.4 2.2 1 2.1
2000 2.3 2.4 2.3 4.5 5.9 6.4 7.3 2.6 1.2 2.8 3 0.7 -0.6 0.7 0.7 -3 4.8 1.1 1.1 1.8 2.6 2
2001 3.2 2.9 3.3 4.4 5.7 8.4 3.8 2.9 3.2 0.4 3.4 4 5.6 3.7 3.8 2.6 5.1 3.2 1.1 2.9 1 2.2
2002 1.8 2.5 1.3 0.5 0.6 0.1 -0.4 3.5 1.3 -1.6 1.3 0.6 -0.2 4.1 4.2 1.9 6.4 3.8 2.1 2.2 0 0.6
2003 2.2 2.1 2.2 4 5.4 9 1.9 2.5 1.3 1 13.8 -0.1 1.3 2.3 2.7 3.3 2.1 0.9 1.9 2.4 0.4 1
2004 3.4 3 3.8 7.4 8.4 11.5 5.6 4.5 7.5 2.3 6.2 7.3 6.6 3 3.5 2.8 4.3 1.2 0.7 1.6 0.4 0.5
2005 2.4 3.1 1.9 2.4 2.3 2.6 2 2.4 2 3 -13.7 1.2 -0.1 3.7 3.9 3.7 4 3.3 1.2 1.5 2.8 1.6
2006 2.4 3.1 1.7 0.8 0.7 0.8 -0.2 1.8 -1.8 4.7 4.9 -0.5 0.2 4.8 5.3 6 4.6 2.9 3.8 1.8 2.1 1.4
2007 4 3.6 4.2 3.8 3.3 4.4 2 2.3 5.1 4.6 29.2 7.4 2.9 3.8 3.9 4.5 3.2 3.6 3.1 4.4 4.1 1.8
2008 5.5 4.4 6.4 4.2 3.5 4.5 2.3 3.1 5 5.9 14 8 13.8 6.2 5.2 4.8 5.6 9.5 5.5 10.2 4.3 5.2
2009 1.8 3.5 0.5 0.5 -0.6 -1.0 -2.0 2.3 1.7 3.6 -14.7 -6.4 2.3 -2.1 -4.8 -6.1 -3.4 6.6 5.6 3.2 1.9 3.7
2010 0.8 1.3 0.3 1.9 2.8 2.9 4.7 -0.1 -0.1 1.1 1.5 1.1 -0.3 0.2 0.7 -0.6 2.0 -1.3 2.2 -0.8 -0.9 -0.5
2011 3.7 2.3 4.8 7.4 8.8 10.2 8.5 6.4 2.9 7.1 9.2 6.8 9.3 4.1 4.5 3.3 5.6 2.9 3.3 3.9 3.2 2.3
2012 2.6 2.8 2.5 3.6 3.4 6.4 0.3 1.7 5.5 2.4 3.2 2.1 6.1 -0.6 -2 1 -5.1 3.8 3.3 2.8 1.1 3.5
2013 1.4 2.1 0.9 2.1 1.2 2 0.9 -0.1 4.7 2.5 3.3 0.1 -1.4 2.5 3.3 2 4.7 0.3 -1.7 1 -1 0.5
2014 2.4 2.4 2.4 7.2 9.2 12.1 9.1 3.9 2 5.8 8.4 3.6 0.1 1.5 1.9 4.8 -1.3 0.1 -0.8 0.2 -0.5 1
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CPI change</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
</head>
<style>
body {
font-family: 'Helvetica', Arial, sans-serif;
margin: 0;
padding: 0;
}
#container {
width: 620px;
margin: 20px;
}
h1 {
font-size: 26px;
margin: 0;
}
p {
margin: 0;
}
small {
font-size: 10px;
}
.source, .credit {
display: inline-block;
}
.source {
float: left;
}
.credit {
float: right;
}
/* SVG styles below */
rect.bar {
fill: #7a9e00
}
rect.bar:hover {
fill: #013f62
}
</style>
<body>
<div id='container'>
<h1>Consumer Price Index for all food, 1974-2014</h1>
<p>Shown as percentage change in overall price from previous year.</p>
<div id='chart'></div>
<p class='source'><small>Source: USDA</small></p>
<p class='credit'><small>Chart by Andy Zeigert</small></p>
</div>
<script type="text/javascript">
d3.csv("cpi.csv", function(data) {
console.log(data);
var w = 600;
var h = 300
var barPadding = 2;
var margin = { top: 10, right: 10, bottom: 10, left: 10 };
var chart = d3.select("#chart").append("svg").attr({ width: w + margin.left + margin.right, height: h + margin.bottom + margin.top });
chart.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr({
x: function(d, i) { return i * (w / data.length) + margin.left },
y: function(d) { return h - +d["All food"] * 20 + margin.top },
width: w / data.length - barPadding,
height: function(d) { return +d["All food"] * 20 },
class: "bar"})
.append("title")
.text(function(d) { return d.Year + ": " + d["All food"] });
chart.selectAll("text")
.data(data)
.enter()
.append("text")
.attr({
x: function(d, i) { return i * (w / data.length) + ( w / data.length - barPadding) / 2 + margin.left },
y: function(d) { return h - (d["All food"] * 20) - 2 + margin.top },
"font-family": "sans-serif",
"font-size": "9px",
"font-weight": "bold",
"fill": "#595959",
"text-anchor": "middle" })
.text(function(d) { return d["All food"] });
chart.selectAll("text2")
.data(data)
.enter()
.append("text")
.attr({
x: function(d, i) { return i * (w / data.length) + ( w / data.length - barPadding) / 2 + margin.left },
y: function(d) { return h + margin.top + 10},
"font-family": "sans-serif",
"font-size": "8px",
"fill": "#595959",
"text-anchor": "middle" })
.text(function(d) { return "'" + d.Year.slice(-2) });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment