JaapSuter

@JaapSuter·5 public vizzes

Poisson-Disc

The visualization shows a square canvas being progressively filled with small circles using Poisson-disc sampling, a method for generating evenly distributed random points. The algorithm, based on Bridson’s technique, ensures each new point is at least a specified distance from existing ones, creating a uniform, pseudo-random pattern. Built with d3.v3, the animation adds circles one at a time via `d3.timer`, with each circle’s radius animated using `transition()`. The code explicitly implements the sampling logic, including a grid-based spatial index for efficient distance checks, and renders the result as SVG circles.

Mar 12, 2016

Loading thumbnail…

Node Graph Editor

This interactive node graph editor uses D3.js to render a scalable vector graphic (SVG) canvas. The visualization initially displays a red rectangle that transitions to a blue color over three seconds with a bouncing easing effect. The code sets up a fixed SVG viewport with margins and uses D3’s transition and ease methods to animate the rectangle’s fill. The example demonstrates basic D3 selection, attribute setting, and animated styling within an HTML document.

Oct 30, 2015

Loading thumbnail…

Directed Graph Editor

This interactive directed graph editor displays a network of nodes and edges that users can create, drag, and connect. The visualization uses a force-directed layout, with nodes represented as circles and edges as lines with arrowheads to indicate direction. The editor relies on D3’s built-in force simulation API to calculate the physics-based positions of nodes and handles mouse interactions directly. The code defines the graph data structure in `app.js` and uses the `d3.forceSimulation` to update the positions of connected nodes dynamically.

Oct 30, 2015

Loading thumbnail…

Sliding Windows Example

Sliding Windows Example demonstrates a continuously updated bar chart where the oldest data points slide out as new ones arrive. The visualization uses a sliding window of 33 bars, with each new value generated from a random walk, updating every 1.5 seconds. Built with d3.v3 for SVG rendering and Bacon.js for functional reactive programming, the `slidingWindow` operator manages the data flow while d3 transitions animate the bars shifting leftward.

Dec 31, 2013

Loading thumbnail…

Gist 7251163

This donut chart visualizes the distribution of CPU usage ranges, such as “< 50%” and “70-80%,” with each segment’s arc length proportional to the count in the accompanying CSV data. Built with d3.v3, the SVG graphic uses `d3.layout.pie` to compute the pie slices, `d3.svg.arc` to define the ring geometry, and `d3.scale.ordinal` to assign categorical colors. Labels are placed at each arc’s centroid, and the data is loaded asynchronously via `d3.csv`.

Oct 31, 2013