Skip to content

Instantly share code, notes, and snippets.

@lisawilliams
Created August 31, 2015 05:30
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 lisawilliams/221e02ec7c8afb604986 to your computer and use it in GitHub Desktop.
Save lisawilliams/221e02ec7c8afb604986 to your computer and use it in GitHub Desktop.
Module2Project
<!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>
<H2>At some point the SVG and the data will have something to do with each other...</H2>
<H4>...but not today!</h4>
<p>To see the data, look in the console.</p>
<p>In the meantime, here's an SVG.</p>
<svg width="580" height="400">
<g>
<rect fill="#fff" height="402" width="50" y="-1" x="-1"/>
</g>
<g>
<circle cx="270" cy="175" r="72" fill="#00000"/>
<path stroke="#000" id="svg_2" d="m214.2925,161.30891l41.2531,0l12.74689,-40.48917l12.74689,40.48917l41.25311,0l-33.37436,25.02167l12.74915,40.48917l-33.37479,-25.02328l-33.37425,25.02328l12.74857,-40.48917l-33.3743,-25.02167l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#fff"/>
<text font-style="italic" text-anchor="left" font-family="Georgia, Times, 'Times New Roman', serif" font-size="24" id="svg_4" y="281.83333" x="214.5" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">stay shiny</text>
</g>
</svg>
<!-- I used a tutorial I found here to make the star shape: https://www.youtube.com/watch?v=IZscW_S4HtU -->
<script type="text/javascript">
// LW: there is no way to get this data loaded into the browser except
// by viewing it via the web server/localhost.
// First, start MAMP (it will ask for the system password for the laptop)
// and then visit this url:
// http://localhost:8888/d3-class/data-vis-d3/module2/Module2Project/
// the / after localhost redirects to the /htdocs folder under /Applications
// /MAMP. So any folder within /htdocs can be accessed by going to
// http://localhost:8888/foldername where foldername = name of folder
// inside /htdocs. 8/30/15
//Load in contents of CSV file
// Changed this to my RI Education data
d3.csv("RI-Education.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>
City/Town State Latitude Longitude Kids under 3 in Early Intervention Median Household Income Population Per 100 residents
Woonsocket RI 42.002876 -71.514784 283 $30,819 41,186 0.69
Central Falls RI 41.890655 -71.392278 110 $22,628 19,376 0.57
West Warwick RI 41.703671 -71.521502 148 $39,505 29,191 0.51
Providence RI 41.823989 -71.412834 876 $26,867 178,042 0.49
New Shoreham RI 41.172137 -71.557607 5 $44,779 1,051 0.48
Pawtucket RI 41.878711 -71.382556 337 $31,775 71,148 0.47
Newport RI 41.490102 -71.312829 96 $40,669 24,672 0.39
East Greenwich RI 41.634262 -71.513044 49 $70,063 13,146 0.37
Middletown RI 41.521824 -71.283454 59 $51,075 16,150 0.37
Warwick RI 41.700101 -71.416167 300 $46,483 82,672 0.36
North Kingstown RI 41.556832 -71.453684 96 $60,027 26,486 0.36
Warren RI 41.730379 -71.282549 38 $41,285 10,611 0.36
Tiverton RI 41.625921 -71.213423 55 $49,977 15,780 0.35
North Providence RI 41.853552 -71.467664 110 $19,721 32,078 0.34
Hopkinton RI 41.461272 -71.77755 28 $52,181 8,188 0.34
Westerly RI 41.377599 -71.827287 77 $44,613 22,787 0.34
Lincoln RI 41.911012 -71.44181 70 $47,815 21,105 0.33
East Providence RI 41.813712 -71.370054 154 $39,108 47,037 0.33
Cumberland RI 41.972182 -71.406188 103 $54,656 33,506 0.31
Johnston RI 41.82052 -71.512617 88 $43,514 28,769 0.31
South Kingstown RI 41.447569 -71.524667 92 $56,325 30,639 0.3
Bristol RI 41.67711 -71.266202 68 $43,689 22,954 0.3
Burrillville RI 41.966117 -71.684725 44 $52,587 15,955 0.28
Coventry RI 41.688598 -71.564208 95 $51,987 35,014 0.27
Scituate RI 41.79645 -71.619869 28 $60,788 10,329 0.27
Cranston RI 41.779823 -71.43728 217 $44,108 80,387 0.27
West Greenwich RI 41.62855 -71.663813 16 $65,725 6,135 0.26
Glocester RI 41.904311 -71.691066 23 $57,537 9,746 0.24
Portsmouth RI 41.602324 -71.250326 39 $58,835 17,389 0.22
Charlestown RI 41.383216 -71.641874 17 $51,491 7,827 0.22
Exeter RI 41.575068 -71.535148 13 $64,452 6,425 0.2
North Smithfield RI 41.966765 -71.549507 24 $58,602 11,967 0.2
Little Compton RI 41.510103 -71.171156 7 $55,368 3,492 0.2
Barrington RI 41.74068 -71.308609 32 $74,591 16,310 0.2
Smithfield RI 41.92205 -71.54951 38 $55,621 21,430 0.18
Foster RI 41.85371 -71.758125 7 $59,673 4,606 0.15
Jamestown RI 41.496313 -71.371166 8 $63,073 5,405 0.15
Richmond RI 41.494476 -71.670836 11 $59,840 7,708 0.14
Narragansett RI 41.450084 -71.449503 22 $50,363 15,868 0.14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment