AhsanNayaz

@AhsanNayaz·2 public vizzes

Data

This example renders a single message, "Data," centered on the page with a massive 13em font size, demonstrating a bare-bones HTML/CSS layout. It uses the Lottie library via the `bodymovin.loadAnimation()` API to load an external `data.json` animation file into an SVG container, with looping and autoplay enabled. The page relies on the Lottie library for animation playback, while the rest of the visual is static text styled by embedded CSS. The JavaScript is minimal, focusing on initializing the animation with a given path rather than custom data processing.

Jul 16, 2022

Loading thumbnail…

D3 Starter

This example demonstrates a generative, grid-based visual composition using D3 version 7. It creates an SVG canvas that fills the browser window and draws 100 horizontal and vertical striped rectangles, each masked by a set of overlaid symbols. The code uses D3's `select`, `range`, `symbols`, and `symbol` APIs to generate the stripes and to render mask patterns that reveal or hide the underlying grid. The masks are created with SVG `<mask>` elements, and the two complementary masks produce an interlaced effect across the screen.

Jul 15, 2022