JSFiddle - React, Tailwind, and code Playground

by empie

HTML

<script src="http://vanderbiest.be/jsfiddle/lib/d3.min.js"></script>
<div id="body">
   
</div>

CSS

.node {
  cursor: pointer;
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

.hyper {
	color: blue;
	text-decoration: underline;
}

.hyper:hover {
	color: yellow;
	text-decoration: none;
}

JavaScript

var root = {
    "name": "NUIG",
    "children": [
        {
            "name": "year one",
            "children": [
                {
                    "name": "GU001 group I",
                    "children": [
                        {
                            "name": "CT101 Computing Systems",
                            "size": 93
                        },
                        {
                            "name": "CT102 Algorithms & Information Systems",
                            "size": 74
                        },
                        {
                            "name": "EE130 Fundamentals of Electrical & Electronic Engineering I",
                            "size": 96
                        },
                        {
                            "name": "TOTAL 87.17",
                            "size": 87.17
                        }
                    ]
                },
                {
                    "name": "GU002 group II",
                    "children": [
                        {
                            "name": "CT103 Programming",
                            "size": 93
                        },
                        {
                            "name": "TOTAL 93",
                            "size": 93
                        }
                    ]
                },
                {
                    "name": "GU002 group III",
                    "children": [
                        {
                            "name": "MA190 Mathematics (Honours)",
                            "size": 68
                        },
                        {
                            "name": "PH108 Physics",
                            "size": 75
                        },
                        {
                            "name": "TOTAL 70.33",
                            "size": 70.33
                        }
                    ]
                },
                {
                    "name": "GU004 group...