lt_vandegrift@live.com

@lorinv11·7 public vizzes

Bundles

This visualization displays the classic Iris dataset as a scatterplot, mapping petal length on the x-axis against sepal length on the y-axis. Points are colored on a green gradient based on their petal length value. The implementation uses D3 v5’s `csv` loader and `scaleLinear` for positioning, with `axisLeft` and `axisBottom` for the axes. Rendered as SVG circles, the marks are animated via a `setInterval` loop that re-joins the data every 100 milliseconds, creating a subtle flickering effect as the points refresh.

May 3, 2024

Loading thumbnail…

Fork of Moving Dots - getting fancy

This example visualizes a dynamic wave pattern of 40 circles and connecting lines that oscillate vertically and change size over time. The circles and lines move in a sine-wave formation, with their positions and widths updating continuously to create a flowing, animated effect. The code uses D3.js version 6.6.1 with the `select`, `range`, and `join` APIs to efficiently update SVG elements, and runs an animation loop at 60 frames per second via `setInterval`. The chart renders entirely in SVG with no external data source, purely generated from mathematical functions.

May 1, 2024

Loading thumbnail…

Moving Dots

Animated dots move in a wave-like pattern across an SVG canvas, with their count oscillating between five and fifteen over time. The visualization uses D3’s `select`, `range`, and data joins with `join()` to efficiently create, update, and remove circle elements each frame. A `setInterval` at 60 frames per second updates a time variable that drives both the vertical sine-wave motion and the changing number of dots, rendering in React with D3 version 6. The background is blank, focusing solely on the dynamic positioning of the circles.

May 1, 2024

Loading thumbnail…

Fork of Full Fork of D3 Starter

This example demonstrates a generative pattern of horizontal and vertical bars overlaid with SVG masks that reveal circular shapes derived from D3 symbols. The visualization renders 100 thin rectangular strips in each direction, sized to the viewport, and applies a mask containing a symbol path. Using D3 v6 with the `select`, `range`, `symbols`, and `symbol` APIs, the code constructs SVG elements dynamically, with the mask’s fill toggled by an `inverted` boolean to alternate visible regions. It functions as a starter template emphasizing minimal layout and mask-based clipping.

May 1, 2024

Loading thumbnail…

Full Fork of D3 Starter

This example demonstrates how D3 SVG masks can create overlapping geometric patterns. It generates 100 horizontal and 100 vertical rectangles, then applies two distinct masks with inverted fill rules to reveal or hide different regions. The code uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to draw predefined symbol shapes within each mask. The visualization fills the browser window, with symbol paths placed at regular intervals across the width, producing a dynamic interplay between the grid lines and masked shapes.

May 1, 2024

Loading thumbnail…

D3 Starter

This example demonstrates generating a grid of horizontal and vertical lines across the full browser window, masked by two circular cutouts. The alternating line orientations create a crosshatch pattern that appears only within the circular regions, leaving the rest of the canvas blank. The visualization uses D3's `select` and `range` functions to append SVG `rect` elements, with masks (`circle-mask` and `circle-mask-2`) defining the visible areas. The code highlights the declarative D3 API for data-driven element creation and SVG attribute manipulation.

May 1, 2024

Loading thumbnail…

Fork of HTML Starter

This example creates a full-window SVG scene using native JavaScript and the DOM API, without any external libraries. It draws 100 horizontal and 100 vertical rectangles to form a grid, with horizontal bars partially obscured by an SVG mask that reveals a central circle. The mask combines a black background rect with a white 200-radius circle at the center, so only the bars inside that circle are visible. The rendering approach relies on `document.createElementNS` to build SVG elements and `setAttribute` for dynamic sizing based on `window.innerWidth` and `window.innerHeight`.

May 1, 2024