JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<script src="https://cdn.jsdelivr.net/gh/muscatian/BubbleChart/jquery-1.6.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/muscatian/BubbleChart/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/muscatian/BubbleChart/CustomTooltip.js"></script>
<script src="https://cdn.jsdelivr.net/gh/muscatian/BubbleChart/plugins.js"></script>
<script src="https://cdn.jsdelivr.net/gh/muscatian/BubbleChart/script.js"></script>
<div class="panel-hdr">
  <div class="col-sm-3 text-center"><img class="phaseimg"...

CSS

.phaseimg {
  max-width: 100%;
  height: auto;
}

.tooltip {
  position: absolute;
  top: 100px;
  left: 100px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid #000;
  /* background: #222222; */
  background: #fff;
  opacity: .9;
  /* color: #eeeeee; */
  color: black;
  padding: 10px;
  width: 300px;
  font-size: 12px;
  z-index: 10;
}

.tooltip .title {
  font-size: 13px;
}

.tooltip .name {
  font-weight: bold;
}

.bg {
  background: rgb(255, 255, 255);
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 24%, rgba(201, 200, 199, 1) 25%, rgba(201, 200, 199, 1) 25%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 49%, rgba(201, 200, 199, 1) 50%, rgba(201, 200, 199, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 74%, rgba(201, 200, 199, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(255, 252, 250, 1) 100%, rgba(201, 200, 199, 1) 100%);
}




.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  /*padding-bottom: 100%;*/
  padding-bottom: 26%;
  vertical-align: top;
  overflow: hidden;
}

.svg-containervis {
  display: inline-block;
  position: relative;
  width: 100%;
  /*padding-bottom: 100%;*/
  padding-bottom: 30%;
  vertical-align: middle !important;
  overflow: hidden;
}

.svg-content {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 5%; 
  overflow: visible; 
}

.panel-hdr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  background: #fff;
  min-height: 3rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 4px 4px 0 0;
  -webkit-transition: background-color 0.4s ease-out;
  transition: background-color 0.4s ease-out;
}

JavaScript

//https://cdn.jsdelivr.net/gh/muscatian/BubbleChart/master/gates_money.csv
(function() {
  var BubbleChart, root,
    __bind = function(fn, me) {
      return function() {
        return fn.apply(me, arguments);
      };
    };

  BubbleChart = (function() {
    function BubbleChart(data) {
      this.hide_details = __bind(this.hide_details, this);
      this.show_details = __bind(this.show_details, this);
      this.show_Project_details = __bind(this.show_Project_details, this);
      this.hide_years = __bind(this.hide_years, this);
      this.display_years = __bind(this.display_years, this);
      this.move_towards_year = __bind(this.move_towards_year, this);
      this.display_by_year = __bind(this.display_by_year, this);
      this.move_towards_center = __bind(this.move_towards_center, this);
      this.display_group_all = __bind(this.display_group_all, this);
      this.start = __bind(this.start, this);
      this.create_vis = __bind(this.create_vis, this);
      this.create_nodes = __bind(this.create_nodes, this);
      var max_amount;
      this.data = data;
      this.width = 1500;
      this.height = 300;
      this.viewBox = "0 0 1500 300";
      this.style = "width: 100%; padding-bottom: 30%; height: 1px; overflow: hidden;";
      this.tooltip = CustomTooltip("gates_tooltip", 240);
      this.center = {
        x: this.width / 2,
        y: this.height / 2
      };
      this.year_centers = {
        "Feasibilities Studies": {
          x: ((this.width / 4) / 2) + 100,
          y: this.height / 2.5
        },
        "Concept / Define": {
          x: ((this.width / 4) / 2) + (this.width / 4),
          y: this.height / 2.5
        },
        "Pilot / Execute": {
          x: (this.width / 2) + ((this.width / 4) / 2),
          y: this.height / 2.5
        },
        "On- Stream": {
          x: (this.width - (this.width / 4) / 2) - 100,
          y: this.height / 2.5
        }
      };
      this.layout_gravity = -0.01;
      this.damper = 0.1;
     ...