Skip to content

Instantly share code, notes, and snippets.

@kent37

kent37/index.html

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

  • Select an option

    Learn more about clone URLs
  • Save kent37/670e5dbac335d68415fb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kent37/670e5dbac335d68415fb to your computer and use it in GitHub Desktop.
Download ZIP
Visualization with D3 Homework 2
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>
<style type="text/css">
svg {
background-color: #ddddff;
}
</style>
</head>
<body>
<p>Not much to see here; try looking in the console! Oh, and open this in its own window!</p>
<svg width='500' height='300'>
<circle cx="250" cy="150" r="100" fill="red"></circle>
<circle cx='220' cy='110' r='10' fill='black' />
<circle cx='300' cy='110' r='10' fill='black' />
<polyline fill="none" stroke="black" points="250,120 270,160 240,160" stroke-width="5"></polyline>
<path d="M200,170 A50,20 0 1,0 320,190" style="stroke:black; stroke-width:5; fill:none;"></path>
<text x="250" y="280" fill="charcoal" font-size="18" font-weight="bold" font-family="Helvetica" text-anchor='middle'>SVG is fun!</text>
</svg>
<script type="text/javascript">
//Load in contents of CSV file
d3.csv("https://gist.githubusercontent.com/kent37/313c30a0fda288f994a2/raw/0e489d6d0cbd877d4fec6d54b6ec9bc60839d4b4/CambridgeDevelopment.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);
});
d3.select('circle')
.transition().duration(5000).attr('fill', 'yellow')
.transition().duration(5000).attr('fill', 'red')
.each('end', function() {
d3.select('text').text('So is D3!').attr('fill', 'blue')});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment