JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

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

CSS

path {
  fill: none;
  stroke: #999;
}

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"
  }
];
//create SVG
var svg = d3.select(".chart")
  .append("svg")
  .attr("width", 800)
  .attr("height", 900);

var lineGenerator = d3.line()
  .curve(d3.curveCardinal);

var points = [
  [100, 60],
  [75, 90],
  [65, 120],
  [60, 170],
  [65, 210],
  [75, 250],
  [100, 280]
];

var pathData = lineGenerator(points);

d3.select('svg')
  .append('path')
  .attr('d', pathData);

//create bigger circles
var elemEnter = svg.selectAll("g")
  .data(cData)
  .enter()
  .append("g");

var circle = elemEnter
  .append("circle")
  .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);

elemEnter.append("text")
  .attr("dx", function(d) {
    return d.x_axis - d.radius + 2
  })
  .attr("dy", function(d) {
    return d.y_axis
  })
  .text(function(d) {
    return d.label
 ...