d3noob/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    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.

  
## index.html
<!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>
	<!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>
No results found