Jasper Alblas

@JAlblas·4 public vizzes

D3 Selection Exploration (Improved)

A set of animated SVG circles and connecting lines demonstrates D3's data-join workflow. The visualization dynamically updates a changing dataset, using `selection.data()` with the `.join()` method to enter, update, and exit elements each frame. The code leverages D3 v6's `select` module and `scaleLinear` from the `d3` package. Data is generated procedurally with sine functions, producing oscillating positions and radii. Elements transition smoothly as `setInterval` triggers re-renders at 60 frames per second, highlighting D3's declarative approach to handling live data.

Jan 9, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

A fork of a Sol LeWitt reproduction built with D3 v3. The visualization layers two sets of alternating horizontal and vertical black-and-white bands, masked by repeating patterns of D3 symbol shapes. Using `d3.select`, `d3.range`, and `d3.scaleBand`, it generates 120 thin rectangles across the full window, each masked via `d3.mask`-like SVG masks. The `d3.symbol` API draws star-like glyphs at mask centers, with inverted symbol colors between the two mask layers to create intersecting geometric moiré patterns.

Jan 7, 2023

Loading thumbnail…

Fork of Episode 3: Sol LeWitt - circles pattern

This visualization recreates a Sol LeWitt-inspired geometric drawing using overlapping concentric circles centered on the canvas. The circles are drawn with a blue stroke and varying radii, but a mask restricts their visibility to a combination of a polygon, a circle, and a rectangle. The code builds the SVG structure dynamically using the DOM API, creating the mask and circles via JavaScript. The mask's white shapes reveal portions of the circle pattern, while the black background hides the rest, producing a fragmented, abstract composition.

Jan 6, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal interactive D3.js visualization: a single circle rendered as an SVG element. The circle changes its fill color and radius when hovered, using a CSS transition for a smooth three-second animation. The code relies on D3 version 7, loaded from a CDN, and manipulates the SVG circle's attributes directly through CSS and HTML, without invoking any specific D3 functions or data binding. The visualization serves as a basic starter template for D3 projects.

Jan 4, 2023