Skip to content

Instantly share code, notes, and snippets.

@galkamax

galkamax/index.html

Created March 17, 2017 16:04
Show Gist options
  • Save galkamax/c19642317ac807fe13a99bbcf2eaaa75 to your computer and use it in GitHub Desktop.
Save galkamax/c19642317ac807fe13a99bbcf2eaaa75 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Animated Circle Example
Raw
index.html
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
<script>
var svg = d3.select("svg").attr("width",960).style("height",600);
var mycircle = svg.append("circle")
.attr("cx",100)
.attr("cy",100)
.style("fill","blue")
.attr("r",20)
mycircle // wait 2 seconds, then slowly change the circle's properties
.transition()
.duration(3000)
.delay(2000)
.attr("cx",600)
.attr("cy",150)
.style("fill","orange")
.attr("r",50);
mycircle // click the circle to set it properties at random
.on("click",function(){
d3.select(this)
.transition()
.duration(3000)
.attr("cx",Math.random()*700)
.attr("cy",Math.random()*300)
.style("fill",d3.rgb( Math.random()*255,Math.random()*255,Math.random()*255 ))
.attr("r",Math.random()*100);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment