vivhogan@gmail.com

@vivhogan·10 public vizzes

Animated Reusable D3 Scatter Plot

This example presents an interactive scatter plot of the classic Iris dataset, using D3.js to visualize the relationships between sepal and petal measurements. The visualization cycles through different variable pairings on the x-axis every three seconds, with animated transitions between states. It employs D3's `scaleLinear` for coordinate mapping, `transition` for smooth animations, and the `.join` pattern for idempotent SVG rendering with growing and updating circles. Data is loaded via `d3.csv` and parsed dynamically.

Aug 21, 2026

Loading thumbnail…

Animated Reusable D3 Scatter Plot

This animated scatter plot cycles through four measurements from the Iris dataset, updating the x-axis every second while the y-axis remains fixed on sepal length. D3 scales map data values to pixel coordinates, and circle elements are re-bound with a key function for smooth transitions. The reusable chart function `scatterPlot()` exposes setters for width, height, margins, radius, and accessors, while `setInterval` and `svg.call(plot)` drive the periodic re-rendering with axis updates.

Aug 21, 2026

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, animating the x-axis to cycle through petal width, sepal width, petal length, and sepal length every second. Built as a reusable D3.js module, it uses `d3.scaleLinear` for axes and a `setInterval` loop to update the visualization. Rendered as SVG with a join-style approach for circles and axes, the plot includes tooltips showing exact x and y values.

Aug 21, 2026

Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the classic Iris flower dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each data point is rendered as a circle with an SVG `<title>` element that reveals precise coordinates on hover. The visualization uses `d3.scaleLinear` to map data values to pixel positions within specified margins, while `d3.axisBottom` and `d3.axisLeft` create labeled axes. The code loads data asynchronously via `d3.csv` and generates the plot with `d3.select` and `.join('circle')`.

Aug 20, 2026

Loading thumbnail…

D3 Selections

This example demonstrates D3 data joins and the general update pattern for animated circle visualizations. A sinusoidal function generates changing datasets with varying circle counts, positions, and radii, which the code binds to SVG circles using `selectAll`, `data`, and `join`. The animation runs via `setInterval`, updating attributes like `cx`, `cy`, and `r` to create smooth motion. It uses D3’s selection API to handle entering, updating, and exiting elements seamlessly.

Jul 31, 2026

Loading thumbnail…

Sol LeWitt Reproduction with D3

A generative reproduction of a Sol LeWitt wall drawing uses D3 selections, data joins, and SVG masks to compose layered striped patterns. The code generates 100 horizontal and vertical rectangles and applies two masks, each containing different D3 symbol shapes, to carve alternating geometric forms across the grid. Masks are constructed programmatically via a reusable `renderMask` function, toggling between inverted and non-inverted fills. The example relies on `d3.range`, `d3.symbols`, `d3.symbol`, and method chaining to build the full composition dynamically based on the viewport size.

Jul 31, 2026

Loading thumbnail…

Sol Lewitt Reproduction

This piece reproduces a Sol LeWitt-style generative drawing using layered, rotating horizontal and vertical bands. Two SVG masks—one with a white circle on black, the other inverted—reveal different textures within a central circular region. Narrow rectangles animate with `animateTransform`, rotating from 360 to 0 degrees over 10 seconds, creating a dynamic moiré effect. Built with plain JavaScript and the SVG DOM API, the composition fills the browser window and interactive hover turns rectangles red.

Jul 23, 2026

Loading thumbnail…

Fork of Sol Lewitt Reproduction

This visualization reproduces a Sol Lewitt wall drawing as a grid of four distinct geometric patterns, one per quadrant, created programmatically with vanilla JavaScript and SVG. It shows repetitive black vertical stripes in the upper left, yellow horizontal bars in the upper right, angled rectangles in the lower left, and a matching striped composition in the lower right. The code builds the SVG using `document.createElementNS`, applying `clipPath` elements to confine each shape set to its quadrant. No external libraries are used; all graphics are generated through direct SVG element manipulation.

Jul 22, 2026

Loading thumbnail…

Pseudo Grouped Barplot

This pseudo grouped barplot displays three categories, A, B, and C, each containing three bars in distinct pastel colors. The chart avoids a traditional axis, focusing instead on the visual comparison of bar heights across the groups. Each bar is a manually placed SVG `<rect>` element, styled with CSS classes that define its fill color and add a black outline on hover. The chart is built with plain SVG in an HTML file, using the Google Font "Share Tech" for its large text labels. The data is entered directly into the markup rather than generated programmatically.

Jul 21, 2026

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shape rendering in a static HTML page, using the raw SVG API to draw circles, lines, and a custom path. The code creates overlapping circles to illustrate paint order, horizontal colored lines of varying hues, and a zigzag path with a black stroke. The `SVG` markup defines all elements directly within the `index.html` body, with no JavaScript-driven interaction or data binding—the accompanying `index.js` only logs a message. Rendering relies entirely on the browser's native SVG support, showcasing coordinate systems, fill, stroke, and geometric primitives.

Jul 21, 2026