JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
    <div id="main">
        <div id="chart"></div>
    </div>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
    <script src="trialIndex.js"></script>
</body>

</html>

CSS

#main {


    position: relative;


    width: 100%;


    max-width: 1000px;


    margin: 0 auto;


}


#chart {


    position: relative;


    max-width: 210px;


    margin: 40px auto 0px auto;


}

JavaScript

var pi = Math.PI;



/////////// input data  ////////////////

var json =

{
    "name": "1",
    "text": "pineapple",
    "rating": 1,
    "children": [{
        "name": "1-1",
        "text": "pineapple",
        "rating": 1,
        "children": [{
            "name": "1-1-1",
            "text": "pineapple",
            "rating": 0,
            "children": [{
                "name": "1-1-1-1",
                "text": "pineapple",
                "rating": 0
            }, {
                "name": "1-1-1-2",
                "text": "pineapple",
                "rating": -1
            }]
        }, {
            "name": "1-1-2",
            "text": "pineapple",
            "rating": -1,
            "children": [{
                "name": "1-1-2-1",
                "text": "pineapple",
                "rating": -1
            }, {
                "name": "1-1-2-2",
                "text": "pineapple",
                "rating": -1
            }]
        }]
    }, {
        "name": "1-2",
        "text": "pineapple",
        "rating": 1,
        "children": [{
            "name": "1-2-1",
            "text": "pineapple",
            "rating": 1,
            "children": [{
                "name": "1-2-1-1",
                "text": "pineapple",
                "rating": 0
            }, {
                "name": "1-2-1-2",
                "text": "pineapple",
                "rating": 0.5
            }]
        }, {
            "name": "1-2-2",
            "text": "pineapple",
            "rating": 0,
            "children": [{
                "name": "1-2-2-1",
                "text": "pineapple",
                "rating": 0.5
            }]
        }]
    }]
}


;

///////// colour assignment  ///////////

var palette = [
    "#ce938b",
    "#a44156",
    "#d83854",
    "#ef8d5c",
    "#e2d179",
    "#92c4a9",
    "#1f99ae"];
var colorUnread = "#3f4749";
var colorBlank = "#efeee2";

var random = Math.floor(Math.random() * 7 - 0.00001); // random integer between 0...