Michael Gomersall

@gomersallm·3 public vizzes

Reusable D3 Scatterplot

This example demonstrates a reusable scatterplot component built with React and D3.js, visualizing the classic Iris dataset. It uses `d3.csv` to fetch and parse the data, `scaleLinear` to map petal length and sepal length to pixel coordinates, and `axisLeft` and `axisBottom` to render the axes. The plot is rendered as SVG via a custom `scatterPlot` function that supports configurable width, height, margins, and radius, following a pattern for reusable D3 charts.

Jul 14, 2023

Loading thumbnail…

Vertical Fork of Fork of SVG Fundamentals - Sol LeWitt repro follow-along

This example reproduces a Sol LeWitt art piece using dynamically generated SVG. The visualization displays a grid of horizontal and vertical lines, with a central circular region where the lines are masked and inverted. The code creates an SVG canvas and uses two masks—a circle mask and an inverse mask—to selectively reveal the line patterns. Horizontal rectangles are drawn with a circle mask applied, while vertical rectangles use the inverse mask, creating an alternating visual effect. The rendering is purely code-driven, with no external data source, and relies on the Document Object Model (DOM) API for SVG element creation.

Jun 9, 2023

Loading thumbnail…

Fork of SVG Fundamentals - Sol LeWitt repro follow-along

This example reproduces a Sol LeWitt art piece using dynamically generated SVG rectangles. The code creates 100 vertical black bars, each 10 pixels wide, evenly spaced across the full window height, filling the browser viewport. It uses the Document API (`createElementNS`) to build SVG elements from scratch within JavaScript rather than a dedicated visualization library. The rendering approach directly mirrors LeWitt’s geometric, minimalist style by iterating through a fixed count of shapes.

Jun 9, 2023