This is tweaked code building upon the examples given by Scott Murray @alignedleft
Last active
September 20, 2015 16:12
-
-
Save jalapic/141a6f2c8a37fe01ed53 to your computer and use it in GitHub Desktop.
Simple scatter transition
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <title>D3: Scatterplot!</title> | |
| <script type="text/javascript" src="d3.js"></script> | |
| <style type="text/css"> | |
| body { | |
| background-color: #ccc; | |
| } | |
| .buttonContainer { | |
| margin: 10px; | |
| } | |
| svg { | |
| background-color: white; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| } | |
| circle.special { | |
| stroke: black; | |
| stroke-width: 5; | |
| fill: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="buttonContainer"> | |
| <input type="button" value="Randomize"> | |
| </div> | |
| <script type="text/javascript"> | |
| //Width and height | |
| var w = 500; | |
| var h = 300; | |
| var padding = 40; | |
| //Dynamic, random dataset | |
| var dataset = []; //Initialize empty array | |
| var numDataPoints = 50; //Number of dummy data points to create | |
| var maxRange = Math.random() * 1000; //Max range of new values | |
| for (var i = 0; i < numDataPoints; i++) { //Loop numDataPoints times | |
| var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer | |
| var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer | |
| dataset.push([newNumber1, newNumber2]); //Add new number to array | |
| } | |
| //Create scale functions | |
| var xScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d) { return d[0]; })]) | |
| .range([padding, w - padding]); | |
| var yScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d) { return d[1]; })]) | |
| .range([h - padding, padding]); | |
| //Define X axis | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom") | |
| .ticks(5); | |
| //Define Y axis | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| .ticks(5); | |
| //Create SVG element | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| //Create circles | |
| svg.append("g") | |
| .attr("id", "circles") | |
| .selectAll("circle") | |
| .data(dataset) | |
| .enter() | |
| .append("circle") | |
| // .attr("class", "special") | |
| .classed("special", function(d,i){ | |
| if(i==0) {return true;} | |
| else {return false;} | |
| }) | |
| .attr("cx", function(d) { | |
| return xScale(d[0]); | |
| }) | |
| .attr("cy", function(d) { | |
| return yScale(d[1]); | |
| }) | |
| .attr("r", 4) | |
| .attr("fill", function(d) { | |
| if(xScale(d[0]) < w/2) | |
| return "#0043ff" | |
| else { return "#FF0000"} | |
| } | |
| ); | |
| //Create X axis | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + (h - padding + 5) + ")") | |
| .call(xAxis); | |
| //Create Y axis | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + (padding - 5) + ",0)") | |
| .call(yAxis); | |
| //On click, update with new data | |
| d3.select("input") | |
| .on("click", function() { | |
| //New values for dataset | |
| var numValues = dataset.length; //Count original length of dataset | |
| var maxRange = Math.random() * 1000; //Max range of new values | |
| dataset = []; //Initialize empty array | |
| for (var i = 0; i < numValues; i++) { //Loop numValues times | |
| var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer | |
| var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer | |
| dataset.push([newNumber1, newNumber2]); //Add new number to array | |
| } | |
| //Update scale domains | |
| xScale.domain([0, d3.max(dataset, function(d) { return d[0]; })]); | |
| yScale.domain([0, d3.max(dataset, function(d) { return d[1]; })]); | |
| //Update all circles | |
| svg.selectAll("circle") | |
| .data(dataset) | |
| .transition() | |
| .duration(2000) | |
| .attr("cx", function(d) { | |
| return xScale(d[0]); | |
| }) | |
| .attr("cy", function(d) { | |
| return yScale(d[1]); | |
| }) | |
| .attr("fill", function(d) { | |
| if(xScale(d[0]) < w/2) | |
| return "#0043ff" | |
| else { return "#FF0000"} | |
| }) | |
| ; | |
| //Update X axis | |
| svg.select(".x.axis") | |
| .transition() | |
| .duration(2000) | |
| .call(xAxis); | |
| //Update Y axis | |
| svg.select(".y.axis") | |
| .transition() | |
| .duration(2000) | |
| .call(yAxis); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment