Simple transitions with D3.js

This example shows how use the transitions with D3.js. The transitions used are movement, resizing and color change of SVG objects. The examples are based on the ones found at blog.visual.ly

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Examples of D3 transitions</title>
		<style>
			svg {
				border: 1px solid black;
			}
			fieldset {
				min-width: 0; 
				width: 50%; 
			}
		</style>
		<script src="https://d3js.org/d3.v3.min.js"></script>
		<script>				
				function removeTransitions(){
					d3.select("path").transition().attr("d", "M0,0 l50,13 l-25,25 Z").attr("transform", "translate(350, 75)").style("fill", "white");
					d3.select("rect").transition().attr("transform", "translate(0)").attr("width", 50).attr("height", 50).style("fill", "white");
					d3.select("circle").transition().attr("transform", "translate(0)").attr("r", 25).style("fill", "white");
				}
				
				function runTransitions(){
					
					var moveCheckboxSelected = d3.select("#move").property("checked");
					var sizeCheckboxSelected = d3.select("#size").property("checked");
					var colorCheckboxSelected = d3.select("#color").property("checked");
					
					if(!moveCheckboxSelected && !sizeCheckboxSelected && !colorCheckboxSelected){
						return;
					}
					
					var pathTransition = d3.select("path").transition();
					var rectTransition = d3.select("rect").transition();
					var circleTransition = d3.select("circle").transition();
					
					if(moveCheckboxSelected){
						pathTransition.attr("transform", "translate(250, 50)").duration(1000);
						rectTransition.attr("transform", "translate(150)").duration(1000);
						circleTransition.attr("transform", "translate(150)").duration(1000);
					}
					if(sizeCheckboxSelected){
						pathTransition.attr("d", "M0,0 l100,25 l-50,50 z").duration(1000);
						rectTransition.attr("width", "100").attr("height", "100").duration(1000);
						circleTransition.attr("r", "50").duration(1000);
					}
					if(colorCheckboxSelected){
						pathTransition.style("fill", "red").duration(1000);
						rectTransition.style("fill", "blue").duration(1000);
						circleTransition.style("fill", "green").duration(1000);
					}
				}
		</script>
	</head>
	<body>
		<div id="simpleShapes" width="50%" height="300px">
			<svg width="50%" height="300">
				<path d="M0,0 l50,13 l-25,25 Z" stroke="red" fill="white" transform="translate(350,75)" />
				<rect x="50" y="75" width="50" height="50" stroke="blue" fill="white" />
				<circle cx="225" cy="75" r="25" stroke="green" fill="white" />
			</svg>
			<div width="50%">
				<fieldset>
					<legend>Select the transition to apply</legend>
					<input id="move" type="checkbox" name="move" value="move" />Move<br />
					<input id="size" type="checkbox" name="size" value="size" />Size<br />
					<input id="color" type="checkbox" name="color" value="color" />Color<br /><br />
					<button onclick="runTransitions()">Run transitions</button>
					<button onclick="removeTransitions()">Remove transitions</button>
				</fieldset>
			</div>
		</div>
	</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js