Chart comparing CPI change from 1974-2014 by ajzeigert

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CPI change</title>
        <script type="text/javascript" src="//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>

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,