JSFiddle - React, Tailwind, and code Playground

by sijoma

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html>

<title>Zoomable Treemap</title>

<p id="chart">

CSS

#chart {
  width: 620px;
  height: 500px;
  background: #bbb;
}

text {
  pointer-events: none;
}

.grandparent text { /* header text */
  font-weight: bold;
  font-size: medium;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

rect {
  fill: none;
  stroke: #fff;
}

rect.parent,
.grandparent rect {
  stroke-width: 2px;

}

.grandparent rect {
  fill: #fff;
}

.children rect.parent,
.grandparent rect {
  cursor: pointer;
}

rect.parent {
  pointer-events: all;
}

.children:hover rect.child,
.grandparent:hover rect {
  fill: #aaa;
}

.textdiv { /* text in the boxes */
    font-size: medium;
    padding: 5px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

body {
  font: 300 36px "Helvetica Neue";
  height: 640px;
  overflow: hidden;
  position: relative;
  width: 960px;
}

a:link, a:visited {
  color: #777;
  text-decoration: none;
}

a:hover {
  color: #666;
}

JavaScript

var root = {
    "name": "HEATMAP | North Shore LIJ",
    "children": [{
        "name": "MEDICINE",
        "value": 60,
        "children": [{
            "name": "ANESTHESIOLOGY",
            "value": 60.5176474105,
            "url": "searchHealthcareDoctor.php?eid=7&specialty=ANESTHESIOLOGY"
        }, {
            "name": "INTERNAL MEDICINE",
            "value": 43.0576923847,
            "url": "searchHealthcareDoctor.php?eid=7&specialty=INTERNAL MEDICINE"
        }, {
            "name": "Emergency Medicine",
            "value": 48.1018870647,
            "url": "searchHealthcareDoctor.php?eid=7&specialty=Emergency Medicine"
        }, {
            "name": "DIAGNOSTIC RADIOLOGY",
            "value": 35.1916667058,
            "url": "searchHealthcareDoctor.php?eid=7&specialty=DIAGNOSTIC RADIOLOGY"
        }, {
            "name": "OTHER",
            "value": 51.2626256004,
            "url": "searchHealthcareDoctor.php?eid=7&specialty=OTHER"
        }, {
            "name": "OBSTETRICS/GYNECOLOGY",
            "value": 61.8571427784,
            "url": "searchHealthcareDoctor.php?eid=7&specialty=OBSTETRICS/GYNECOLOGY"
        }, {
            "name": "CARDIOVASCULAR DISEASE (CARDIOLOGY)",
            "value": 59.8510638751,
            "url": "searchHealthcareDoctor.php?eid=7&specialty=CARDIOVASCULAR DISEASE (CARDIOLOGY)"
        }, {
            "name": "Family Practice",
            "value": 40.6750003761,
            "url": "searchHealthcareDoctor.php?eid=7&specialty=Family Practice"
        }, {
            "name": "PATHOLOGY",
            "value": 50.3333332897,
            "url": "searchHealthcareDoctor.php?eid=7&specialty=PATHOLOGY"
        }, {
            "name": "HOSPITALIST",
            "value": 48.2727272041,
            "url": "searchHealthcareDoctor.php?eid=7&specialty=HOSPITALIST"
        }, {
            "name": "OBSTETRICS AND GYNECOLOGY",
            "value": 2.3870967329,
            "url":...