JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

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

CSS

.chart {
      margin: 0;
      height: 500px;
    }

    svg {
      height: 100%;
      width: 100%;
      border: green dashed 1px;
    }

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

JavaScript

function createChart() {
      //first check if svg is already in DOM, remove
      var svgElem = document.querySelectorAll('svg')[0];
      if (svgElem) svgElem.remove();

      var svg = d3.select('.chart').append('svg');
      var el = document.querySelectorAll('svg')[0],
        w = el.getClientRects()[0].width,
        h = el.getClientRects()[0].height,
        jsonData = [ //left circles
          {
            x: ((3 / 8) * w) + 15,
            y: h / 4,
            r: 15,
            label: '',
            colour: 'red'
          },
          {
            x: (3 / 8) * w,
            y: h / 4,
            r: 20,
            label: '+10%',
            colour: '#DAF7A6',
            title: '#Title'
          },
          {
            x: (w / 3) + 15,
            y: h / 2,
            r: 45,
            label: '',
            colour: 'red'
          },
          {
            x: w / 3,
            y: h / 2,
            r: 50,
            label: '+50%',
            colour: '#DAF7A6',
            title: '#Title1'
          },
          {
            x: ((3 / 8) * w) + 15,
            y: (3 / 4) * h,
            r: 25,
            label: '',
            colour: 'red'
          },
          {
            x: (3 / 8) * w,
            y: (3 / 4) * h,
            r: 30,
            label: '+30%',
            colour: '#DAF7A6',
            title: '#Title2'
          },
          //center circles
          {
            x: w / 2,
            y: h / 2,
            r: 80,
            label: '#Oppotunity',
            colour: '#DAF7A6'
          },
          //right circles
          {
            x: (5 / 8) * w,
            y: h / 4,
            r: 20,
            label: '+10%',
            colour: '#DAF7A6',
            title: '#Title3'
          },
          {
            x: (2 / 3) * w,
            y: h / 2,
            r: 50,
            label: '+50%',
            colour: '#DAF7A6',
            title: '#Title4'
          },
          {
            x: (5 / 8) * w,
 ...