Skip to content

Instantly share code, notes, and snippets.

@SHewitt95
Created January 16, 2016 20:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SHewitt95/eb7ce3c5b3d5663074e0 to your computer and use it in GitHub Desktop.
Save SHewitt95/eb7ce3c5b3d5663074e0 to your computer and use it in GitHub Desktop.
Week 1: CSV Data
Race 2,000 2,001 2,002 2,003 2,004 2,005 2,006 2,007 2,008 2,009 2,010 2,011 2,012
White, non-Hispanic 6,709 6,921 7,004 7,129 7,228 7,393 7,200 7,533 7,894 7,983 7,663 7,882 7,189
Black, non-Hispanic 1,182 1,226 1,196 1,190 1,201 1,259 1,291 1,340 1,311 1,574 1,611 1,571 1,578
Hispanic 899 931 979 1,115 1,221 1,215 1,182 1,375 1,338 1,465 1,814 2,079 2,403
Asian, non-Hispanic 631 707 789 682 692 684 657 651 640 756 807 729 883
<!DOCTYPE html>
<!-- This was one of Scott Murray's Knight D3 course files, modified a bit. -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading CSV Data with D3</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<h1>Loading CSV and JSON with D3.</h1>
<p>Look in the console for logging info after the data loads.</p>
<p>If you open the console after loading, you'll need to reload the page.</p>
<p>We're printing the contents of the files to the screen here, just to show they load.
<p class="csvdata"></p>
<script>
//Load in contents of CSV file
d3.csv("college_race_2000_2012.csv", function(data1) {
//Now CSV contents have been transformed into
//an array of JSON objects.
console.log("The first file is csv...")
//Log 'data' to the console, for verification.
console.log(data1);
$("p.csvdata").text(JSON.stringify(data1));
});
// Notice that the objects look the same. d3.csv() parses rows as objects.
// Also this is a good point to talk about scope and breakpoints.
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment