Skip to main content
SimilarExport ZIP
100%

GIRIBnW_JM-3_VizHub logo Sol_Lewit

✓ Published0🌍 Public
JJimMaltby
Last edited Oct 10, 2021
Created on Oct 10, 2021

The visualization generates a full-screen pattern of repeating VizHub logos arranged in both horizontal and vertical bands, with alternating white and black circular masks that create an interlocking two-tone effect. It uses D3 v6's `select`, `range`, and `path` modules to render SVG paths, scaling and rotating the logo via `transform` strings. The `mask` elements with `rect` and `circle` shapes define the visible regions. The composition adapts to the window dimensions, computing row and column counts dynamically to fill the viewport with the repeating logo geometry.

AI-generated description

To create VizHub logo repeating path that spans the width of screen AKA a band of repeating logo.

MIT Licensed

Similar vizzes

Loading thumbnail…

GIRIBnW_JM-3_VizHub logo Vertical Bands

The visualization displays the VizHub logo repeated as a single vertical band of rotated, scaled paths spanning the full screen height. A single SVG path is replicated across the viewport using a D3 data join, with each iteration positioned by a transform function that calculates the x-coordinate based on the logo’s original length and a 0.05 scale factor, plus a 90-degree rotation. The code imports `select`, `range`, and `path` from the D3 library to generate the repeating pattern, rendering the black-and-white logo in a continuous column from top to bottom.

JJimMaltby
92% match
Loading thumbnail…

GIRIBnW_JM-3_VizHub logo Horizontal Band

A horizontal band of repeated VizHub logos spans the full screen width, with each logo rendered in black as a single SVG path. The code uses D3's `select`, `range`, and `path` functions to generate the repeating pattern, calculating the number of iterations based on the viewport width and a fixed logo scale of 0.05. The `join('path')` method binds the range data to SVG path elements, applying a scale and translate transform to position each logo. The original logo path data is stored as a constant string and reused for every repetition.

JJimMaltby
91% match
Loading thumbnail…

GIRIBnW_JM-3_VizHub logo Horizontal Bands ForLooped

This visualization displays a grid of miniature VizHub logos tiled as horizontal bands across the full screen. Built with D3.js (v6.6.1), the code defines a single logo path and uses `select().append('svg')` to create an SVG canvas sized to the browser window. It calculates the number of repetitions needed and uses a nested for-loop to push position coordinates into an array, which is then bound to the `d3.join('path')` method. Each path is scaled to 5% of its original size and translated via a custom transform function, creating a repeating pattern that spans both axes.

JJimMaltby
89% match
Loading thumbnail…

GIRIBnW_JM-3_VizHub Width Path

The visualization creates a repeating band of the VizHub logo that spans the full width of the browser window. Using D3.js, the code calculates how many times the logo must be repeated to cover the screen width based on a scaling factor of 0.05, then appends SVG path elements in a loop. Each logo is positioned horizontally using SVG transform translations. The original logo path data is scaled and reused in a straightforward iterative pattern, resulting in a continuous decorative strip across the viewport.

JJimMaltby
89% match
Loading thumbnail…

GIRIBnW_JM-3_VizHub logo Horizontal Bands

This example creates a repeating VizHub logo pattern that spans the full width and height of the browser window. Using D3 v6, it imports `select`, `range`, and `path` to render SVG path elements in a grid formation. The code scales the logo path by a factor of 0.05 and translates it horizontally and vertically based on calculated array lengths for the screen dimensions. Multiple bands of logos are generated by nesting D3 selections, where outer groups handle vertical positioning via the `yPosition` function and inner paths apply the logo path data with horizontal transforms.

JJimMaltby
89% match
Loading thumbnail…

GiRiB&W_JM_Ep3-ex

The visualization replicates a Sol LeWitt–style geometric composition using repeated horizontal and vertical bands formed by hundreds of thin rectangles, rendered as SVG. Two circular masks—one with a black background and white circle, the other inverted—reveal and hide intersecting strips, creating a dynamic black-and-white pattern at the center. Built with D3 v6, the code uses `select`, `range`, and `.join()` to generate the rectangles, while SVG `<mask>` elements define the circular cutouts. The artwork fills the entire browser window, adapting to viewport dimensions.

JJimMaltby
77% match
Loading thumbnail…

jmbv Fork of Hello VizHub

This example demonstrates D3.js SVG masking by drawing two sets of overlapping horizontal and vertical rectangles, each clipped by circular masks to reveal a central circular window. The code uses `d3.select` and `d3.range` to generate 100 rectangles per axis, with one mask using a black background and white circle, the other inverted. The visualization fills the browser viewport using `window.innerWidth` and `window.innerHeight`, producing a dynamic grid-like pattern visible only within the overlapping masked region.

JJuanmaBV
73% match
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-pt4

White and black horizontal and vertical stripes fill the entire browser window, but patterned mask regions interrupt them. Two separate groups of stripes intersect, producing a grid-like texture. The artwork uses D3 selections and joins to generate 100 rectangles in each orientation. A custom `renderMask` function builds two SVG masks, each containing a single D3-symbol shape, to reveal or hide portions of the stripes. The rendering is entirely SVG-based, with D3 v6.6.1 handling data binding and symbol generation.

JJimMaltby
72% match