Skip to content

Instantly share code, notes, and snippets.

@d3noob d3noob/index.html
Created Dec 27, 2016

Embed
What would you like to do?
Simple transition in v4

This is a demonstration of a simple use of a transition using d3.js v4.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("body") // Select the body element
.append("svg") // Append an SVG element to the body
.attr("width", 960) // make it 960 pixels wide
.attr("height", 500) // make it 500 pixels high
.append("circle") // append a cicle to the svg
.attr("fill", "blue") // fill the circle with 'blue'
.attr("r", 20) // set the radius to 10 pixels
.attr('cx', 40) // position the circle at 40 on the x axis
.attr('cy', 250) // position the circle at 250 on the y axis
.transition() // apply a transition
.duration(4000) // apply it over 4000 milliseconds
.attr('cx', 920); // new horizontal position at 920 on x axis
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.