JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<script src="https://rawgithub.com/fzaninotto/CodeFlower/master/javascripts/CodeFlower.js"></script>
 
            
            <div id = "visualization">
            </div>

CSS

circle.node {
  cursor: pointer;
  stroke: #000;
  stroke-width: .5px;
}

circle.node.directory {
  stroke: #9ecae1;
  stroke-width: 2px;
}

circle.node.collapsed {
  stroke: #555;
}

.nodetext {
  fill: #252929;
  font-weight: bold;
  text-shadow: 0 0 0.2em white;
}

line.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

JavaScript

var jsonData = {
    "name": "Total Claims Per Vehicle Type",
    "children": [
        {
            "name": "TOTAL",
            "children": [
                {
                    "name": "MOTOR CAR",
                    "children": [
                        {
                            "name": "Private",                            
                            "size": 9221
                        },
                        {
                            "name": "Route",
                            "size": 0,
                            
                        },
                          {
                            "name": "Hiring",
                            "size": 1058,                            
                        },
                        {
                            "name": "Agricultural Usage",
                            "size": 0,                            
                        },
                         {
                            "name": "Rent",
                            "size": 114,                            
                        }
                    ],
                    "size": 10393
                },
                {
                    "name": "COMBINE HARVESTER",
                    "children": [
                       {
                            "name": "Private",                            
                            "size": 0
                        },
                        {
                            "name": "Route",
                            "size": 0,
                            
                        },
                          {
                            "name": "Hiring",
                            "size": 0,                            
                        },
                        {
                            "name": "Agricultural Usage",
                            "size": 1,                            
                        },
                         {
                           ...