Voronoi.js

Usage

First, include voronoi.min.js:

<script type="text/javascript" src="voronoi.min.js></script>

initialization:

var width = 800, height = 600;
var data = {
  children: [
    {children: [ {value: 100}, {value: 200}, {value: 300} ]},
    {children: [ {value: 100}, {value: 500}, {value: 900} ]}
  ]
};
var clip = Voronoi.Polygon.create(width, height, 20);
var treemap = new Voronoi.Treemap(data, clip, width, height);

update and render:

setInterval(function() {
  treemap.compute();
  render();
}, 100);

Sample renderer with d3.js:

/* render polygons */
d3.selectAll("path").data(treemap.getPolygons())
.enter().append("path").attr({
  d: function(it) { ... }
});

/* render centroid of polygons */
d3.selectAll("circle").data(treemap.getSites())
.enter().append("circle").attr({
  cx: function(it) { return it.x; },
  cy: function(it) { return it.y; },
  r: function(it) { return Math.sqrt(it.value); }
});

Sites

You can use these generated attributes in your data to determine how to render:

• x: x coordinate
• y: y coordinate
• lv: depth of node in treemap

Polygons

Polygon is a point array. For example, a triangle:

[{x: 0, y: 0}, {x: 100, y: 100}, {x: 200, y: 0}]

Use Voronoi.Polygon.create to quickly generate a N side regular polygon:

var clipPolygon = Voronoi.Polygon.create(width, height, N);

and use it in Voronoi treemap to indicate the clipping region of the whole treemap:

var voronoi = new Voronoi.Treemap(data, clipPolygon, width, height);

Note

This library is implemented base on this publication:

Arlind Nocaj and Ulrik Brandes, "Computing Voronoi TreemapsFaster, Simpler, and Resolution-independent", Eurographics Conference on Visualization (EuroVis) 2012

Author

Kirby T. Wu ( follow on twitter )

License

voronoi.js is released under MIT License.