JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

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

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

CSS

html,
body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

#hottopics {
  width:70%;
  height:70%;
  border: 1px dotted silver;
}

JavaScript

/* create x and y scales */
//var w = window.localStorage.getItem('svg_width') ? window.localStorage.getItem('svg_width') : self.innerWidth,
function ZoomableTreeMap() {
    var $container = $('#hottopics'),
                w = $container.width(),
                //h = window.innerHeight - document.getElementById("chart-tabs").offsetTop + document.getElementById("chart-tabs").offsetHeight,
                h=$container.height(),
                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 + ")";
                    })
                   ...