Last active
March 21, 2016 21:12
-
-
Save mjfoster83/b11c50b5f61ab1e9f51d to your computer and use it in GitHub Desktop.
D3 Transitioning Scatterplot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| city | rats | coffee | rats2 | coffee2 | |
|---|---|---|---|---|---|
| Somerville | 60 | 40 | 40 | 60 | |
| Cambridge | 30 | 90 | 80 | 100 | |
| Boston | 90 | 120 | 10 | 30 | |
| Brookline | 40 | 50 | 60 | 30 | |
| Chelsea | 10 | 10 | 100 | 120 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3 Demo: Making a scatterplot with SVG</title> | |
| <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <style type="text/css"> | |
| #main { | |
| margin-top: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button id="start">Transition</button> | |
| <button id="reset">Reset</button> | |
| <div id="main"></div> | |
| <script type="text/javascript"> | |
| var ratData = []; | |
| d3.csv("coffee_rodents.csv", function(d) { | |
| return { | |
| city : d.city, | |
| rats : +d.rats, | |
| coffee : +d.coffee, | |
| rats2 : +d.rats2, | |
| coffee2 : + d.coffee2 | |
| }; | |
| }, function(error, rows) { | |
| ratData = rows; | |
| console.log(ratData); | |
| createVisualization(); | |
| }); | |
| function createVisualization(){ | |
| //Width and height | |
| var w = 150; | |
| var h = 150; | |
| //Create SVG element | |
| var svg = d3.select("#main") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .attr("style", "outline: thin solid black;"); | |
| var circle = svg.selectAll("circle") | |
| .data(ratData) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d) { | |
| return d.rats; | |
| }) | |
| .attr("cy", function(d) { | |
| return d.coffee; | |
| }) | |
| .attr("r", 5); | |
| d3.select("#start").on("click", function() { | |
| circle | |
| .transition() | |
| .attr("cx", function(d) { | |
| return d.rats2; | |
| }) | |
| .attr("cy", function(d) { | |
| return d.coffee2; | |
| }) | |
| }); | |
| d3.select("#reset").on("click", function() { | |
| circle | |
| .transition() | |
| .attr("cx", function(d) { | |
| return d.rats; | |
| }) | |
| .attr("cy", function(d) { | |
| return d.coffee; | |
| }) | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment