JSFiddle - React, Tailwind, and code Playground

by Vikram Deshmukh

HTML

<script src="https://secure.polisci.ohio-state.edu/js/d3.v2.js"></script>
<p id="chart">
    <p/>

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

//just write the hardcode here
var json = {
    "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":...