Skip to content

Instantly share code, notes, and snippets.

@benjchristensen
Created December 13, 2011 19:34
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save benjchristensen/1473535 to your computer and use it in GitHub Desktop.
Animated Circle using d3.js
<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 &nbsp;&nbsp;<b>Starting Percentage:</b> 0 &nbsp;&nbsp;<b>Animation:</b> false
<div id="circle1a" class="aCircle" style="width:180px; height:180px;"></div>
</td>
<td>
<b>Starting Value:</b> 200 &nbsp;&nbsp;<b>Starting Percentage:</b> 50 &nbsp;&nbsp;<b>Animation:</b> false
<div id="circle1b" class="aCircle" style="width:180px; height:180px;"></div>
</td>
<tr>
<td>
<b>Starting Value:</b> 100 &nbsp;&nbsp;<b>Starting Percentage:</b> 0 &nbsp;&nbsp;<b>Animation:</b> true
<br>
<b>Transition:</b> 1000ms &nbsp;&nbsp;<b>Update Frequency:</b> 1000ms
<div id="circle2" class="aCircle" style="width:350px; height:350px;"></div>
</td>
<td>
<b>Starting Value:</b> 100 &nbsp;&nbsp;<b>Starting Percentage:</b> 0 &nbsp;&nbsp;<b>Animation:</b> true
<br>
<b>Transition:</b> 400ms &nbsp;&nbsp;<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 &nbsp;&nbsp;<b>Starting Percentage:</b> 45 &nbsp;&nbsp;<b>Animation:</b> false
<div id="circle4" class="aCircle" style="width:350px; height:120px;"></div>
</td>
<td>
<b>Starting Value:</b> 250 &nbsp;&nbsp;<b>Starting Percentage:</b> 75 &nbsp;&nbsp;<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>
@benjchristensen
Copy link
Author

Updated the d3.js link to http://mbostock.github.com/d3/d3.v2.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment