ayo

@AyoKuye·5 public vizzes

Fork of Fork of Sol Lewit d3

This example, titled “Fork of Fork of Sol Lewit d3,” presents a minimal, empty visualization canvas using D3 version 7.8.5. The code renders a blank HTML page with a full-viewport body and no visible graphics, relying on the `d3.select` API to demonstrate the foundational setup for a D3 project. It includes a package.json specifying the D3 dependency and an iframe embedded in the README, but the visualization itself shows no data or rendering logic. The example serves as a starting point for building D3-based visualizations, likely inspired by Sol LeWitt’s conceptual art.

Jun 18, 2023

Loading thumbnail…

Fork of Sol Lewit d3

This example generates a geometric Op-art style composition with a grid of horizontal and vertical bars. Rendered as SVG using D3 version 7, it uses `select`, `range`, `join`, and `symbol` to create 100 rectangles in each orientation. Two SVG masks (`circle-mask` and `circle-mask-2`) combine black-and-white shapes to selectively reveal the bars, producing a circular cutout effect.

Jun 18, 2023

Loading thumbnail…

Sol Lewit Reproduction Vertical

This example reproduces a Sol LeWitt-style drawing with vertical and horizontal striping. Thin vertical and horizontal rectangles are drawn across the full width and height of the viewport, each masked so only a central circular region reveals the intersecting grid pattern. The visualization uses D3 selections, data joins with `range()`, and SVG `mask` elements to layer two complementary color schemes. The code relies on D3 version 7.8.5 and renders entirely as an SVG graphic.

Jun 18, 2023

Loading thumbnail…

Sol Lewit Reproduction

This example reproduces a Sol LeWitt-inspired wall drawing using a simple generative SVG approach. It creates 100 narrow vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across the full width of the browser window, with each rectangle stretching the full height of the viewport. The code builds the SVG dynamically using the raw DOM API (`document.createElementNS`) rather than a visualization library, setting the width and height attributes from the window’s inner dimensions. No data source is used; the pattern is purely algorithmic and deterministic.

Jun 7, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates the basics of SVG shape styling and interaction, using a single red circle with a thick black stroke on a plain background. Hovering over the circle triggers a CSS transition that gradually changes its fill to green and expands its stroke width over three seconds. The implementation relies on inline SVG elements within an HTML page, styled entirely through CSS, while the accompanying JavaScript uses `select` from D3 version 7 to replace the body's text content, showing a minimal D3 setup.

Jun 7, 2023