JSFiddle - React, Tailwind, and code Playground

by b_m_h

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<button class="play-btn">Play</button>
<div class="spotlight-theme theme-chart"></div>
<div class="timeline"></div>

SCSS

body {
  font-family: Arial;
}

.timeline {
  width: 500px;
}

.spotlight-theme {
  cursor: pointer;
  line-height: 45px;
  vertical-align: middle;
  font-family: Arial;

  &__circle {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    position: absolute;
    top: 15px;
  }

  &__label {
    font-family: Arial;
    font-size: 16px;
    color: #4A4A4A;
    letter-spacing: 0;
    line-height: 16px;
    vertical-align: middle;
    padding-left: 25px;
    display: inline-block;
  }

  &__progress-bar-wrapper {
    margin-bottom: 15px;
    border-radius: 8px;
    width: 100%;
    margin-top: 20px;
  }

  &__progress-bar {
    background-color: #1ec06d;
  }
}

// Company IQ chart
.bubble{
  margin: 10px 10px;
  .label{
    fill: green;
    stroke: none;
    font-weight: normal;
    font-family: Arial;
  }
  .feedback.label{
    transform: translate(25px, 180px) rotate(270deg);
  }
  .fifty.label{
    transform: translate(35px, 140px);
  }
  .negative.label{
    transform: translate(37px,288px);
  }
  .neutral.label{
    transform: translate(237px,288px);
  }
  .positive.label{
    transform: translate(450px,288px);
  }

  .circle{
    &:hover, &.hovering{
      cursor: pointer;
      text.title {
        font-family: Arial;
        font-size: 15px;
        text-align: center;
        stroke: white;
        fill: white;
        line-height: 17px;
        vertical-align: middle;
        display: inline-block;
      }
      circle{
        opacity: 1;
      }
      foreignobject, foreignObject, div{
        display: block;
      }
    }
    circle{
      opacity: 0.6;
      transition: all 0.3s;
    }
    text.title{
      font-size: 0;
      margin: 0;
    }
    div {
      background-color: transparent;
      overflow: visible;
      display: none;
      line-height: 60px;
      text-align: center;
    }
    foreignobject, foreignObject{
      display: none;
    }
  }
  #intercom-container {
    display: none !important;
  }
}

.theme-container{
 ...

JavaScript

/*var data = [{"id":7,"name":"Salary & Benefits","color":"#5359ac","percent":"23.404255319148938%","sentence_analytics_count":11,"x":55.26358397169546,"y":11,"sentiment":1},{"id":13,"name":"Work/ Life Balance","color":"#3a7851","percent":"36.170212765957444%","sentence_analytics_count":17,"x":44.00053808794302,"y":17,"sentiment":1},{"id":12,"name":"Work Environment","color":"#2dd280","percent":"40.42553191489362%","sentence_analytics_count":19,"x":39.22222641443736,"y":19,"sentiment":1},{"id":6,"name":"Recognition","color":"#64d22d","percent":"51.06382978723404%","sentence_analytics_count":24,"x":59.05210125363535,"y":24,"sentiment":1},{"id":5,"name":"Leadership/ Management","color":"#d179d2","percent":"51.06382978723404%","sentence_analytics_count":24,"x":64.45504549386291,"y":24,"sentiment":1},{"id":4,"name":"Culture","color":"#c59887","percent":"70.2127659574468%","sentence_analytics_count":33,"x":57.69331778465497,"y":33,"sentiment":1},{"id":3,"name":"Clients","color":"#86412d","percent":"70.2127659574468%","sentence_analytics_count":33,"x":59.40949628223675,"y":33,"sentiment":1},{"id":11,"name":"Transparency and Communication","color":"#332d86","percent":"76.59574468085107%","sentence_analytics_count":36,"x":51.841007152365314,"y":36,"sentiment":1},{"id":10,"name":"Training","color":"#3a5478","percent":"82.97872340425532%","sentence_analytics_count":39,"x":54.45399433931607,"y":39,"sentiment":1},{"id":9,"name":"Team Members / Peers","color":"#c58792","percent":"100%","sentence_analytics_count":47,"x":67.62679583155253,"y":47,"sentiment":1}];*/

   
var data = [
  {
    "date": "Sun Jan 15 2017",
    "data": [
      {
        "id": 7,
        "name": "Salary & Benefits",
        "color": "#5359ac",
        "percent": "23.404255319148938%",
        "sentence_analytics_count": 11,
        "x": 55.26358397169546,
        "y": 11,
        "sentiment": 1
      },
      {
        "id": 13,
        "name": "Work/ Life Balance",
        "color": "#3a7851",
       ...