JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class="chart"></div>

CSS

svg {
  border: red dashed 1px;
}

JavaScript

var cData = [{ //left section begins
    "x_axis": 130,
    "y_axis": 60,
    "radius": 18,
    "colour": "red"
  }, {
    "x_axis": 120,
    "y_axis": 60,
    "radius": 20,
    "colour": "#d9e3d6",
    "label": "Lorem ipsum"
  }, {
    "x_axis": 90,
    "y_axis": 170,
    "radius": 48,
    "colour": "red"
  },
  {
    "x_axis": 80,
    "y_axis": 170,
    "radius": 50,
    "colour": "#d9e3d6",
    "label": "Lorem ipsum2"
  }, {
    "x_axis": 130,
    "y_axis": 280,
    "radius": 28,
    "colour": "red"
  },
  {
    "x_axis": 120,
    "y_axis": 280,
    "radius": 30,
    "colour": "#d9e3d6",
    "label": "Lorem ipsum3"
  }, //right section begins
  {
    "x_axis": 440,
    "y_axis": 60,
    "radius": 20,
    "colour": "#d9e3d6"
  },
  {
    "x_axis": 480,
    "y_axis": 170,
    "radius": 50,
    "colour": "#d9e3d6"
  },
  {
    "x_axis": 440,
    "y_axis": 280,
    "radius": 30,
    "colour": "#d9e3d6"
  }, //center
  {
    "x_axis": 280,
    "y_axis": 170,
    "radius": 80,
    "colour": "#d9e3d6"
  }
];

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

var circles = svg.selectAll("circle")
  .data(cData)
  .enter()
  .append("circle");
  
circles
  .attr("cx", function(d) {
    return d.x_axis
  })
  .attr("cy", function(d) {
    return d.y_axis
  })
  .attr("r", function(d) {
    return d.radius
  })
  .attr("fill", function(d) {
    return d.colour
  })
  .attr("stroke", "orange")
  .attr("stroke-width", 1);