JSFiddle - React, Tailwind, and code Playground

by johncdtex

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css">
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<div id="treemap"></div>

CSS

html {
    font-family: Tahoma;
    font-size: 0.8em;
}
.k-leaf div {
    font-size: 110%;
}

JavaScript

$().ready(function () {
    var ds = [{
        "name": "High Risk Activities",
            "value": 1000,
            "items": [{
            "name": "Behavioural Activity",
                "value": 800,
                "items": [{
                "name": "User: 43d723431",
                    "value": 500
            }, {
                "name": "User: 43d711431",
                    "value": 250
            }, {
                "name": "User: 43d7235431",
                    "value": 46
            }, {
                "name": "User: 13d723431",
                    "value": 3
            }]
        }, {
            "name": "Device Transfers",
                "value": 200,
                "items": [{
                "name": "User: 43d721431",
                    "value": 100
            }, {
                "name": "User: 43d723411",
                    "value": 60
            }, {
                "name": "User: 43f723431",
                    "value": 20
            }, {
                "name": "User: 43e723431",
                    "value": 20
            }]
        }]
    }];

    $("#treemap").kendoTreeMap({
        dataSource: {
            data: ds,
            schema: {
                model: {
                    children: "items"
                }
            }
        },
        valueField: "value",
        textField: "name"
    });

    function dataBund(e) {
        console.log("DataBound");
    }

    var treemap = $("#treemap").getKendoTreeMap();
    treemap.bind("dataBound", dataBund);
});