robcrock/data.csv

## data.csv

          
            year
            poultry
            beef
            pork

            
              1965
              44
              74.7
              51.5

            
              1966
              43.7
              78.1
              50.3

            
              1967
              45.3
              79.8
              55

            
              1968
              44.9
              82
              56.2

            
              1969
              46.8
              82.5
              54.3

            
              1970
              48.2
              84.4
              55.4

            
              1971
              48.5
              83.9
              60.6

            
              1972
              50.4
              85.3
              54.7

            
              1973
              48.2
              80.5
              48.7

            
              1974
              48.4
              85.6
              52.7

            
              1975
              47
              88.2
              42.9

            
              1976
              50.9
              94.1
              45.1

            
              1977
              51.4
              91.5
              46.7

            
              1978
              53.4
              87.1
              46.5

            
              1979
              56.9
              77.9
              53.2

            
              1980
              57.6
              76.4
              56.8

            
              1981
              59.3
              77.2
              54.2

            
              1982
              59.5
              76.9
              48.6

            
              1983
              60
              78.5
              51.3

            
              1984
              61.9
              78.3
              51

            
              1985
              64.1
              79
              51.5

            
              1986
              66
              78.7
              48.6

            
              1987
              71.3
              73.7
              48.8

            
              1988
              72.4
              72.5
              52.1

            
              1989
              74.4
              68.9
              51.5

            
              1990
              78.1
              67.5
              49.4

            
              1991
              80.7
              66.4
              49.8

            
              1992
              84.2
              65.9
              52.3

            
              1993
              86.5
              64.4
              51.6

            
              1994
              87.3
              66.1
              52.1

            
              1995
              86.5
              66.4
              51.5

            
              1996
              87.8
              67
              48.1

            
              1997
              88.6
              65.5
              47.6

            
              1998
              89.5
              66.5
              51.3

            
              1999
              93.9
              67.3
              52.5

            
              2000
              94.7
              67.5
              50.8

            
              2001
              94.6
              66
              50

            
              2002
              98.7
              67.5
              51.3

            
              2003
              99.5
              64.8
              51.6

            
              2004
              101.6
              65.9
              51

            
              2005
              103.1
              65.4
              49.6

            
              2006
              103.8
              65.7
              49

            
              2007
              103
              65
              50.3

            
              2008
              101.4
              62.1
              48.9

            
              2009
              96.9
              60.8
              49.6

            
              2010
              98.8
              59.3
              47.2

            
              2011
              99.3
              56.9
              45.1

            
              2012
              96.7
              57.1
              45.3

            
              2013
              98.2
              56
              46.3

            
              2014
              99.6
              53.9
              45.3

            
              2015
              105.2
              53.8
              49.2

            
              2016
              107.6
              56.5
              50.1

            
              2017
              108.1
              58
              50.1

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<script src="http://binaworks.github.io/scripts/d3-container.v0.0.1.min.js"></script>
</head>
<style>
	/* work to emulate this style https://projects.fivethirtyeight.com/trump-approval-ratings/?ex_cid=rrpromo */
	#container {
		width: 960px;
	}
	h1 {
		font-family: "Raleway";
		font-weight: 700;
		color: #222;
	}
	h2 {
		font-family: "Raleway";
		font-weight: 300;
		color: #222;
	}
	footer {
		font-family: "Raleway";
		color: #000
	}
	.line {
	  fill: none;
	  stroke-width: 2px;
	}
	#source {
		float: left;
	}
	#author {
		float: right;
	}
	#poultryPath {
		fill:  none;
		stroke:  #7EB2D4;
		stroke-width: 2px;
	}
	#beefPath {
		fill:  none;
		stroke:  #B5DFD0;
		stroke-width: 2px;
	}
	#porkPath {
		fill:  none;
		stroke:  #DEDCEA;
		stroke-width: 2px;
	}
</style>
<body>
<div id="container">
	<h1>Poultry consumption has been flying high since 1989</h1>
	<h2>US per capita consumption from 1965 to 2017</h2>
	<footer>
		<div id="source">SOURCE | National Chicken Council</div>
		<div id="author">DESIGN | @robcrock for #MakeoverMonday</div>
	</footer>
</div>
<!-- D3 CODE -->
<script>
	var outerContainer = d3_container.container()
	    .width(960)
	    .height(500);

	var innerContainer = d3_container.container().margin(20);

	var svg = d3.select("h2")
		.append("svg");

	svg.call(outerContainer);

	var content =  outerContainer.content();

	content.call(innerContainer);

	var g = innerContainer.content(),
	    innerWidth = innerContainer.contentWidth(),
	    innerHeight = innerContainer.contentHeight(),
	    innerMarginLeft = innerContainer.margin().left();

	var x = d3.scaleLinear()
	    .range([0, innerWidth]);
	var y = d3.scaleLinear()
	    .range([innerHeight, 0]);

	var xAxis = d3.axisBottom(x)
		.tickFormat(d3.format(""));

	var yAxis = d3.axisLeft(y);

	// Create seperate path generators for each line
	var poultryPath = d3.line()
	    .x(function(d) { return x(d.year); })
	    .y(function(d) { return y(d.poultry); });
	var beefPath = d3.line()
	    .x(function(d) { return x(d.year); })
	    .y(function(d) { return y(d.beef); });
	var porkPath = d3.line()
	    .x(function(d) { return x(d.year); })
	    .y(function(d) { return y(d.pork); });

	// Get the data
	d3.csv("data.csv", function(error, data) {
	  if (error) throw error;

    x.domain(d3.extent(data, function(d) { return d.year; }));
    y.domain([0, d3.max(data, function(d) {
  	  return Math.max(d.poultry); })]);

	  // Add the X Axis
	  g.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(" + innerMarginLeft + "," + innerHeight + ")")
      .call(xAxis);

	  // Add the Y Axis
	  g.append("g")
	      .attr("class", "y axis")
	      .attr("transform", "translate(" + innerMarginLeft + ",0)")
	      .call(yAxis);

	  // Append individual lines
	  g.append("path")
	      .data([data])
	      .attr("id", "beefPath")
	      .attr("d", beefPath)
	      .attr("transform", "translate(" + innerMarginLeft + ",0)");
	  g.append("path")
	      .data([data])
	      .attr("id", "porkPath")
	      .attr("d", porkPath)
	      .attr("transform", "translate(" + innerMarginLeft + ",0)");
	  g.append("path")
	      .data([data])
	      .attr("id", "poultryPath")
	      .attr("d", poultryPath)
	      .attr("transform", "translate(" + innerMarginLeft + ",0)");

	});
</script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
year	poultry	beef	pork
1965	44	74.7	51.5
1966	43.7	78.1	50.3
1967	45.3	79.8	55
1968	44.9	82	56.2
1969	46.8	82.5	54.3
1970	48.2	84.4	55.4
1971	48.5	83.9	60.6
1972	50.4	85.3	54.7
1973	48.2	80.5	48.7
1974	48.4	85.6	52.7
1975	47	88.2	42.9
1976	50.9	94.1	45.1
1977	51.4	91.5	46.7
1978	53.4	87.1	46.5
1979	56.9	77.9	53.2
1980	57.6	76.4	56.8
1981	59.3	77.2	54.2
1982	59.5	76.9	48.6
1983	60	78.5	51.3
1984	61.9	78.3	51
1985	64.1	79	51.5
1986	66	78.7	48.6
1987	71.3	73.7	48.8
1988	72.4	72.5	52.1
1989	74.4	68.9	51.5
1990	78.1	67.5	49.4
1991	80.7	66.4	49.8
1992	84.2	65.9	52.3
1993	86.5	64.4	51.6
1994	87.3	66.1	52.1
1995	86.5	66.4	51.5
1996	87.8	67	48.1
1997	88.6	65.5	47.6
1998	89.5	66.5	51.3
1999	93.9	67.3	52.5
2000	94.7	67.5	50.8
2001	94.6	66	50
2002	98.7	67.5	51.3
2003	99.5	64.8	51.6
2004	101.6	65.9	51
2005	103.1	65.4	49.6
2006	103.8	65.7	49
2007	103	65	50.3
2008	101.4	62.1	48.9
2009	96.9	60.8	49.6
2010	98.8	59.3	47.2
2011	99.3	56.9	45.1
2012	96.7	57.1	45.3
2013	98.2	56	46.3
2014	99.6	53.9	45.3
2015	105.2	53.8	49.2
2016	107.6	56.5	50.1
2017	108.1	58	50.1
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<script src="http://binaworks.github.io/scripts/d3-container.v0.0.1.min.js"></script>
	</head>
	<style>
	/* work to emulate this style https://projects.fivethirtyeight.com/trump-approval-ratings/?ex_cid=rrpromo */
	#container {
	width: 960px;
	}
	h1 {
	font-family: "Raleway";
	font-weight: 700;
	color: #222;
	}
	h2 {
	font-family: "Raleway";
	font-weight: 300;
	color: #222;
	}
	footer {
	font-family: "Raleway";
	color: #000
	}
	.line {
	fill: none;
	stroke-width: 2px;
	}
	#source {
	float: left;
	}
	#author {
	float: right;
	}
	#poultryPath {
	fill: none;
	stroke: #7EB2D4;
	stroke-width: 2px;
	}
	#beefPath {
	fill: none;
	stroke: #B5DFD0;
	stroke-width: 2px;
	}
	#porkPath {
	fill: none;
	stroke: #DEDCEA;
	stroke-width: 2px;
	}
	</style>
	<body>
	<div id="container">
	<h1>Poultry consumption has been flying high since 1989</h1>
	<h2>US per capita consumption from 1965 to 2017</h2>
	<footer>
	<div id="source">SOURCE \| National Chicken Council</div>
	<div id="author">DESIGN \| @robcrock for #MakeoverMonday</div>
	</footer>
	</div>
	<!-- D3 CODE -->
	<script>
	var outerContainer = d3_container.container()
	.width(960)
	.height(500);

	var innerContainer = d3_container.container().margin(20);

	var svg = d3.select("h2")
	.append("svg");

	svg.call(outerContainer);

	var content = outerContainer.content();

	content.call(innerContainer);

	var g = innerContainer.content(),
	innerWidth = innerContainer.contentWidth(),
	innerHeight = innerContainer.contentHeight(),
	innerMarginLeft = innerContainer.margin().left();

	var x = d3.scaleLinear()
	.range([0, innerWidth]);
	var y = d3.scaleLinear()
	.range([innerHeight, 0]);

	var xAxis = d3.axisBottom(x)
	.tickFormat(d3.format(""));

	var yAxis = d3.axisLeft(y);

	// Create seperate path generators for each line
	var poultryPath = d3.line()
	.x(function(d) { return x(d.year); })
	.y(function(d) { return y(d.poultry); });
	var beefPath = d3.line()
	.x(function(d) { return x(d.year); })
	.y(function(d) { return y(d.beef); });
	var porkPath = d3.line()
	.x(function(d) { return x(d.year); })
	.y(function(d) { return y(d.pork); });

	// Get the data
	d3.csv("data.csv", function(error, data) {
	if (error) throw error;

	x.domain(d3.extent(data, function(d) { return d.year; }));
	y.domain([0, d3.max(data, function(d) {
	return Math.max(d.poultry); })]);

	// Add the X Axis
	g.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + innerMarginLeft + "," + innerHeight + ")")
	.call(xAxis);

	// Add the Y Axis
	g.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + innerMarginLeft + ",0)")
	.call(yAxis);

	// Append individual lines
	g.append("path")
	.data([data])
	.attr("id", "beefPath")
	.attr("d", beefPath)
	.attr("transform", "translate(" + innerMarginLeft + ",0)");
	g.append("path")
	.data([data])
	.attr("id", "porkPath")
	.attr("d", porkPath)
	.attr("transform", "translate(" + innerMarginLeft + ",0)");
	g.append("path")
	.data([data])
	.attr("id", "poultryPath")
	.attr("d", poultryPath)
	.attr("transform", "translate(" + innerMarginLeft + ",0)");

	});
	</script>
	</body>