JSFiddle - React, Tailwind, and code Playground

by prashant_11235

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.v2.js"></script>
<h1>Zoomable Treemap</h1>

<div id="hottopics"></div>

JavaScript

/* create x and y scales */
//var w = window.localStorage.getItem('svg_width') ? window.localStorage.getItem('svg_width') : self.innerWidth,
                var w = document.documentElement.clientWidth,
                //h = window.innerHeight - document.getElementById("chart-tabs").offsetTop + document.getElementById("chart-tabs").offsetHeight,
                h=500,
                x = d3.scale.linear().range([0, w]),
                y = d3.scale.linear().range([0, h]),
                //color = d3.scale.category20b(),
                root,
                node;
var opacity = 1;

/* create treemap layout */
var treemap = d3.layout.treemap()
                .round(false)
                .size([w, h])
                .sticky(true)
                .value(function (d) {
                    return d.size;
                });

                var svg = d3.select("#hottopics").append("div")
            	.attr('id', 'my-svg-div')
                .attr("class", "chart")
                .style("width", w + "px")
                .style("height", h + "px")
                .append("svg:svg")
                .attr("width", w)
                .attr("height", h)
                .append("svg:g")
                .attr("transform", "translate(.5,.5)");
/// <reference path="../Data/sample.json" />
                /// <reference path="../Data/flare.json" />

                d3.json("https://api.myjson.com/bins/44s6a", function (data) {
    node = root = data;

    var nodes = treemap.nodes(root)
                    .filter(function (d) {
                        return !d.children;
                    });

    var cell = svg.selectAll("g")
                    .data(nodes)
                    .enter().append("svg:g")
                    .attr("class", "cell")
                    .attr("transform", function (d) {
                        return "translate(" + d.x + "," + d.y + ")";
                    })
                    .on("click", function (d) {
                        return...