JSFiddle - React, Tailwind, and code Playground

by KendoDev

HTML

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css">
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<script type="text/kendo" id="template">
  		#:dataItem.Name# <br/>
      <span style="font-weight: bold;">
      		#:dataItem.Id#
      </span>
  </script>
<div id="treemap"></div>

JavaScript

// JavaScript source code

var data = [
  {
      "Name": "Line 2 Packing",
      "Id": 11,
      "Type": "Line",
      "Value": 324,
      "ParentId": 0,
      "items": [
        {
            "Name": "Unplanned Stoppages",
            "Id": 3,
            "Type": "State",
            "Value": 324,
            "ParentId": 11,
            "items": [
              {
                  "Name": "Unplanned Stoppages",
                  "Id": 3,
                  "Type": "ReasonGroup",
                  "Value": 249,
                  "ParentId": 3,
                  "items": [
                    {
                        "Name": "Starved",
                        "Id": 3,
                        "Type": "Reason",
                        "Value": 120,
                        "ParentId": 3,
                        "items": [
                          {
                              "Name": "MES_L2_Weigher_1",
                              "Id": 12,
                              "Type": "RootCauseEntity",
                              "Value": 60,
                              "ParentId": 3,
                              "items": [
                                {
                                    "Name": "Planned Stoppages",
                                    "Id": 2,
                                    "Type": "RootCauseState",
                                    "Value": 60,
                                    "ParentId": 12,
                                    "items": [
                                      {
                                          "Name": "Planned Maintenance",
                                          "Id": 4,
                                          "Type": "RootCauseReasonGroup",
                                          "Value": 60,
                                          "ParentId": 2,
                                          "items": [
                                            {
                                               ...