JSFiddle - React, Tailwind, and code Playground

by Nayana Das

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="barchartContainer"></div>

JavaScript

var overallJson = {"name":"sisoc","children":[{"organisation_id":"4","name":"orgname4","children":[]},{"organisation_id":"5","name":"org5","children":[{"aptcomplex_id":"4","name":"apt43","children":[{"building_id":"3","name":"bldg3","children":[{"floor_id":"flr_07","name":"flr_07","children":[]}]},{"building_id":"blg_10","name":"bld_10","children":[{"floor_id":"5","name":"5_floor","children":[]},{"floor_id":"flr_0700","name":"flr_0700","children":[{"unit_id":4,"name":"testunit","user_id":48,"username":"test111_test","children":[{"device_id":"test12","name":"TestMeter_2","serial":"1200000023C0123C"},{"device_id":"TestMeter_1","name":"TestMeter1","serial":"100000012C120202"}]}]},{"floor_id":"flr_09","name":"flr_09","children":[{"unit_id":1,"name":"demouser_unit_10","user_id":36,"username":"demouser","children":[{"device_id":"demo-meter-vc","name":"Demo Meter","serial":"10000000C9640011"}]},{"unit_id":3,"name":"unit_50","user_id":37,"username":"stagingtest","children":[]}]},{"floor_id":"testfloor_!4","name":"testfloor_!4_up","children":[]}]}]}]},{"organisation_id":"6","name":"org6","children":[]},{"organisation_id":"7","name":"org7","children":[{"aptcomplex_id":"3","name":"apt3_update","children":[{"building_id":"1","name":"bldg1_update","children":[]}]}]},{"organisation_id":"8","name":"org8_0","children":[{"aptcomplex_id":"APT_67","name":"Amritam","children":[]}]},{"organisation_id":"org_109","name":"org_109","children":[]}]};

var margin = {top: 30, right: 120, bottom: 0, left: 120},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scaleLinear()
    .range([0, width]);

var barHeight = 20;

//var color = d3.scaleOrdinal()
    //.range(["steelblue", "#ccc"]);
var color = d3.scaleOrdinal(d3.schemeCategory20)

var duration = 750,
    delay = 25;

var partition = d3.partition();
var tooltip = d3.select("body").append("div").attr("class", "toolTip");

var xAxis = d3.axisTop()
    .scale(x)
   ...