JSFiddle - React, Tailwind, and code Playground

by emepyc

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="mydiv"></div>

JavaScript

var x_end = 300;
var x_curr = 100;

var interpolator = d3.interpolateNumber(x_curr, x_end);
var ease = d3.ease("elastic");

var circle = d3.select("#mydiv")
    .append("svg")
    .append("circle")
    .attr("cx", x_curr)
    .attr("cy", 150)
    .attr("r", 10)
    .attr("fill", "red");


var xx = 0;
d3.timer(function(d){
    circle
        .attr("cx", interpolator(ease(xx)));
    xx += 0.01
    return xx > 1;
});