Riccardo Scalco riccardoscalco

This example adapts mbostock's quadtree brushing demo to find the nearest neighbor (shown red) of a new point (shown yellow). Choose a new point to classify by clicking on the diagram. (An alternative approach for nearest neighbors of the mouse position is D3's Voronoi polygons, but the idea here would extend to rapidly classifying many new points against a base collection of points.)

We use a data-dependent order of recursion through the quadtree

General Background and Overview

Probabilistic Data Structures for Web Analytics and Data Mining : A great overview of the space of probabilistic data structures and how they are used in approximation algorithm implementation.
Models and Issues in Data Stream Systems
Philippe Flajolet’s contribution to streaming algorithms : A presentation by Jérémie Lumbroso that visits some of the hostorical perspectives and how it all began with Flajolet
Approximate Frequency Counts over Data Streams by Gurmeet Singh Manku & Rajeev Motwani : One of the early papers on the subject.
[Methods for Finding Frequent Items in Data Streams](http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.187.9800&rep=rep1&t

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

Trigonometry

const float PI = 3.1415926535897932384626433832795;
const float PI_2 = 1.57079632679489661923;
const float PI_4 = 0.785398163397448309616;

float PHI = (1.0+sqrtf(5.0))/2.0;

Please consider using http://lygia.xyz instead of copy/pasting this functions. It expand suport for voronoi, voronoise, fbm, noise, worley, noise, derivatives and much more, through simple file dependencies. Take a look to https://github.com/patriciogonzalezvivo/lygia/tree/main/generative

Generic 1,2,3 Noise

float rand(float n){return fract(sin(n) * 43758.5453123);}

float noise(float p){
	float fl = floor(p);
  float fc = fract(p);

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.

Engines and libraries ⚙️

Name	Stars	Last Commit	Description
three.js	![GitHub

	# Install ARCH Linux with encrypted file-system and UEFI
	# The official installation guide (https://wiki.archlinux.org/index.php/Installation_Guide) contains a more verbose description.

	# Download the archiso image from https://www.archlinux.org/
	# Copy to a usb-drive
	dd if=archlinux.img of=/dev/sdX bs=16M && sync # on linux

	# Boot from the usb. If the usb fails to boot, make sure that secure boot is disabled in the BIOS configuration.

	# Set swedish keymap

	const glslify = require('glslify');
	const path = require('path');

	// This is the original source, we will copy + paste it for our own GLSL
	// const vertexShader = THREE.ShaderChunk.meshphysical_vert;
	// const fragmentShader = THREE.ShaderChunk.meshphysical_frag;

	// Our custom shaders
	const fragmentShader = glslify(path.resolve(__dirname, 'standard.frag'));
	const vertexShader = glslify(path.resolve(__dirname, 'standard.vert'));

	// e.g. console.save({hello: 'world'})
	(function(console){
	console.save = function(data, filename){
	if(!data) {
	console.error('Console.save: No data')
	return;
	}
	if(!filename) filename = 'console.json'
	if(typeof data === "object"){
	data = JSON.stringify(data, undefined, 4)