JSFiddle - React, Tailwind, and code Playground

by Şuayip Ekmekci

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div id="chart" class="col-md-12 m-b-30"></div>

CSS

/*multi donut*/

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.sequence {
  height: 50px;
}

.sequence text,
.legend text {
  font-weight: 600;
  fill: #fff;
}

.chart {
  position: relative;
}

.chart path {
  stroke: #fff;
}

.explanation {
  position: absolute;
  margin-top: 135px;
  margin-left: 110px;
  width: 140px;
  text-align: center;
  color: #666;
  z-index: 77;
}

#chart svg {
  padding-left: 3px !important;
  padding-top: 3px !important;
  /*padding-bottom: 10px !important;*/
}

.percentage {
  font-size: 2.5em;
}

.chartMain {
  width: 360px;
  margin: 0 auto;
}

#chart4 .jqplot-table-legend {
  margin-top: 30px;
}

.pageMenuItems {
  float: left;
  width: 14.7% !important;
}

.pageMenuItems.lastItems {
  float: left;
  width: 4% !important;
}

.pageMenuItems.lastItems i {
  font-size: 20px;
  margin-top: 5px;
  margin-left: 7px;
}

.pageMenuItems select {
  float: left;
  width: 100% !important;
}

.treeMapname {
  font-size: 25px;
  font-weight: bold;
  fill: #000;
  font-family: 'Open Sans', sans-serif;
}

.treeMapnameMobil {
  font-size: 7px;
}

.treeMapTittle {
  font-weight: bold;
  font-size: 18px;
  fill: #000;
  font-family: 'Open Sans', sans-serif;
}

.treeMapTittleMobile {
  font-weight: bold;
  font-size: 10px;
}

#s2id_selectBox1,
#s2id_selectBox2,
#s2id_selectBox3,
#s2id_selectBox4,
#s2id_selectBox5,
#s2id_RelatedSelectBox,
#s2id_selectBox6,
#s2id_categorySelect {
  width: 100%;
}


/*scroll Menu*/

.main-nav {
  position: relative;
  padding: 20px;
}

.main-nav {
  background: #fff;
  /*height: 80px;*/
  z-index: 150;
  margin-bottom: -80px;
  /* box-shadow: 0 2px 3px rgba(0,0,0,.4);*/
}

.main-nav-scrolled {
  /* position: fixed;
  top: 60px;*/
  position: relative;
}


/*scroll Menu*/

.jqplot-table-legend {
  margin-top: 10px;
}

#Valueparameter8 {
  font-size: 45px;
  margin-top: 22px;
}

#topPageMenu {
  display: none;
}

#filterIcon {
  font-size: 14px;
  cursor: pointer;
  position:...

JavaScript

// tree map start
var root = {
  "name": "TreeMap",
  "color": "#6B74DB",
  "children": [{
    "name": "Step-1.1",
    "fullname": "Full Name Step-1.1",
    "color": "#68B771",
    "value": 25,
    "text": "100 K Spent",
    "children": [{
      "name": "Step-2.1",
      "fullname": "Full Name Step-2.1",
      "color": "#68B771",
      "value": 25,
      "text": "100 K Spent",
      "children": [{
        "name": "Step-3.1",
        "fullname": "Full Name Step-3.1",
        "color": "#68B771",
        "value": 25,
        "text": "100 K Spent"
      }]
    }]
  }, {
    "name": "Step-1.2",
    "fullname": "Full Name Step-1.2",
    "color": "#F370FF",
    "value": 100,
    "text": "2.56 M Spent",
    "children": [{
      "name": "Step-2.1",
      "fullname": "Full Name Step-2.1",
      "color": "#68B771",
      "value": 100,
      "text": "1.96 M Spent",
      "children": [{
        "name": "Step-3.1",
        "fullname": "Full Name Step-3.1",
        "color": "#68B771",
        "value": 100,
        "text": "601.14 K Spent"
      }, {
        "name": "Step-3.2",
        "fullname": "Full Name Step-3.2",
        "color": "#F370FF",
        "value": 67,
        "text": "345.64 K Spent"
      }, {
        "name": "Step-3.3",
        "fullname": "Full Name Step-3.3",
        "color": "#E56D4B",
        "value": 62,
        "text": "306.27 K Spent"
      }, {
        "name": "Step-3.4",
        "fullname": "Full Name Step-3.4",
        "color": "#F99857",
        "value": 49,
        "text": "202.29 K Spent"
      }, {
        "name": "Step-3.5",
        "fullname": "Full Name Step-3.5",
        "color": "#6BACDB",
        "value": 37,
        "text": "107.47 K Spent"
      }, {
        "name": "Step-3.6",
        "fullname": "Full Name Step-3.6",
        "color": "#86B768",
        "value": 36,
        "text": "101.74 K Spent"
      }, {
        "name": "Step-3.7",
        "fullname": "Full Name Step-3.7",
        "color": "#904CFF",
        "value": 35,
       ...