JSFiddle - React, Tailwind, and code Playground

by Andy Jones

JavaScript

var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 600)
                                    .attr("height",600);

var circle = svgContainer.append("circle")
                         .attr("cx", 30)
                         .attr("cy", 30)
                         .attr("r", 20)
                         .style("fill", "red");

var square = svgContainer.append("rect")
                         .attr("x", 60)
                         .attr("y", 60)
                         .attr("width", 30)
                         .attr("height", 30)
                         .style("fill", "blue");

var ellipse = svgContainer.append("ellipse")
                          .attr("cx", 120)
                          .attr("cy", 120)
                          .attr("rx", 30)
                          .attr("ry", 15)
                          .style("fill", "green");

square.transition().attr("x", 300)
                   .attr("y", 300)
                   .ease("elastic")
                   .duration(2000)
                   .each("end", function() {
                       d3.select(this).remove(); 
                   });