Ian Newby

@ianewby·3 public vizzes

Basic Laberinth

This interactive D3 maze generator creates a 15x15 tile-based labyrinth. Players navigate by clicking directional arrows along the board’s edges to slide entire rows or columns of tiles, demonstrating a classic sliding-puzzle mechanic. The visualization uses SVG paths and gradients for the stone-textured board and colored tiles, with a redundant spare tile that moves as rows and columns shift. The code employs D3 selections and event handlers, including `select`, `range`, and custom `touch` logic, to manage tile state and animation on user input.

Dec 18, 2025

Loading thumbnail…

Multi-Line Chart

A multi-line chart displays multiple frequency-domain signals stacked vertically, each with its own amplitude trace and label. The visualization uses D3 v4 to render the data as animated SVG paths, with a skewed perspective and brush-based zooming for interactive exploration. It leverages `d3.scaleLinear`, `d3.axisBottom`, `d3.brushX`, and `d3.line` to handle scaling, axes, brushing, and path generation, while the data comes from a JSON array containing signal measurements.

Jun 26, 2023

Loading thumbnail…

Visualizing Percentages

Three SVG progress indicators—a rounded bar, a donut, and a gauge—display the same 35% value in a React-based dashboard. The bar’s fill width and the donut’s arc length are computed by multiplying the total width or circumference by `progress`. The gauge uses a d3 `arc` generator with start and end angles mapped to the progress fraction. All indicators use a shared `VizContainer` SVG wrapper, with D3’s `timeFormat` computing the current day of the year.

Sep 27, 2021