Skip to content

Instantly share code, notes, and snippets.

@tgerard

tgerard/index.html

Last active August 29, 2015 14:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tgerard/193a6c0201a63a5f3234 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tgerard/193a6c0201a63a5f3234 to your computer and use it in GitHub Desktop.
Download ZIP
Initial data load – international visitors to NZ National Parks
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading CSV Data with D3</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<p>SVG delights now on display</p>
<svg width="600" height="600">
<line x1="50" y1="300" x2="550" y2="300" stroke="#56350c" stroke-width="2px"></line>
<line x1="300" y1="50" x2="300" y2="550" stroke="#56350c" stroke-width="2px"></line>
<line x1="125" y1="125" x2="475" y2="475" stroke="#56350c" stroke-width="2px"></line>
<line x1="125" y1="475" x2="475" y2="125" stroke="#56350c" stroke-width="2px"></line>
<circle cx="50" cy="300" r="16" stroke="#56350c" stroke-width="4px" fill="#f2f6cb"></circle>
<circle cx="125" cy="125" r="16" stroke="#56350c" stroke-width="4px" fill="#f2f6cb"></circle>
<circle cx="300" cy="50" r="16" stroke="#56350c" stroke-width="4px" fill="#f2f6cb"></circle>
<circle cx="475" cy="125" r="16" stroke="#56350c" stroke-width="4px" fill="#f2f6cb"></circle>
<circle cx="550" cy="300" r="16" stroke="#56350c" stroke-width="4px" fill="#f2f6cb"></circle>
<circle cx="475" cy="475" r="16" stroke="#56350c" stroke-width="4px" fill="#f2f6cb"></circle>
<circle cx="300" cy="550" r="16" stroke="#56350c" stroke-width="4px" fill="#f2f6cb"></circle>
<circle cx="125" cy="475" r="16" stroke="#56350c" stroke-width="4px" fill="#f2f6cb"></circle>
<circle cx="300" cy="300" r="22" stroke="#56350c" stroke-width="2px" fill="#fff"></circle>
<circle cx="300" cy="300" r="16" stroke="#56350c" stroke-width="4px" fill="#f2f6cb"></circle>
</svg>
<script type="text/javascript">
//Load in contents of CSV file
d3.csv("visitorsToNZNationalParks.csv", function(data) {
//Now CSV contents have been transformed into
//an array of JSON objects.
//Log 'data' to the console, for verification.
console.log(data);
});
</script>
</body>
</html>
Raw
visitorsToNZNationalParks.csv
Calendar year Abel Tasman Fiordland Westland Aoraki/Mt Cook Tongariro Paparoa
1997 28800 196100 205500 154300 32100 11700
1998 31100 234500 207300 147100 41900 30100
1999 31700 205100 233900 135500 45500 33400
2000 54400 250300 278900 158400 48600 40500
2001 48200 239300 271500 143100 51800 40500
2002 57900 273000 280900 158100 55100 44400
2003 93000 308400 342300 157700 80800 71200
2004 94400 393700 362400 209900 96700 87700
2005 95800 409700 386000 201000 100300 98300
2006 96700 438000 372800 192200 95000 116700
2007 110700 439900 376700 172700 97800 97400
2008 119300 441200 379300 201800 83200 121200
2009 106800 385700 341400 170400 102100 130800
2010 120800 392700 357300 186600 110000 165800
2011 110500 371400 312100 146900 141500 127500
2012 95300 338700 288800 155700 114000 114200
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment