Alexander Milevski w8r

Click and drag above to paint red hexagons. A black outline will appear around contiguous clusters of red hexagons. This outline is constructed using topojson.mesh, part of the TopoJSON client API. A filter is specified so that the mesh only contains boundaries that separate filled hexagons from empty hexagons.

The hexagon grid itself is represented as TopoJSON, but is constructed on-the-fly in the browser. Since TopoJSON requires quantized coordinates, the hexagon grid is represented as integers, with each hexagon of dimensions 3×2. Then a custom projection is used to transform these irregular integer hexagons to normal hexagons of the desired size.

This example shows the stability of the Peano space-filling curve: each order of the curve can be overlapped to each other (click the canvas to see it).

By stability, we indicate the property of the curve to yield stable layouts, suitable for treemaps that follow our data cartography methodology. According to it, a slight change in input data should be reflected only by a slight change in the map. An unstable curve (like the classical Hilbert curve, see this example) could cause a map to flip even if a single cell is added.

This example demonstrates how to take the size of objects into account when selecting objects efficiently with a quadtree. Selected objects are shown in red, visited but not selected objects are shown in yellow. The efficiency depends on the biggest width and biggest height among all object. It is assumed that all objects are rectangle-shaped.

Example series:

Quadtree 1
Quadtree 2
Quadtree 3

Based on Mike Bostock's quadtree example.

	255.255.255.255 006.free-counter.co.uk
	255.255.255.255 006.freecounters.co.uk
	255.255.255.255 06272002-dbase.hitcountz.net # Web bugs in spam
	255.255.255.255 09killspyware.com
	255.255.255.255 0stats.com
	255.255.255.255 1.adbrite.com
	255.255.255.255 1.httpads.com
	255.255.255.255 1.primaryads.com
	255.255.255.255 102.112.2o7.net
	255.255.255.255 102.122.2o7.net

	var simplifyPath = function( points, tolerance ) {

	// helper classes
	var Vector = function( x, y ) {
	this.x = x;
	this.y = y;

	};
	var Line = function( p1, p2 ) {
	this.p1 = p1;

	/**
	*
	* Hooking up Watchify with Google's Web Starter Kit
	*
	* The primary use cases for Browserify/Watchify are:
	* - Node.js-style `require`s on the client-side
	* - Use of npm modules on the client-side
	* - No more new <script> tags for each new script/module
	*
	* 1. npm install --save-dev vinyl-source-stream browserify watchify gulp-notify

	/*
	Stanislav Sumbera, August , 2015

	- scaled SVG draw prototype on top of Leaflet 1.0 beta
	- note it uses L.map patch to get it working right
	- SVG data are not modified, only scaled and optionaly radius/stroke width etc. can be specified on onScaleChange callback

	- very experimental
	*/
	//-- Patch to get leaflet properly zoomed

	license: gpl-3.0
	height: 960

	license: gpl-3.0
	height: 960

	license: gpl-3.0
	height: 900