Skip to content

Instantly share code, notes, and snippets.

@matt-erhart

matt-erhart/.block

Last active December 9, 2016 20:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save matt-erhart/4bec08a2e0e175c8057284f264af5eac to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save matt-erhart/4bec08a2e0e175c8057284f264af5eac to your computer and use it in GitHub Desktop.
Download ZIP
Chained Transitions
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
.append('g')
var data = d3.range(200).map(d => [Math.random()*d,Math.random()*d ])
var xScale = d3.scaleLinear().domain(d3.extent(data.map(row=>row[0]))).range([0,960])
var yScale = d3.scaleLinear().domain(d3.extent(data.map(row=>row[1]))).range([500,0])
svg.selectAll("circle").data(data).enter().append("circle")
.attr('cx',d => xScale(d[0]))
.attr('cy',d => yScale(d[1]))
.attr('r', 11)
.attr('fill', 'black')
d3.selectAll("circle").transition()
.delay(function(d, i) { return i * 25; })
.on("start", function repeat() {
d3.active(this)
.attr('cx',(d,i)=>xScale(d[0]/2))
.attr('r',22)
.style("fill", "blue")
.duration(1681)
.transition()
.attr('cx',(d,i)=>xScale(d[0]+d[0]/2))
.style("fill", "yellow")
.attr('r',5)
.duration(1000)
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment