LAP-JV Worker

100%

✓ Published0🌍 Public

Last edited Oct 31, 2018

Created on Jan 3, 2017

This interactive visualization demonstrates the Jonker-Volgenant algorithm for the Linear Assignment Problem, showing 1,600 colored points being optimally matched to a 40×40 grid. The points animate by drawing lines from their original positions to their assigned grid cells, then the circles follow to their destinations. Built with D3 v4 (using SVG and transitions), the computation runs in a Web Worker using the LAPJV algorithm from Fil’s JavaScript port, with random point generation and cost calculation based on squared Euclidean distances.

AI-generated description

LAP-JV

Linear Assignment Problem — algorithm by R. Jonker and A. Volgenant

Ported to javascript by Philippe Rivière, from the C++ implementation found at https://github.com/yongyanghz/LAPJV-algorithm-c

See Fil/lap-jv for details, and a simpler example.

mit Licensed

Similar vizzes

Loading thumbnail…

LAP-JV

This example visualizes the linear assignment problem, where colored circles are matched to a grid of cells to minimize total cost. The animation shows each circle transitioning from its random starting position to its assigned grid cell, with connecting lines drawn first, followed by the circles moving into place. The most expensive attribution is highlighted with an annotation callout, showing its cost. The code uses D3 v4 for SVG rendering and transitions, the `lap` function from Fil's port of the Jonker-Volgenant algorithm, and the `d3-annotation()` library to label the maximum-cost pairing. Random data drives the visualization, with distances computed as squared Euclidean offsets.

PPhilippe Rivière

85% match

Loading thumbnail…

LAP-JV

The LAP-JV example visualizes the Linear Assignment Problem, showing how seven randomly placed points are optimally matched to a 7x7 grid of target cells. The code uses the `lap()` function from the lap-jv library to compute the minimum-cost assignment, with costs derived from squared Euclidean distances. Animated SVG lines initially converge from points to their assigned grid positions, followed by circles transitioning to their final cells, while a d3-annotation callout highlights the most expensive attribution. The visualization relies on d3.v4 with SVG transitions and the d3-annotation library to label the result.

DDougManuel

84% match

Loading thumbnail…

d3 Voronoi Worker

A thousand randomly moving points drive a live Voronoi tessellation, visualized as colored cells on a Canvas. A separate SVG circle tracks the mouse, while the page displays the frame rates of the data updates, the tessellation computation, and the overall rendering. The heavy Voronoi calculation runs in a Web Worker using `d3.voronoi()`, keeping the mouse tracking responsive even when the tessellation lags behind.

PPhilippe Rivière

69% match

Loading thumbnail…

intersection-multi-line

A grid of animated, multi-colored lines traces the paths of moving points, with highlighted intersection points where lines cross. Rendered with SVG and canvas, the visualization uses d3.js to compute and draw line intersections in real time, creating an intricate, ever-changing pattern. The animation emphasizes the dynamic relationships between the moving lines as they intersect.

11wheel

64% match

Loading thumbnail…

Rotating Voronoi in colors

Dozens of colored points orbit along concentric circular paths, while the Voronoi cells surrounding them are resampled and smoothed into curved, lens-like shapes that continuously rotate and morph. The animation is rendered as an SVG, with each cell’s fill and stroke sampled from a two-color linear scale. The code uses d3.geom.voronoi to compute cells, a basis-closed line interpolator for curvature, and d3.timer to drive the point motion and redraw the paths.

PPhilippe Rivière

63% match

Loading thumbnail…

vertical jittered line (grids)

This example renders a grid of vertical jittered lines, where each line is drawn within a brick-shaped cell and perturbed by random offsets in both x and y directions. It uses d3.gridding to arrange 3,050 data points into a brick layout, then d3.line with curveBasis to draw each path from five sequentially spaced points. The random jitter is applied via Math.random() within the line generator, producing a scribbled, hand-drawn aesthetic. The visualization is built with D3 v4 and rendered as SVG paths.

FFrissAnalytics

63% match

Loading thumbnail…

SoLewitt

This visualization recreates a Sol LeWitt-inspired drawing by generating 24 random points on a square SVG canvas. It displays the points as small green circles, with the instruction set implying that half are connected by straight lines and half by wavy lines. Built with D3 version 7, the code uses `d3.range` to create the data and `d3.scaleLinear` to map coordinates, while `d3.axisBottom` and `d3.axisLeft` render the axes. The rendering approach is purely SVG-based, appended directly to the HTML body.

AAinsley Francis

62% match

Loading thumbnail…

Voronoi binning

4000 random points are colored by the nearest of 400 weighted sites, selected as the top 10% by a random weight and arranged as a Voronoi diagram using d3.voronoi. A custom `find` method on the diagram, which walks neighboring cells via halfedges and optimizes from the last result, assigns each point the site color of its containing cell. Circles are rendered in SVG, with radius proportional to the square of each point’s weight.

PPhilippe Rivière

62% match