VORONOI TREEMAP

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8">

<title>Voronoi Treemap</title>

<script language="javascript" type="text/javascript" src="data.js"></script>
<script language="javascript" type="text/javascript" src="paper_simple_example.js"></script>
<script language="javascript" type="text/javascript" src="random_10_3_000.js"></script>

</head>
 
<body>

<h2>Voronoi Treemap</h2>

<div>

<select id="select_dataset">
<option value="data">Data</option>
<option value="paper_simple_example">Paper example</option>
<option value="random_10_3_000">Random breadth 10 depth 3</option>
</select>

<select id="select_polygon">
<option value="rectangle">Rectangle</option>
<option value="triangle">Triangle</option>
<option value="pentagon">Pentagon</option>
<option value="octogon">Octogon</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;

<!--
<label><input type="checkbox" name="checkbox_leaf_centroids" id="checkbox_leaf_centroids">Show Leaf Centroids</label>

&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);
	
	var select_dataset = get_selected_dataset();
	newnodes = vt(select_dataset);
	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.2.0/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js