JSFiddle - React, Tailwind, and code Playground

by alfredopacino

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<p id="chart" style="  top:10px;bottom: 0;  left: 0;  right: 0;position: absolute;width:100%;height:100%">

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; 
}

JavaScript

$(window).resize(function () {
	resize()
});


var root = {
 "name": "Sitemap",
 "children": [
  {
   "name": "International Relations",
   "children": [
    {
     "name": "Systemic Theory",
     "children": [
      {"name": "Great Powers", "value": 3938, "url": "http://polisci.osu.edu"},
      {"name": "Systemic Politics", "value": 743, "url": "http://polisci.osu.edu"}
     ]
    },
    {
     "name": "International Conflict",
     "children": [
      {"name": "Systemic Politics", "value": 3416, "url": "http://google.com"},
      {"name": "Causal Complexity", "value": 3416, "url": "http://bing.com"},
      {"name": "Deadly Doves", "value": 3416, "url": "http://polisci.osu.edu"},
      {"name": "Politcal Irrelevance", "value": 3416, "url": "http://polisci.osu.edu"},
      {"name": "The Fog of Peace: Uncertainty, War, and the Resumption of International Crises, <i>manuscript</i>", "value": 3416, "url": "http://polisci.osu.edu"},
      {"name": "Greed or Opportunity? Refining our Understanding of the Origins of Civil Wars, <i>manuscript</i>", "value": 3416, "url": "http://polisci.osu.edu"}
     ]
    },
    {
     "name": "Foreign Policy",
     "children": [
      {"name": "The Myth of American Isolationism", "value": 3416, "url": "http://polisci.osu.edu"}
     ]
    },
    {
     "name": "Courses",
     "children": [
      {"name": "IS 201", "value": 3416, "url": "http://polisci.osu.edu"},
      {"name": "PS 544", "value": 3416, "url": "http://polisci.osu.edu"},
      {"name": "PS 848", "value": 3416, "url": "http://polisci.osu.edu"}      
     ]
    },
    {
     "name": "Dataverse",
     "children": [
      {"name": "Dataverse", "value": 3416, "url": "http://polisci.osu.edu"}
     ]
    }
   ]
  },
  {
   "name": "Political Methodology",
   "children": [
    {
     "name": "Theory and Methdology",
     "children": [
      {"name": "Interactions and Causal Complexity", "value": 3938, "url": "http://polisci.osu.edu"},
      {"name": "Theory and Methodology",...