JSFiddle - React, Tailwind, and code Playground

by christopheviau

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.js"></script>
<div id="viz"></div>

CSS

.domain{
  display: none;
}

JavaScript

var data = [],
dimensions = [],
h = 200,
w = 400, 
chartH = 150,
chartW = 350,
chartX = 50,
chartY = 50;

/******************************** 
* Data
*********************************/
data = [10, 40, 35, 50, 75, 80, 70, 75, 90, 60, 70, 100];
dimensions[0] = {"name": "year", "len": 12};
dimensions[1] = {"name": "quarter", "len": 3};
dimensions[2] = {"name": "month", "len": 1};

/******************************** 
* Icicle selector
*********************************/
var rootSVG = d3.select("#viz")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h);
    
rootSVG.selectAll("g.level")
    .data(dimensions)
    .enter().append("svg:g")
    .attr("class", "level")
    
    .each(function(parentD, parentI){
        d3.select(this)
            .selectAll("rect.member")
            .data(function(d, i){return d3.range(data.length/d.len)})
            .enter().append("svg:rect")
            .attr("class", "member")
            .attr("width", function(){return ~~(parentD.len/data.length*chartW)})
            .attr("height", function(){return~~(chartH/dimensions.length)})
            .attr("x", function(d, i){return ~~(i*parentD.len/data.length*chartW)+chartX})
            .attr("y", ~~(parentI*chartH/dimensions.length))
            .attr("fill", "white")
            .attr("stroke", "#eee")
           .on("mouseover", function(d, i){
                var thisRect = d3.select(this);
                d3.select("svg")
                    .append("svg:rect")
                    .attr("class", "zone")
                    .attr("fill", "dodgerblue")
                    .attr("x", thisRect.attr("x"))
                    .attr("y", 0)
                    .attr("width", thisRect.attr("width"))
                    .attr("height", chartH)
                    .attr("opacity", 0.3)
                    .attr("pointer-events", "none");
            })
            .on("mouseout", function(d, i){
                d3.selectAll("rect.zone")
                    .remove();
           ...