Colored Wavy Treemap

Just adding some random colors from Shneiderman's Treemap art to @Kcnarf's block

This block is a recreation, inspired from [https://twitter.com/JacobJoaquin/status/816640932212772864] (https://twitter.com/JacobJoaquin/status/816640932212772864), and is more or less data art.

This block is forked from mbostock's block: Nested Treemap, and hence vizualises the treemap of the famous flare.csv.

Even if this block is a recreation, the technique can be used to distord the treemap in order to fit a particular contour/shape. I will experiment this in another block.

Acknowledgments to:

D3.js (v4)
blockbuilder.org

forked from Kcnarf's block: Wavy Treemap

forked from anonymous's block: Wavy Treemap

<html>
<head>
<meta charset="utf-8">
<title>Wavy treemap</title>
<meta content="D3's source, displayed as a wavy treemap" name="description">
<style>
  path {
    fill:white;
  }

.node--hover path {
    fill: lightgrey;
  }
</style>
</head>
<body>
  <svg width="960" height="500"></svg>
  <script src="//d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <script>
    var WITH_TRANSITION = true,
        WITHOUT_TRANSITION = false;
    
		//begin: distrosion conf.
    var sampling = 5,
        amplitude = 10,
        dxOfY,	//function defining the distorsion along the y-axis; set later
        dyOfX;	//function defining the distorsion along the x-axis; set later
    //end: distorsion conf.
    
    //begin: drawing conf.
    var margin = {top: 5, right: 5, bottom: 5, left: 5},
        svgSize = 500,
        svgWidth = size,
        svgHeight = size,
        size = svgSize - margin.left - margin.top - 2*amplitude,
        width = size,
        height = size;
    //end: drawing conf.
				
    var drawingArea = d3.select("svg").append("g").attr("transform", "translate(15,15)")
  
    var format = d3.format(",d");

var stratify = d3.stratify()
        .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

var treemap = d3.treemap()
        .size([width, height])
        .paddingOuter(3)
        .paddingInner(1)
        .round(true);

d3.csv("flare.csv", function(error, data) {
      if (error) throw error;

var root = stratify(data)
          .sum(function(d) { return d.value; })
          .sort(function(a, b) { return b.height - a.height || b.value - a.value; });

treemap(root);

cell.append("title")
          .text(function(d) { return d.id + "\n" + format(d.value); });
      
     	cell = cell.append("path")
        .attr("id", function(d) { return "path-" + d.id; })
      	.style("fill", function (d) { 
        	return ["#4650a6","#dd2d28", "#edef00", "white", "white", "white"][Math.floor(Math.random()*6)];
      	})
			
      //draw the default, linear, treemap
      distord(cell, dxOfY_linear, dyOfX_linear, WITHOUT_TRANSITION);
      
      
      dxOfY = dxOfY_wave;	//set the distrosion along the y-axis
      dyOfX = dyOfY_wave;	//set the distorsion along the x-axis
      
      //uncomment below code for other distorsion along the y-axis
      //dxOfY = dxOfY_linear				// no distorsion
      dxOfY = dxOfY_circle;				// cicle-based distorsion
      //dxOfY = dxOfY_thirdCircle;	// centered-1/3height-circle distorsion
      
      //transition to the distorted treemap
      distord(cell, dxOfY, dyOfX, WITH_TRANSITION);
    });
    
    /******************************************/
    /* draw path-based cells instead of rects */
    /* by interpolating lines into pathes     */
    /******************************************/
    
    function distord(cellSelection, dxOfY, dyOfX, withTransition) {
      var duration = withTransition? 5000 : 0;
      
      
      //begin: pre-compute distorsions for optimization purpose
      var dyOfXs = {}, dxOfYs = {};
      //begin: store y-deltas along the x-axis
      var x=0;
      while (x<=width) {
        dyOfXs[x] = dyOfX(x);
        x+=sampling;
      }
      //end: store y-deltas along the x-axis

//begin: store x-deltas along the y-axis
      var y = 0;
      while (y<=height) {
        dxOfYs[y] = dxOfY(y);
        y+=sampling;
      }
      //end: store x-deltas along the y-axis
      //end: pre-compute distorsions for optimization purpose

cellSelection.transition().duration(duration).attr("d", function(d) {
        var cellWidth = (d.x1 - d.x0), cellHeight = (d.y1 - d.y0);

var absX, absY, //absolute x,y
            relX, relY;	//relative x,y, because the "g.cell" cell is already translated
        var	dyOfX0 = dyOfX(d.x0), dxOfY0 = dxOfY(d.y0),
            dyOfX1 = dyOfX(d.x1), dxOfY1 = dxOfY(d.y1);
        var path;

path = "M" + [0+dxOfY0,0+dyOfX0];
        //begin: path of distorted top line (r->l)
        absX = Math.ceil(d.x0/sampling)*sampling;	//first sampling-based x
        relX = absX - d.x0;
        while (absX<d.x1) {
          path += "L" + [relX+dxOfY0, 0+dyOfXs[absX]];
          absX += sampling;
          relX += sampling; 
        }
        path += "L" + [cellWidth+dxOfY0, 0+dyOfX1];
        //begin: path of distorted top line (r->l)

//begin: path of distorted right line (t->b)
        absY = Math.ceil(d.y0/sampling)*sampling;	//first sampling-based y
        relY = absY-d.y0;
        while (absY<d.y1) {
          path += "L" + [cellWidth+dxOfYs[absY], relY+dyOfX1];
          absY += sampling;
          relY += sampling;
        }
        path += "L" + [cellWidth+dxOfY1, cellHeight+dyOfX1];
        //begin: path of distorted right line (t->b)

//begin: path of distorted bottom line (l->r)
        absX = Math.floor(d.x1/sampling)*sampling;	//first sampling-based x
        relX = absX - d.x0;
        while (absX>d.x0) {
          path += "L" + [relX+dxOfY1, cellHeight+dyOfXs[absX]];
          absX -= sampling;
          relX -= sampling;
        }
        path += "L" + [0+dxOfY1, cellHeight+dyOfX0];
        //begin: path of distorted bottm line (l->r)

//begin: path of distorted left line (b->t)
        absY = Math.floor(d.y1/sampling)*sampling;	//first sampling-based y
        relY = absY - d.y0;
        while (absY>d.y0) {
          path += "L" + [0+dxOfYs[absY], relY+dyOfX0];
          absY -= sampling;
          relY -= sampling;
        }
        path += "L" + [0+dxOfY0, 0+dyOfX0];
        //begin: path of distorted left line (b->t)

return path+"Z";
      });
    }

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js