Akinola Samson

@Popsicool·3 public vizzes

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3’s `select` and `range` APIs to generate layered SVG rectangles. Two groups of 100 horizontal and vertical striped rects are rendered across the full viewport, each masked with circular clip regions. The first mask reveals a white circle on a black background, while the second inverts the effect, creating a central pattern of intersecting bands. The code constructs SVG masks and rects dynamically, with dimensions tied to the window size.

Feb 13, 2024

Loading thumbnail…

Olympics logo

This example renders the Olympic logo as five static SVG circles in blue, black, red, yellow, and brown, arranged in the iconic interlocking pattern on a white background. The HTML defines each circle directly with explicit `cx`, `cy`, `r`, and `stroke` attributes, while D3 is loaded via UNPKG but only used in `index.js` to set a message text. The visualization demonstrates basic SVG composition without any data binding or dynamic behavior, relying on plain markup for the graphic.

Feb 12, 2024

Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub demonstrates the core workflow of D3.js v5 with ES6 module imports, both from the local codebase and the D3 library itself. The example renders the text "Hello VizHub!" into a DOM element using the `select` function from D3, which is loaded via UNPKG. It also imports a custom message from a separate ES6 module, `myMessage.js`, to show modular code organization. The text is styled with a centered, 12-em font size defined in an external CSS file, showcasing how D3 code integrates with standard web styling.

Feb 12, 2024