Vornoi Treemap

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.

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8">
<title>Voronoi Treemap</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></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>
</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>

return result;
}

// here we set up the svg
var width = 1000;
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(nodes){
	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_all_depths = nodes.map(function(x) {return x.depth});
		var nodes_max_depth = Math.max.apply(null, nodes_all_depths);
		var color_d3_linear = d3.scale.linear().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.scale.category20c();
		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);
    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 newnodes;
function compute() {
	var select_polygon = get_selected_polygon();
	var vt = d3.layout.voronoitreemap()
		.root_polygon(select_polygon)
		.value(function(d) {return d.size; })
		.iterations(100);
	d3.json("flare.json", function(error, flare) {
		if (error) throw error;
		newnodes = vt(flare);
		paint(newnodes);
	});
}

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

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.v3.min.js