JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class='chart'></div>

JavaScript

var joints = [{
  x: 120,
  y: 60,
  r: 5
}, {
  x: 90,
  y: 170,
  r: 5
}];

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

svg.selectAll("circle")
  .data(joints)
  .enter().append("circle")
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .attr("r", function(d) {
    return d.r;
  });

var path = d3.path();
path.moveTo(120, 60);
path.arcTo(100, 85, 75, 65, 60);

svg.append("path")
  .attr("d", path.toString())
  .attr("stroke", "firebrick")
  .attr("stroke-width", 2)
  .attr("fill", "none");