JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<script src="https://d3js.org/d3.v5.js"></script>

JavaScript

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

var data = [
  { x: 300, y: 50, width: 25, height: 50 }
];

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d) { return d.x; })
  .attr("y", function(d) { return d.y; })
  .attr("width", function(d) { return d.width; })
  .attr("height", function(d) { return d.height; })
  .style("fill", "blue")
  .transition()
    .duration(3000)
    .attr("x", function(d) { return 200  })
    .attr("y", function(d) { return 100 })
    .attr("width", function(d) { return 300 - d.width; })
    .attr("height", function(d) { return 200; });