D3 Examples - Weighted Voronoi Treemap in D3v4

Weighted Voronoi Treemap in D3v4

This block is a port, from d3v3 to d3v4, of mkedwards's block: Treemap.

Warning sometimes (1% of time), code fails to compute the layout, and doesn't update the svg. In such a case, you have to (re-)compute diagram.

Updates

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)

min and max functions consider all elements (instead of starting at index 1)

rework computeDistanceBorder to make it compatible with the wikipedia formula (fixes error Cannot set property 'twin' of null of the original block)

in voronoiTreemap/iterate, when adapt weight (second adaptation), compute min distance border based on clipped polygon (initialy, was computed on NON clipped polygon)

rework linearDependant function

in setClipPolygon, order bounding sites in counterclockwise

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 impacts are on paint() function

add a label.json file, with a very simple hierarchy, for debug purpose

remove activity.json file

On-going issues

sometimes (1% of time), 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; I've already work on this error, and drastically lower its arising; but there is still some unknown situations that still raise this error ...

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.

xxxxxxxxxx
 
<!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="https://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>
​
<br><br>
​
<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>
​
<script language="javascript">
function make_regular_polygon(width, height, border, sides) {
    var center = [width*0.5, height*0.5],
        width_radius = (width - 2*border) * 0.5,
        height_radius = (height - 2*border) * 0.5,
        radius = Math.min( width_radius, height_radius ),
        angle_radians = 2*Math.PI / sides,
        initial_angle = sides%2==0 ? -Math.PI/2 -angle_radians*0.5 : -Math.PI/2, // subtract angles
        result = [],
        somevariable = 0;
    
    // special case few sides
    if (sides == 3) {
        center[1] += height_radius / 3.0; // can always do this (I think?)
    
        radius_for_width = width_radius * 2 / Math.sqrt(3);
        radius_for_height = height_radius * 4.0 / 3.0;
        radius = Math.min(radius_for_width, radius_for_height);
    }
    else if (sides == 4) {
        radius *= Math.sqrt(2);
    }
    
    for (var i = 0; i < sides; i++) {
        result.push([center[0] + radius * Math.cos(initial_angle - i * angle_radians), center[1] + radius * Math.sin(initial_angle - i * angle_radians)]);
    }
​
    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]];
​
    var select_polygon = d3.select("#select_polygon").node().value;
    if (select_polygon == "rectangle") {
        return entire_svg_polygon;
    }
    else if (select_polygon == "triangle") {
        return make_regular_polygon(width, height, border, 3);
    }
    else if (select_polygon == "pentagon") {
        return make_regular_polygon(width, height, border, 5);
    }
    else if (select_polygon == "octagon") {
        return make_regular_polygon(width, height, border, 8);
    }
    else if (select_polygon == "circle") {
        return make_regular_polygon(width, height, border, 100);
    }   
}
​
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.data.children ? "none" : d.parent ? color_d3(d.parent.data.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.depth<max_depth && 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>
​
    