Haritscode

@Haritscode·8 public vizzes

Fork of D3 selection exploration

This example demonstrates a simple scatter plot of the Iris dataset, mapping petal length and width to x and y positions. It creates a responsive SVG chart using D3 v7, with scales and axes configured via `scaleLinear`, `axisLeft`, and `axisBottom`. Data is loaded as CSV and parsed, then circles are joined to the SVG using `selectAll` and `data`. The plot fills the browser window, with margins applied to the axes.

Aug 5, 2023

Loading thumbnail…

D3 selection exploration

This example demonstrates animated selection and data-join techniques in D3, showing fifteen circles bobbing vertically in a sine-wave pattern across the screen. The visualization uses d3.select and d3.range to generate data, then applies the .join('circle') method to bind that data to SVG elements. A setInterval loop running at 60 frames per second updates the circles’ cx and cy attributes, with the y-position calculated from a sine function of the data index and a time variable t. The animation relies entirely on d3 v7’s selection methods and SVG rendering.

Aug 5, 2023

Loading thumbnail…

Fork of Fork of D3 Starter

This example creates a black-on-white striped pattern using 100 horizontal and vertical rectangles, with the stripes clipped by two D3 SVG masks. The masks are defined with a central symbol glyph (drawn via `d3.symbol`) surrounded by concentric ring symbols, where one mask uses a white glyph on a black background and the other inverts the colors. The clipped stripe grid reveals the layered symbol composition and demonstrates D3’s `selectAll`, `join`, and `range` API for generating repeated elements.

Aug 5, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a striped mask effect by layering two sets of rectangles with intersecting patterns. The SVG output shows vertical black bars overlaid with horizontal black bars, where both layers use SVG masks to reveal or hide portions of the rectangles. The code uses D3 v7’s `select`, `range`, and `data` joins to generate 100 rectangles per axis across the full viewport. The first mask exposes a rectangular region while the second mask inverts it, creating a dynamic checkerboard-like visual from the overlapping shapes.

Aug 5, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a geometric masking effect by layering vertical and horizontal rectangles on an SVG canvas. Using D3 v7, it creates 100 vertical bars and 100 horizontal bars across the viewport, applying two SVG masks to reveal intersecting shapes. The first mask uses a white background with a black circle, while the second inverts the pattern, producing a cross-shaped visual interaction. The code relies on D3 selections, the `range()` generator, and SVG `mask` elements to achieve the composition.

Aug 4, 2023

Loading thumbnail…

Fork of D3 Starter

This example shows how D3 version 7 can create layered geometric patterns by combining SVG masks with repeated rectangles. The visualization produces four distinct regions: a striped horizontal pattern with a cut-out square, a vertical stripe pattern, and two sections where horizontal or vertical bars are masked by a circle and square. The code constructs SVG elements directly using the DOM API, building masks (mask1 through mask4) that define which parts of the rectangles are visible. The approach relies on creating rectangles of varying widths and heights, applying masks that contain contrasting black and white shapes, and iterating 30 or 60 times to generate the repeating bar patterns across the screen.

Aug 4, 2023

Loading thumbnail…

Practicing sol Lewitt pattern

This interactive visualization generates a geometric pattern inspired by Sol LeWitt’s wall drawings, filling the browser window with a single black rectangular vertical band against a blank canvas. The code builds the SVG graph using native DOM methods (createElementNS) rather than D3’s selection helpers, while D3 v7 is loaded but not actively used in the visible logic. The pattern is created by applying a black SVG mask to the rectangular stripe, with dimensions tied to the viewport’s width and height. The rendering is minimal and static, offering a direct homage to LeWitt’s systematic, rule-based aesthetic.

Aug 3, 2023

Loading thumbnail…

Fork of D3 Starter

This example shows a grid of horizontal and vertical stripes across the full viewport, with a circular region at the center appearing brighter against the surrounding dark mask. The code uses D3 v7 selections to append two groups of rectangles, each generated from a `range(100)` data array, and assigns SVG masks to each group. The first mask contains a black rect with a white circle, while the second uses inverse colors, creating the overlapping visual effect.

Aug 3, 2023