Ainsley Francis

@ainsleyfrancis·4 public vizzes

Sol Lewitt

This example renders a minimalist, generative visualization inspired by Sol LeWitt’s geometric art. It displays 100 thin, evenly spaced vertical lines that span the full height of the browser window, creating a subtle striped pattern across the entire viewport. The code uses raw JavaScript with the DOM API to create an SVG `rect` for each line, appending them to an `svg` element sized to the window’s inner dimensions. A `circle` element is also initialized but left without coordinates, so it remains invisible in the final output.

Dec 9, 2022

Loading thumbnail…

SoLewitt

This visualization recreates a Sol LeWitt-inspired drawing by generating 24 random points on a square SVG canvas. It displays the points as small green circles, with the instruction set implying that half are connected by straight lines and half by wavy lines. Built with D3 version 7, the code uses `d3.range` to create the data and `d3.scaleLinear` to map coordinates, while `d3.axisBottom` and `d3.axisLeft` render the axes. The rendering approach is purely SVG-based, appended directly to the HTML body.

Dec 9, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes by rendering two circles on a 1000x1000 canvas, one plain black and one with an explicit red fill. It serves as a bare-bones HTML page showing how SVG elements are written directly into the document structure, using the circle element and its basic attributes. The code relies solely on native SVG and HTML markup—no external libraries such as D3 or React—making it a minimal starting point for understanding vector graphics syntax and styling.

Dec 9, 2022

Loading thumbnail…

Smily Part Five

The visualization displays a large golden smiley face centered on a rectangular SVG canvas, with two circular eyes and a thick orange mouth arc. Built with React and D3 v6, it uses reusable functional components and D3’s `arc` generator to compute the mouth path. The face, eyes, and stroke styling are rendered explicitly as SVG elements within a React component tree.

Apr 10, 2021