Skip to content

Instantly share code, notes, and snippets.

@milkbread

milkbread/index.html

Last active December 19, 2015 11:59
Show Gist options
  • Save milkbread/5951675 to your computer and use it in GitHub Desktop.
Save milkbread/5951675 to your computer and use it in GitHub Desktop.
Download ZIP
HTML: D3: A moving circle - Testing animations with d3 I
Raw
readme.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Testing animations</title>
<meta charset="utf-8" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<style>
#info {
background-color:#c8ba09;
</style>
</head>
<body>
<div id="info"style="width: 960px;"></div>
<script>
var minArea, curColor;
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 300);
var circles = svg.append('circle').attr('cx',50).attr('cy',50).attr('r',20).style('fill','rgb(255,0,255)')
animation();
function animation() {
svg.transition()
.duration(7500)
.tween("precision", function() {
var area = d3.interpolateRound(50, 600);
var color = d3.interpolateRgb('rgb(255,0,255)', 'rgb(0,255,0)');
return function(t) {
minArea = area(t);
curColor = color(t)
render();
};
})
.transition()
.duration(7500)
.tween("precision", function() {
var area = d3.interpolateRound(600, 50);
var color = d3.interpolateRgb('rgb(0,255,0)', 'rgb(255,0,255)');
return function(t) {
minArea = area(t);
curColor = color(t)
render();
};
})
.transition()
.duration(2500)
.each("end", animation);
}
function render() {
var n = 0;
var color = 'rgb(' + curColor.r + ',' + curColor.g + ',' + curColor.b + ')'
circles.attr('cx',minArea).style('fill',color);
console.log(color)
//text.text(formatArea(minArea) + "px² / " + formatPercent(n / m));
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment