Skip to content

Instantly share code, notes, and snippets.

@Ryshackleton
Last active March 30, 2017 06:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Ryshackleton/3edae1f5a5ed46c946c40947ee893f5a to your computer and use it in GitHub Desktop.
Save Ryshackleton/3edae1f5a5ed46c946c40947ee893f5a to your computer and use it in GitHub Desktop.
D3 Transition Example - Maptime Seattle
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- using D3 version 4-->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- could add CSS inside the <style> tags -->
<style>
</style>
</head>
<body>
<svg width="400" height="120">
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>
<script>
// use d3 to add a new button in the body
d3.select("body")
.append("button")
.on("click", myFunction) // link the myFunction function to the button click
.text("Run My Function"); // add some text to the button
function myFunction() {
// add your transitioning code here
var body = d3.select("body"); // select the html element with <body>
var svg = body.select("svg"); // select the <svg> that lies within the <body>
var circle = svg.selectAll("circle");
var myData = [ 20, 60, 100 ];
circle = circle.data(myData)
.transition()
.duration(1500) // all attributes after the .tansition() get transitioned TO
.attr("cy", function(d) {
return d;
})
.style("fill", "darkred")
.attr("r", 20)
.attr("cy", function(d) {
return d;
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment