Created
December 13, 2011 19:34
-
-
Save benjchristensen/1473535 to your computer and use it in GitHub Desktop.
Animated Circle using d3.js
This file contains hidden or 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
| <html> | |
| <head> | |
| <title>Animated Circle Using d3.js</title> | |
| <script src="http://mbostock.github.com/d3/d3.v2.js"></script> | |
| </head> | |
| <body> | |
| <table> | |
| <tr> | |
| <td> | |
| <b>Starting Value:</b> 100 <b>Starting Percentage:</b> 0 <b>Animation:</b> false | |
| <div id="circle1a" class="aCircle" style="width:180px; height:180px;"></div> | |
| </td> | |
| <td> | |
| <b>Starting Value:</b> 200 <b>Starting Percentage:</b> 50 <b>Animation:</b> false | |
| <div id="circle1b" class="aCircle" style="width:180px; height:180px;"></div> | |
| </td> | |
| <tr> | |
| <td> | |
| <b>Starting Value:</b> 100 <b>Starting Percentage:</b> 0 <b>Animation:</b> true | |
| <br> | |
| <b>Transition:</b> 1000ms <b>Update Frequency:</b> 1000ms | |
| <div id="circle2" class="aCircle" style="width:350px; height:350px;"></div> | |
| </td> | |
| <td> | |
| <b>Starting Value:</b> 100 <b>Starting Percentage:</b> 0 <b>Animation:</b> true | |
| <br> | |
| <b>Transition:</b> 400ms <b>Update Frequency:</b> 400ms | |
| <div id="circle3" class="aCircle" style="width:350px; height:350px;"></div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <b>Starting Value:</b> 60 <b>Starting Percentage:</b> 45 <b>Animation:</b> false | |
| <div id="circle4" class="aCircle" style="width:350px; height:120px;"></div> | |
| </td> | |
| <td> | |
| <b>Starting Value:</b> 250 <b>Starting Percentage:</b> 75 <b>Animation:</b> false | |
| <div id="circle5" class="aCircle" style="width:350px; height:120px;"></div> | |
| </td> | |
| <tr> | |
| </table> | |
| <script> | |
| function displayCircleExample(id, startingSizeDataPoint, startingColorPercentage, animate, updateDelay, transitionDelay) { | |
| /* circle visualization settings that use a data point between 0-400 to determine x, y and radius */ | |
| var circleRadius = d3.scale.linear().domain([0, 400]).range(["5", 125]); | |
| // radius can also be done using pow() instead of linear() | |
| //var circleRadius = d3.scale.pow().exponent(0.5).domain([0, 400]).range(["5", maxRadiusForCircle]); | |
| /* | |
| * X and Y axis are set to dynamically change so when it animates the circle slightly moves up/down, left/right | |
| * so that as the radius changes the location moves to fit better | |
| */ | |
| var circleYaxis = d3.scale.linear().domain([0, 400]).range(["30%", "50%"]); | |
| var circleXaxis = d3.scale.linear().domain([0, 400]).range(["30%", "50%"]); | |
| /* "stop light" color range for circle from green through yellow, orange and red using 0-100 as the range */ | |
| var circleColorRange = d3.scale.linear().domain([0,33,67,100]).range(["green", "#FFCC00", "#FF9900", "red"]); | |
| // create an SVG element inside the #graph div that fills 100% of the div | |
| var vis = d3.select(id).append("svg:svg").attr("width", "100%").attr("height", "100%"); | |
| /* add a circle -- we don't use the data point, as we will set it manually to animate it, so just passing in [1] */ | |
| var circle = vis.selectAll("circle").data([1]).enter().append("svg:circle"); | |
| /* setup the initial styling and sizing of the circle */ | |
| circle | |
| .style("fill", circleColorRange(startingColorPercentage)) | |
| .attr("cx", circleXaxis(startingSizeDataPoint)) | |
| .attr("cy", circleYaxis(startingSizeDataPoint)) | |
| .attr("r", circleRadius(startingSizeDataPoint)); | |
| // create a simple data array | |
| var dataA = [80, 100, 105, 95, 130, 150, 170, 160, 250, 275, 255, 275, 320, 350, 320, 350, 310, 280, 310, 305, 315, 295, 275, 265, 240]; | |
| var dataB = [0, 3, 6, 2, 7, 9, 3, 5, 8, 14, 16, 26, 36, 45, 40, 38, 52, 67, 58, 78, 85, 88, 76, 89, 98, 97, 92, 86, 75, 34, 25, 18, 12, 6, 3, 0, 0]; | |
| function redraw(dataValue, colorPercentage) { | |
| // update the circle | |
| d3.selectAll(id).selectAll("circle") | |
| .transition() | |
| .duration(transitionDelay) | |
| .attr("cy", circleYaxis(dataValue)) | |
| .attr("cx", circleXaxis(dataValue)) | |
| .attr("r", circleRadius(dataValue)) | |
| .style("fill", circleColorRange(colorPercentage)); | |
| } | |
| if(animate) { | |
| setInterval(function() { | |
| var vA = dataA.shift(); // remove the first element of the array | |
| dataA.push(vA); // add a new element to the array (we're just taking the number we just shifted off the front and appending to the end) | |
| var vB = dataB.shift(); // remove the first element of the array | |
| dataB.push(vB); // add a new element to the array (we're just taking the number we just shifted off the front and appending to the end) | |
| redraw(vA, vB); | |
| }, updateDelay); | |
| } | |
| } | |
| displayCircleExample("#circle1a", 100, 0, false, 1000, 1000); | |
| displayCircleExample("#circle1b", 200, 50, false, 1000, 1000); | |
| displayCircleExample("#circle2", 100, 0, true, 1000, 1000); | |
| displayCircleExample("#circle3", 100, 0, true, 400, 400); | |
| displayCircleExample("#circle4", 60, 45, false, 1000, 1000); | |
| displayCircleExample("#circle5", 250, 75, false, 1000, 1000); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
View at: http://bl.ocks.org/1473535
Blog: http://benjchristensen.com/2011/12/13/animated-circle-using-d3-js/