D3 Examples - Simple transitions with D3.js

xxxxxxxxxx
 
<!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>
    