JSFiddle - React, Tailwind, and code Playground

by Ryan

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
Duration: <input id="duration" value="500"/>
<br/><br/>
<select id="select">
    <option>linear</option>
    <option>quad</option>
    <option>quad-in</option>
    <option>cubic</option>
    <option>cubic-out</option>
    <option>sin</option>
    <option>exp</option>
    <option>exp-out</option>
    <option>circle</option>
    <option>elastica</option>
    <option>back</option>
    <option>bounce</option>
</select>
<button>Go!</button>
<br/><br/>
<div id="chart"></div>

CSS

body { font: 10px sans-serif; }
svg { border: 1px solid #eee; }
.shape {
    stroke: black;
    stroke-width: 1px;
    fill: steelblue;
}
rect.shape {
    shape-rendering: crispEdges;
}

JavaScript

var margin = 20,
    width = 400 - 2*margin,
    height = 200 - 2*margin;

var scale = d3.scale.linear().range([0, width]).domain([0, 20]);

var g = d3.select("div#chart").append("svg")
    .attr("width", width + 2*margin)
    .attr("height", height + 2*margin)
    .append("g")
        .attr("transform", "translate(" + margin + "," + margin + ")");

var circle = g.append('circle').attr('class', 'shape')
    .attr('cx', scale(5))
    .attr('cy', scale(5))
    .attr('r', 10);

var rect = g.append('rect').attr('class', 'shape')
    .attr('x', scale(15.5))
    .attr('y', scale(4.5))
    .attr('width', scale(1))
    .attr('height', scale(1));

var redraw = function(){
    var select = document.getElementById('select');
    var option = select.options[select.selectedIndex].value;
    var duration = document.getElementById('duration').value;
    
    rect.transition().ease(option).duration(duration)
        .attr('height', scale(9))
        .attr('y', scale(0.5))
        .transition().duration(250)
        .transition().ease(option).duration(duration)
            .attr('height', scale(1))
            .attr('y', scale(4.5));
    
    circle.transition().ease(option).duration(duration)
        .attr('r', 50)
        .transition().duration(250)
        .transition().ease(option).duration(duration)
            .attr('r', 10);
    
};

d3.select("button").on("click", function(d){
    redraw();
});