Alexander Milevski w8r

Drag from an existing node to add a new node or link. Click to select/deselect nodes/links. Hit the DELETE key to remove the selected node or link. Drag to pan. Scroll to zoom.

Built with D3.js.

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.

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.

	import React, { PureComponent } from "react";
	import { StyleSheet } from "react-native";
	import ReglView from "./ReglView";
	import mat4 from "gl-mat4";
	import bunny from "bunny";

	export default class Bunny extends PureComponent {
	drawCommand = regl => {
	return regl({
	vert: `

	/********************************************************************
	* *
	* Curve Rasterizing Algorithm *
	* *
	********************************************************************/

	/**
	* @author Zingl Alois
	* @date 22.08.2016
	* @version 1.2

	/node_modules/
	bundle.js

	license: gpl-3.0
	height: 900

	license: gpl-3.0
	height: 960