Skip to content

Instantly share code, notes, and snippets.

@smbriones

smbriones/README.md Secret

Last active August 29, 2015 14:17
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 smbriones/5e192b6d249bdecb8147 to your computer and use it in GitHub Desktop.
Save smbriones/5e192b6d249bdecb8147 to your computer and use it in GitHub Desktop.
Download ZIP
Data Visualization and Infographics with D3: Module 2
Raw
README.md

EXERCISE: Create a web page that includes one SVG image. Using D3, load your data into the page and log that data to the console. (This will not yet be a visualization; this is just evidence that the data is being loaded into the page and D3 is parsing it correctly.) Post the bl.ocks.org link to your working page in the forums.

Raw
commute.csv
Method Time Distance
Bus 15 to 30 minutes 1-5 miles
Bus 15 to 30 minutes 5-10 miles
Bus 30 minutes to 1 hour 5-10 miles
CTA 15 to 30 minutes 1-5 miles
CTA 15 to 30 minutes 1-5 miles
CTA 15 to 30 minutes 1-5 miles
CTA 15 to 30 minutes 1-5 miles
CTA 15 to 30 minutes 1-5 miles
CTA 30 minutes to 1 hour 1-5 miles
CTA 30 minutes to 1 hour 1-5 miles
CTA 1+ Hour 10-30 miles
CTA 1+ Hour 10-30 miles
CTA 15 to 30 minutes 5-10 miles
CTA 30 minutes to 1 hour 5-10 miles
CTA 30 minutes to 1 hour 5-10 miles
CTA 30 minutes to 1 hour 5-10 miles
CTA 30 minutes to 1 hour 5-10 miles
CTA 30 minutes to 1 hour 5-10 miles
CTA 30 minutes to 1 hour 5-10 miles
CTA 30 minutes to 1 hour 5-10 miles
CTA 30 minutes to 1 hour 5-10 miles
CTA 30 minutes to 1 hour 5-10 miles
CTA 30 minutes to 1 hour 5-10 miles
Cycle Less than 15 minutes 1-5 miles
Cycle 15 to 30 minutes 1-5 miles
Cycle 15 to 30 minutes 1-5 miles
Cycle Less than 15 minutes 1-5 miles
Cycle Less than 15 minutes 1-5 miles
Cycle Less than 15 minutes 1-5 miles
Cycle 30 minutes to 1 hour 5-10 miles
Drive 30 minutes to 1 hour 5-10 miles
Metra 30 minutes to 1 hour 10-30 miles
Metra 1+ Hour 10-30 miles
Metra 1+ Hour 10-30 miles
Metra 1+ Hour 10-30 miles
Metra 30 minutes to 1 hour 10-30 miles
Metra 30 minutes to 1 hour 10-30 miles
Metra 30 minutes to 1 hour 10-30 miles
Metra 30 minutes to 1 hour 10-30 miles
Metra 1+ Hour More than 30 miles
Metra 1+ Hour More than 30 miles
Metra 1+ Hour More than 30 miles
Metra 1+ Hour More than 30 miles
Metra 1+ Hour More than 30 miles
Walk 15 to 30 minutes 1-5 miles
Walk 15 to 30 minutes 1-5 miles
Walk 15 to 30 minutes 1-5 miles
Walk 15 to 30 minutes 1-5 miles
Walk Less than 15 minutes 1-5 miles
Walk Less than 15 minutes 1-5 miles
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stephanie Briones</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<style>
svg {
margin: 8em 16em;
}
</style>
<svg width="427px" height="249px">
<rect fill="#50E3C2" x="43" y="0" width="249" height="249"></rect>
<rect fill="#4990E2" x="168" y="48" width="259" height="98"></rect>
<rect fill="#4990E2" x="0" y="133" width="86" height="86"></rect>
</svg>
<script type="text/javascript">
//Load in contents of CSV file
d3.csv("commute.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment