FraserChapman

@FraserChapman·3 public vizzes

Antescher

A rotatable isometric map of the video game Ant Attack is rendered on an HTML canvas. The map is drawn as a grid of 3D blocks, each shaded with gray faces to simulate depth. Users can press "m" and "n" to rotate the view in 90-degree increments, left-click and drag to pan, and use the mouse wheel to zoom. The example is built with plain JavaScript, using canvas drawing and event listeners for all interactions.

Mar 13, 2025

Loading thumbnail…

Down-sampling time series data

This example demonstrates how the Largest-Triangle-Three-Buckets (LTTB) algorithm reduces a 1,000-point time series to a smaller set that preserves the visual shape of the data. The chart first shows the raw data as a line, then applies LTTB with a threshold tied to half the SVG width, ensuring at most one point per two pixels to avoid aliasing. The code uses D3.js (v3) with `d3.time.scale` and `d3.svg.line` for axes and rendering, and the algorithm is adapted from Steinarsson's thesis. A label updates to show the original versus downsampled point counts.

Feb 19, 2025

Loading thumbnail…

linear gradient with draggable stops.

This example demonstrates an interactive linear gradient with draggable axis ticks, where the color stops align proportionally to their corresponding domain values. It shows how gradient offsets update in real time as users drag ticks horizontally to modify the domain. Built with D3.js (v3), it uses a linear scale, SVG `linearGradient` definitions, and drag behavior to redraw the gradient dynamically. The color scheme is selectable from a dropdown, and the domain regenerates randomly, while tick labels display both the value and its percentage offset. Rendering is handled via SVG, with data represented as hardcoded hex color ranges and generated numeric domains.

Feb 19, 2025