Skip to content

Instantly share code, notes, and snippets.

Last active Mar 30, 2017
What would you like to do?
D3 Transition Example - Maptime Seattle
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<!-- using D3 version 4-->
<script src=""></script>
<!-- could add CSS inside the <style> tags -->
<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>
// use d3 to add a new button in the body"body")
.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 ="body"); // select the html element with <body>
var svg ="svg"); // select the <svg> that lies within the <body>
var circle = svg.selectAll("circle");
var myData = [ 20, 60, 100 ];
circle =
.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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment