tgerard/NZNationalParks.csv

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>NZ National Parks</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
		<link href="natparks.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>

		<h1>National Park visitorship in the land of the long white cloud</h1>

		<p>They have some superb National Parks over there. You should go sometime.</p>
		<div id="legend"></div>
		<div class="clear"></div>

		<script type="text/javascript">


			//Dimensions and padding
			var w = 700;
			var h = 600;
			var padding = [ 20, 10, 50, 100 ];  //Top, right, bottom, left


			//Set up date formatting and years
			var dateFormat = d3.time.format("%Y");


			//Set up scales
			var xScale = d3.time.scale()
								.range([ padding[3], w - padding[1] - padding[3] ]);

			var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);


			//Configure axis generators
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.tickFormat(function(d) {
								return dateFormat(d);
							});

			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left");


			//Configure line generator
			var line = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.year));
				})
				.y(function(d) {
					return yScale(+d.amount);
				});


			//Create the empty SVG image
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);


			//Load data
			d3.csv("NZNationalParks.csv", function(data) {

				//This was a really good way of making an array of years when I had the data in its original format. Unfortunately, I've now transposed it
				/*var years = [];

				data.map(function(d) {
    				years.push(d.calendarYear);
				});*/

    			var years = d3.keys(data[0]).filter(function(head) {
					return head != "NP";
				});


				//console.log(years);

				//Create a new, empty array to hold our restructured dataset
				var dataset = [];

				//Loop once for each row in data
				for (var i = 0; i < data.length; i++) {

					//Create new object with this country's name and empty array
					dataset[i] = {
						park: data[i].NP,
						visitors: []
					};

					//Loop through all the years
					for (var j = 0; j < years.length; j++) {

						// If value is not empty
						if (data[i][years[j]]) {
							//Add a new object to the visitors data array
							//for this country
							dataset[i].visitors.push({
								year: years[j],
								amount: data[i][years[j]]
							});
						}

					}

				}

				//Uncomment to log the original data to the console
				 //console.log(data);

				//Uncomment to log the newly restructured dataset to the console
				 //console.log(dataset);


				//Set scale domains
				xScale.domain([
					d3.min(years, function(d) {
						return dateFormat.parse(d);
					}),
					d3.max(years, function(d) {
						return dateFormat.parse(d);
					})
				]);

				yScale.domain([
					d3.max(dataset, function(d) {
						return d3.max(d.visitors, function(d) {
							return +d.amount;
						});
					}),
					0
				]);


				//Make a group for each country
				var groups = svg.selectAll("g")
					.data(dataset)
					.enter()
					.append("g")
					.attr("class", (function(d) { return d.park; }));

				//Append a title with the country name (so we get easy tooltips)
				groups.append("title")
					.text(function(d) {
						return d.park;
					});

				//Within each group, create a new line/path,
				//binding just the visitors data to each one
				groups.selectAll("path")
					.data(function(d) {
						return [ d.visitors ];
					})
					.enter()
					.append("path")
					.attr("d", line);


				//Axes
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2]) + ")")
					.call(xAxis);

				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3]) + ",0)")
					.call(yAxis);


				//Legend
				var legend = d3.select("#legend").append("svg")
						.attr("width", 300)
						.attr("height", 120);

				legend.selectAll("line")
    				.data(data)
    				.enter()
    				.append("line")
    				.attr("x1", 0)
    				.attr("x2", 20)
    				.attr("y1", function(d, i){return i * 20 + 5;})
    				.attr("y2", function(d, i){return i * 20 + 5;})
					.attr("class", function(d){return d.NP;});

				legend.selectAll("text")
    				.data(data)
    				.enter()
    				.append("text")
    				.attr("x", 25)
    				.attr("y", function(d, i){return i * 20 + 8;})
    				.text(function(d){return d.NP;});


			});


		</script>
		<div id="attribution"><p>Source: <a href="http://www.doc.govt.nz/about-us/our-role/managing-conservation/recreation-management/visitor-statistics-and-research/national-parks-visitor-statistics/">NZ Department of Conservation</a>, 2014</p></p></div>

	</body>
</html>

## natparks.css
h1, .label {
	font-family: verdana, sans-serif;
	font-size: 18px;
	margin-bottom: 0;
}

h1, h3, p, .attribution {
	color: #56350c;
	margin-left: 50px;
}

h3 {
	font-family: verdana, sans-serif;
	margin-top: 0;
	font-size: 14px;
}

p {
	font-family: verdana, sans-serif;
	margin-top: 1em;
	font-size: 12px;
}


.label {
	fill: #56350c;
	font-size: 14px;
	text-anchor: middle;
}

.today {
	opacity: 0.85;
}

.today:hover {
	opacity: 1;
}

.axis path, .axis line {
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
}

.axis text {
	font-family: verdana, sans-serif;
	fill: #56350c;
	font-size: 11px;
}

#attribution {
  font: 0.7em verdana, sans-serif;
  margin: 0.2em 0 2em 50px;
  border-top: solid 1px #f2f6cb;
}

#legend {
  font: 0.7em verdana, sans-serif;
  margin: 2em 0 0 100px;
}

.clear {
	clear: both;
}

a, a:visited {
    color: #af1e23;
    text-decoration: none;
}

a:hover, a:active {
    color: #af1e23;
    text-decoration: underline;
}

.Cook, .Tasman, .Fiordland, .Tongariro, .Westland, .Paparoa {
	fill: none;
	stroke-width: 2;
}

.Cook {
	stroke: #c2491f;
}

.Tasman {
	stroke: #882b3c;
}

.Fiordland {
	stroke: #af991e;
}

.Tongariro {
	stroke: #75963c;
}

.Westland {
	stroke: #8d5919;
}

.Paparoa {
	stroke: #2f4e63;
}

## NZNationalParks.csv

          
            NP
            1997
            1998
            1999
            2000
            2001
            2002
            2003
            2004
            2005
            2006
            2007
            2008
            2009
            2010
            2011
            2012

            
              Abel Tasman
              28800
              31100
              31700
              54400
              48200
              57900
              93000
              94400
              95800
              96700
              110700
              119300
              106800
              120800
              110500
              95300

            
              Fiordland
              196100
              234500
              205100
              250300
              239300
              273000
              308400
              393700
              409700
              438000
              439900
              441200
              385700
              392700
              371400
              338700

            
              Westland
              205500
              207300
              233900
              278900
              271500
              280900
              342300
              362400
              386000
              372800
              376700
              379300
              341400
              357300
              312100
              288800

            
              Aoraki/Mt Cook
              154300
              147100
              135500
              158400
              143100
              158100
              157700
              209900
              201000
              192200
              172700
              201800
              170400
              186600
              146900
              155700

            
              Tongariro
              32100
              41900
              45500
              48600
              51800
              55100
              80800
              96700
              100300
              95000
              97800
              83200
              102100
              110000
              141500
              114000

            
              Paparoa
              11700
              30100
              33400
              40500
              40500
              44400
              71200
              87700
              98300
              116700
              97400
              121200
              130800
              165800
              127500
              114200
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>NZ National Parks</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<link href="natparks.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>

	<h1>National Park visitorship in the land of the long white cloud</h1>

	<p>They have some superb National Parks over there. You should go sometime.</p>
	<div id="legend"></div>
	<div class="clear"></div>

	<script type="text/javascript">


	//Dimensions and padding
	var w = 700;
	var h = 600;
	var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left



	//Set up date formatting and years
	var dateFormat = d3.time.format("%Y");



	//Set up scales
	var xScale = d3.time.scale()
	.range([ padding[3], w - padding[1] - padding[3] ]);

	var yScale = d3.scale.linear()
	.range([ padding[0], h - padding[2] ]);



	//Configure axis generators
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.tickFormat(function(d) {
	return dateFormat(d);
	});

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");



	//Configure line generator
	var line = d3.svg.line()
	.x(function(d) {
	return xScale(dateFormat.parse(d.year));
	})
	.y(function(d) {
	return yScale(+d.amount);
	});



	//Create the empty SVG image
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



	//Load data
	d3.csv("NZNationalParks.csv", function(data) {

	//This was a really good way of making an array of years when I had the data in its original format. Unfortunately, I've now transposed it
	/*var years = [];

	data.map(function(d) {
	years.push(d.calendarYear);
	});*/

	var years = d3.keys(data[0]).filter(function(head) {
	return head != "NP";
	});


	//console.log(years);

	//Create a new, empty array to hold our restructured dataset
	var dataset = [];

	//Loop once for each row in data
	for (var i = 0; i < data.length; i++) {

	//Create new object with this country's name and empty array
	dataset[i] = {
	park: data[i].NP,
	visitors: []
	};

	//Loop through all the years
	for (var j = 0; j < years.length; j++) {

	// If value is not empty
	if (data[i][years[j]]) {
	//Add a new object to the visitors data array
	//for this country
	dataset[i].visitors.push({
	year: years[j],
	amount: data[i][years[j]]
	});
	}

	}

	}

	//Uncomment to log the original data to the console
	//console.log(data);

	//Uncomment to log the newly restructured dataset to the console
	//console.log(dataset);



	//Set scale domains
	xScale.domain([
	d3.min(years, function(d) {
	return dateFormat.parse(d);
	}),
	d3.max(years, function(d) {
	return dateFormat.parse(d);
	})
	]);

	yScale.domain([
	d3.max(dataset, function(d) {
	return d3.max(d.visitors, function(d) {
	return +d.amount;
	});
	}),
	0
	]);



	//Make a group for each country
	var groups = svg.selectAll("g")
	.data(dataset)
	.enter()
	.append("g")
	.attr("class", (function(d) { return d.park; }));

	//Append a title with the country name (so we get easy tooltips)
	groups.append("title")
	.text(function(d) {
	return d.park;
	});

	//Within each group, create a new line/path,
	//binding just the visitors data to each one
	groups.selectAll("path")
	.data(function(d) {
	return [ d.visitors ];
	})
	.enter()
	.append("path")
	.attr("d", line);



	//Axes
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (padding[3]) + ",0)")
	.call(yAxis);


	//Legend
	var legend = d3.select("#legend").append("svg")
	.attr("width", 300)
	.attr("height", 120);

	legend.selectAll("line")
	.data(data)
	.enter()
	.append("line")
	.attr("x1", 0)
	.attr("x2", 20)
	.attr("y1", function(d, i){return i * 20 + 5;})
	.attr("y2", function(d, i){return i * 20 + 5;})
	.attr("class", function(d){return d.NP;});

	legend.selectAll("text")
	.data(data)
	.enter()
	.append("text")
	.attr("x", 25)
	.attr("y", function(d, i){return i * 20 + 8;})
	.text(function(d){return d.NP;});



	});


	</script>
	<div id="attribution"><p>Source: <a href="http://www.doc.govt.nz/about-us/our-role/managing-conservation/recreation-management/visitor-statistics-and-research/national-parks-visitor-statistics/">NZ Department of Conservation</a>, 2014</p></p></div>

	</body>
	</html>
	h1, .label {
	font-family: verdana, sans-serif;
	font-size: 18px;
	margin-bottom: 0;
	}

	h1, h3, p, .attribution {
	color: #56350c;
	margin-left: 50px;
	}

	h3 {
	font-family: verdana, sans-serif;
	margin-top: 0;
	font-size: 14px;
	}

	p {
	font-family: verdana, sans-serif;
	margin-top: 1em;
	font-size: 12px;
	}


	.label {
	fill: #56350c;
	font-size: 14px;
	text-anchor: middle;
	}

	.today {
	opacity: 0.85;
	}

	.today:hover {
	opacity: 1;
	}

	.axis path, .axis line {
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: verdana, sans-serif;
	fill: #56350c;
	font-size: 11px;
	}

	#attribution {
	font: 0.7em verdana, sans-serif;
	margin: 0.2em 0 2em 50px;
	border-top: solid 1px #f2f6cb;
	}

	#legend {
	font: 0.7em verdana, sans-serif;
	margin: 2em 0 0 100px;
	}

	.clear {
	clear: both;
	}

	a, a:visited {
	color: #af1e23;
	text-decoration: none;
	}

	a:hover, a:active {
	color: #af1e23;
	text-decoration: underline;
	}

	.Cook, .Tasman, .Fiordland, .Tongariro, .Westland, .Paparoa {
	fill: none;
	stroke-width: 2;
	}

	.Cook {
	stroke: #c2491f;
	}

	.Tasman {
	stroke: #882b3c;
	}

	.Fiordland {
	stroke: #af991e;
	}

	.Tongariro {
	stroke: #75963c;
	}

	.Westland {
	stroke: #8d5919;
	}

	.Paparoa {
	stroke: #2f4e63;
	}
NP	1997	1998	1999	2000	2001	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012
Abel Tasman	28800	31100	31700	54400	48200	57900	93000	94400	95800	96700	110700	119300	106800	120800	110500	95300
Fiordland	196100	234500	205100	250300	239300	273000	308400	393700	409700	438000	439900	441200	385700	392700	371400	338700
Westland	205500	207300	233900	278900	271500	280900	342300	362400	386000	372800	376700	379300	341400	357300	312100	288800
Aoraki/Mt Cook	154300	147100	135500	158400	143100	158100	157700	209900	201000	192200	172700	201800	170400	186600	146900	155700
Tongariro	32100	41900	45500	48600	51800	55100	80800	96700	100300	95000	97800	83200	102100	110000	141500	114000
Paparoa	11700	30100	33400	40500	40500	44400	71200	87700	98300	116700	97400	121200	130800	165800	127500	114200