JSFiddle - React, Tailwind, and code Playground

https://bl.ocks.org/larskotthoff/085bb57f710aa417af41

by Maria Karanasou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.js"></script>
<body>
  <div id="bubbles">
  </div>
</body>

CSS

circle {
  fill: rgb(31, 119, 180);
  fill-opacity: .25;
  stroke: rgb(31, 119, 180);
  stroke-width: 1px;
}

.leaf circle {
  fill: #ff7f0e;
  fill-opacity: 1;
}

.bar {
  fill: rgb(31, 119, 180);
}

text {
  font: 10px sans-serif;
}

JavaScript

var data = {
  "name": "Second Run",
  "size": 17010,
  "children": [ // false negative malicious & alerts
    {
      "name": "false negative",
      "size": 17010,
      "children": [{
        "name": "channel1",
        "size": 17010,
        "children": [ // reports
          {
            "name": "10min view",
            "size": 3938
          }, {
            "name": "day view",
            "size": 6714
          }
        ]
      }, {
        "name": "channel2",
        "size": 17010,
        "children": [{
          "name": "10min view",
          "size": 5914
        }, {
          "name": "10min view",
          "size": 3416
        }]
      }, {
        "name": "channel3",
        "size": 17010,
        "children": [{
          "name": "10min view",
          "size": 7074
        }]
      }]
    }, {
      "name": "alerts",
      "children": [{
        "name": "True Positive",
        "size": 17010,
        "children": [{
          "name": "channel13",
          "size": 17010,
          "children": [{
            "name": "10min view",
            "size": 17010
          }]
        }, {
          "name": "channel28",
          "size": 5842,
          "children": [{
            "name": "10min view",
            "size": 17010
          }]
        }]
      }, {
        "name": "False Positive",
        "children": [{
          "name": "channel204",
          "size": 17010,
          "children": [{
            "name": "10min view",
            "size": 17010
          }]
        }, {
          "name": "channel228",
          "size": 5842,
          "children": [{
            "name": "10min view",
            "size": 17010
          }]
        }]
      }]
    }
  ]
};
data = JSON.parse(localStorage.getItem("data"));
console.log(data)

var barChartData = [{
    "value": 1
  }, {
    "value": 3
  }, {
    "value": 10
  }, {
    "value": 4
  }]
  
  // set the ranges
var x = d3.scaleBand()
  .range([0, 300])
  .padding(0.1);
var y = d3.scaleLinear()
 ...