Heatmap

by sijoma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<p id="chart">

CSS

#chart {
  width: 100%; 
  min-width: 992px;
  height: 360px;
  background: #f5f5f5;
  text-align: center;
}

text {
  pointer-events: none;
}

.grandparent text { /* header text */
  font-weight: 300;
  font-size: 18px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  padding: 6px;
}

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

rect.parent,
.grandparent rect {
 stroke-width: 10px;
 stroke: #f5f5f5;

}

.grandparent rect {
  fill: #f5f5f5;
}

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

rect.parent {
  pointer-events: all;
}

.children:hover rect {
  fill: #aaa;
}

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

JavaScript

var root = {
    "name": "HEATMAP | North Shore LIJ",
    "children": [{
        "name": "MEDICINE",
        "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": "searchHealthcareDoctor.php?eid=7&specialty=OBSTETRICS AND...