Weighted Voronoi Treemap in D3v4

Port of mkedwards's block: Treemap in D3v4.

Warning not stable. Sometimes, code fails to compute the layout, and doesn't update the svg. In such a case, you have to (re-)compute diagram.

Done

add d3-polygon-clip.js (no longer in D3v4)
add d3-rebind.js (no longer in D3v4)
use d3.polygoneArea(poly), d3.polygonLength(poly) and d3.polygonCentroid(poly) (instead of respectively poly.area(), poly.length() and poly.centroid())
use d3.scaleLinear(), d3.scaleOrdinal(d3.schemeCategory20c) (instead of respectively d3.scale.linear(), d3.scale.categories20())
in function paint(), rework painting order of polygons for a better perception of each partition (strokes no longer overlap each others, so that the stroke of a partition is consistant all over it's perimeter)
the result of d3v3.layout.hierarchy() was an array of nodes (each with their respective descendants), but the result of d3v4.hierarchy() is the root node; hence this huge change may have unseen impacts (or can lead to futher refactoring, but this is not the point here); current seen impact is on paint() function
add a label.json file, with a very simple hierarchy, for debug purposes

On-going issues

sometimes, code fails to compute the layout, and doesn't update the svg; console shows a Cannot set property 'twin' of null error; this error was already part of the original block, and I don't found the root cause ...
don't understand what I'm doing with d3_layout_hierarchyRebind (in voronoiTreemapD3.js)

Original README

A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value. This example uses color to encode different packages of the Flare visualization toolkit. Treemap design invented by Ben Shneiderman. Squarified algorithm by Bruls, Huizing and van Wijk. Data courtesy Jeff Heer.

forked from Kcnarf's block: Weighted Voronoi Treemap in D3v4

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8">
<title>Weighted Voronoi Treemap in D3v4</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript" src="d3-rebind.js"></script>
<script language="javascript" type="text/javascript" src="d3-polygon-clip.js"></script>
<script language="javascript" type="text/javascript" src="ConvexHull.js"></script>
<script language="javascript" type="text/javascript" src="PowerDiagram.js"></script>
<script language="javascript" type="text/javascript" src="VoronoiTreemap.js"></script>
<script language="javascript" type="text/javascript" src="VoronoiTreemapD3.js"></script>
  <style>
      #wip {
        display: none;
        position: absolute;
        top: 200px;
        left: 330px;
        font-size: 40px;
        text-align: center;
      }
  </style>
</head>
<body>
<h2>Voronoi Treemap</h2>
<div>
<select id="select_polygon">
<option value="rectangle">Rectangle</option>
<option value="triangle">Triangle</option>
<option value="pentagon">Pentagon</option>
<option value="octagon">Octagon</option>
<option value="circle">Circle (100-gon)</option>
</select>

<button type="button" id="button_compute">Compute Diagram!</button>

<label><input type="checkbox" name="checkbox_stroke" id="checkbox_stroke" checked>Stroke Width</label>

&nbsp;&nbsp;

Color: 
<select id="select_color">
  <option value="linear">Linear</option>
  <option value="name">Name</option>
  <option value="none">None</option>
</select>

&nbsp;&nbsp;

Max depth to show: 
<select id="select_max_depth">
  <option value="none">None</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>
</div>
  <div id="wip">
    Work in progress ...
  </div>

return result;
}

// here we set up the svg
var width = 960;
var height = 800;
var border = 10;
var svg_container = d3.select("body").append("svg")
	.attr("width",width)
	.attr("height",height)
	.attr("id","svgid");

///////// bounding polygon
function get_selected_polygon() {
	var width_less_border = width - 2*border;
	var height_less_border = height - 2*border;
	var entire_svg_polygon = [[border,border],
		[border,height_less_border],
		[width_less_border,height_less_border],
		[width_less_border,border]];

function make_d3_poly(d) {
	return "M" + d.join("L") + "Z";
}

var paint = function(root){
  //sort nodes to draw by depth-first
  nodes = root.descendants().sort(function(a,b) { return b.depth - a.depth});
	svg_container.selectAll("path").remove();

// background color
	//var background_color = "lightgray";
	var background_color = "none";
	svg_container.append("g").append("rect")
		.attr("x", 0)
		.attr("y", 0)
		.attr("width", width)
		.attr("height", height)
		.attr("fill", background_color);

// strokes by depth
	// a bit awkward to use the UI element here
	var stroke_by_depth = d3.select("#checkbox_stroke").property('checked');		
	var stroke_min = 2,
		stroke_max = stroke_by_depth ? 10 : stroke_min,
		stroke_levels = 3,// could determine from max depth...see color...
		stroke_delta = (stroke_max - stroke_min) * 1.0 / stroke_levels;
	
	// color
	var select_color = d3.select("#select_color").node().value;
	if (select_color == "linear") {
    
		var nodes_max_depth = root.height;
		var color_d3_linear = d3.scaleLinear().domain([0, nodes_max_depth]).range(["blue","lightblue"]);
		var color_func = function(d) { return color_d3_linear(d.depth); };
	}
	else if (select_color == "name") {
		var color_d3 = d3.scaleOrdinal(d3.schemeCategory20c);
		var color_func = function(d) { return d.children ? color_d3(d.name) : "none"; };
	}
	else {
		// none or some other weird thing ;)
		var color_func = "lightblue"; // or whatever color
	}
	
	// any maximum depth?
	var select_max_depth = d3.select("#select_max_depth").node().value;
	var max_depth = 12; // or whatever big thing...
	if (select_max_depth != "none") {
		max_depth = parseInt(select_max_depth);
	}
	
	
	
	// consolidate and draw polygons
    var selected_node_list = [];
    for (var i = 0; i < nodes.length; i++){
        var node = nodes[i];
        if (node.polygon != null && node.depth <= max_depth){
            selected_node_list.push(node);
        }
    }
    var polylines = svg_container.append("g").selectAll("path").data(selected_node_list);
	polylines.enter().append("path")
	        .attr("d", function(d) {return make_d3_poly(d.polygon);})
			.attr("stroke-width", function(d) { return Math.max(stroke_max - stroke_delta*d.depth, stroke_min) + "px";})
	        .attr("stroke", "black")
	        .attr("fill", color_func)
  				.attr("fill-opacity", function(d){ return d.children? 0 : 1; });
    polylines.exit().remove();
	
	
	// also circles?  only for leaves?
	// a subset of selected_node_list as it turns out
	var leaf_node_list = [];
    for (var i = 0; i < selected_node_list.length; i++){
        var node = selected_node_list[i];
        if (!node.children || node.depth == max_depth){
            leaf_node_list.push(node);
        }
    }

// disabled because of weirdness with non-leaf centroids
	// centroid circles
	//var show_leaf_centroids = d3.select("#checkbox_leaf_centroids").property('checked');
	if (false) {
		var center_circles = svg_container.append("g").selectAll(".center.circle").data(leaf_node_list);
		center_circles.enter().append("circle")
			.attr("class", "center circle")
			.attr("cx", function(d) {return (d.site.x);})
			.attr("cy", function(d) {return (d.site.y);})
			.attr("r", function(d) {return 5;})
			//.attr("r", function(d) {return (Math.sqrt(d.weight));})
			//.attr("r", function(d) {return (Math.max(Math.sqrt(d.weight), 2));})
			.attr("stroke", "black")
			.attr("fill", "black");
	}
	
	// weight circles
	// this does work...but is kind of ugly
	if (false) {
		var radius_circles = svg_container.append("g").selectAll(".radius.circle").data(leaf_node_list);
		radius_circles.enter().append("circle")
			.attr("class", "radius circle")
			.attr("cx", function(d) {return (d.site.x);})
			.attr("cy", function(d) {return (d.site.y);})
			//.attr("r", function(d) {return 5;})
			.attr("r", function(d) {return (Math.sqrt(d.weight));})
			//.attr("r", function(d) {return (Math.max(Math.sqrt(d.weight), 2));})
			.attr("stroke", "white")
			.attr("stroke-width", "5px")
			.attr("fill", "none");
	}
}

var newroot;
function compute() {
	var select_polygon = get_selected_polygon();
	var vt = d3.voronoitreemap()
		.root_polygon(select_polygon)
		.value(function(d) {return d.size; })
		.iterations(100);
	d3.json("flare.json", function(error, flare) {
  // d3.json("flare.json", function(error, flare) {	// for debug purpose
		if (error) throw error;
		newroot = vt(flare);
		paint(newroot);
	});
}

// yeah...should probably update on all input changes
// nope...only the fast ones!
d3.select("#checkbox_stroke").on("click", function() {paint(newroot)});
d3.select("#select_color").on("change", function() {paint(newroot)});
d3.select("#checkbox_leaf_centroids").on("click", function() {paint(newroot)});
d3.select("#select_max_depth").on("change", function() {paint(newroot)});

d3.select("#button_compute").on("click", function() {compute();});

</script>

</body></html>

https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

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