JSFiddle - React, Tailwind, and code Playground

by gamea12

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

JavaScript

var drag = d3.behavior.drag()
  .on("drag", function(d, i) {
    d.x += d3.event.dx
    d.y += d3.event.dy
    d3.select(this).attr("transform", function(d, i) {
      return "translate(" + [d.x, d.y] + ")"
    })
  });

var w = 700;
var h = 400;

//setup svg canvas
var svg = d3.select("body")
  .append("svg:svg")
  .attr("width", w)
  .attr("height", h)
  .attr("id", "charts");

svg.append("circle")
  .attr("x", 30)
  .attr("y", 30)
  .attr("r", 20)
  .call(drag);