clara7227

@clara7227·19 public vizzes

Javascript Arrays

This example demonstrates how JavaScript arrays can be generated programmatically and logged to the console. It uses a custom `range` function to build an array of eight integers, then iterates through that array with the `forEach` method, printing each value. The visualization consists of a static HTML page with an inline script, styling the body with a large font size and centered text, and displays a "Hello HTML!" message. The core functionality relies on plain JavaScript array methods, with no external libraries or data sources.

Nov 11, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization renders a generative art piece inspired by Sol LeWitt, using vertical and horizontal bands that create a grid-like pattern on an SVG canvas. The code employs d3’s `scaleBand`, `range`, and `symbol` to draw repeating line segments within two overlapping masks, filling the full window size. The masks alternate white and black fills based on position, producing a structured, geometric composition that echoes LeWitt’s minimalist style.

Nov 11, 2022

Loading thumbnail…

4 try of Sol Lewitt reproduction with d3

This example reproduces a Sol LeWitt-inspired generative drawing using D3.js version 6 and React, rendered as SVG. It creates 100 horizontal and 100 vertical rectangles across the viewport, each masked so that alternating shapes—drawn with D3’s `symbol` API for circles, triangles, and other forms—reveal or hide the grid lines. Two masks are applied via `svg.call(renderMask, ...)` with inverted fill patterns, producing a layered, geometric composition. The code relies on D3 selections, `range`, `join`, and mask definitions to achieve the visual effect.

Nov 11, 2022

Loading thumbnail…

2. try Almost Original Sol Lewitt reproduction with d3

This visualization reproduces a Sol LeWitt-inspired geometric composition using a grid of horizontal and vertical rectangles overlaid with masked decorative symbols. The piece creates a dynamic interplay between the striped background and the alternating black-and-white shapes, including paths generated from D3's `symbol` API. Built with React, the code uses D3.js selection and joining methods (`select`, `append`, `join`) to construct the SVG elements, with masks (`mask` and `mask2`) defining which areas of the symbols remain visible.

Nov 11, 2022

Loading thumbnail…

3 try of Sol Lewitt reproduction with d3

This example recreates a Sol LeWitt-inspired wall drawing using D3.js and SVG. It renders 100 horizontal and 100 vertical rectangles across the full viewport, with each strip assigned a mask that clips it into a repeating pattern of D3’s built-in symbol shapes (circles, crosses, diamonds, and triangles). Two masks are applied: one uses black symbols on white, the other inverts the fill, creating contrast between the two overlapping grids. The code builds masks programmatically via a reusable `renderMask` function and leverages D3’s `range`, `symbol`, and `symbols` APIs to generate the clipped geometry.

Nov 11, 2022

Loading thumbnail…

Loop of Sol Lewitt reproduction with d3

This visualization reproduces a Sol LeWitt drawing by layering horizontal and vertical striped rectangles over a grid of 100 lines each, rendered as SVG shapes. The piece uses d3's `range`, `select`, `append`, and `join` APIs to generate the geometry, with mask elements that reveal or hide alternating shapes. Two masks, one inverted, create a loop of contrasting black-and-white symbols from d3's `symbols` array, including shapes like stars and crosses, positioned across the canvas. The code relies on d3 6.6.1 within a React-free HTML page, styling text with Archivo and IBM Plex Sans fonts.

Nov 11, 2022

Loading thumbnail…

Almost Original Sol Lewitt reproduction with d3

This example reproduces a Sol LeWitt-style wall drawing using D3.js within a React environment, rendered as scalable vector graphics (SVG). It generates a grid of horizontal and vertical rectangles, each masked to create alternating geometric patterns. The code uses D3’s `range`, `select`, and `join` APIs to efficiently create and update the SVG elements, and employs `symbol` to draw star-like shapes within the masks. The vignette demonstrates how procedural generation and masking can recreate minimalist art with code.

Nov 11, 2022

Loading thumbnail…

Refactoring Sol Lewitt reproduction with d3

This example reproduces a Sol LeWitt-inspired drawing using D3.js and SVG rendering within a React framework. It creates a grid of 100 horizontal and 100 vertical rectangles, each with a 10-pixel thickness, that span the full width and height of the viewport. The piece applies two distinct masks, generated with the D3 `symbol` API using a circle shape, to reveal or hide portions of the grid. The code demonstrates D3’s functional chaining with `select`, `range`, and `join` to build and style elements efficiently, while the masks are configured conditionally with inverted fills.

Nov 11, 2022

Loading thumbnail…

Full Sol Lewitt reproduction with d3

This visualization reproduces a Sol LeWitt wall drawing using a grid of thin horizontal and vertical rectangles generated with d3's `range`, `select`, and `join` methods. An SVG mask with a circular `symbol` path creates a central aperture, revealing the underlying grid in contrasting hues. The code renders entirely in-browser with React, using procedural loops to construct the 100x100 element pattern.

Nov 9, 2022

Loading thumbnail…

Fork of Sol Lewitt reproduction itv d3 correctly

This example reproduces a Sol Lewitt-inspired geometric artwork using D3 version 6.6.1 in a React environment, rendering to SVG. It generates 100 horizontal and 100 vertical rectangles spaced 20 pixels apart, covering the full viewport. Two SVG masks create circular cutout effects: one masks the horizontal bars with a white circle on black, the other applies an inverse pattern to the vertical bars. The code uses `select`, `range`, `.join('rect')`, and `.attr('mask')` to construct the layered composition dynamically.

Nov 9, 2022

Loading thumbnail…

Sol Lewitt reproduction itv d3 correctly

This visualization reproduces a Sol LeWitt-inspired geometric composition using two overlapping grids of thin rectangles: horizontal bars masked to reveal a white circle, and vertical bars masked to form the complementary black circle. The code builds an SVG canvas using d3-selection, generating 100 rectangles per axis via d3.range and data joins. Two SVG masks define the circular regions, with one mask inverting the other to create the contrasting shapes.

Nov 9, 2022

Loading thumbnail…

Fork of Sol Lewitt reproduction itv d3

This interactive piece displays two intersecting grids of rectangles within a circular mask, evoking Sol LeWitt's geometric wall drawings. The visualization pairs overlapping horizontal and vertical bands, with one grid serving as a negative mask to create a dynamic visual interplay between filled and empty space. Built with React and D3.js, the code uses the `select` API to construct SVG elements, the `range()` helper to generate iterations, and a layered masking technique to clip the rectangular pattern into a central circular composition. The result is a clean, generative study in form and negative space.

Nov 9, 2022

Loading thumbnail…

Sol Lewitt reproduction itv d3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js selections and SVG masks. Two sets of overlapping horizontal and vertical rectangles are generated with `selectAll` and `range()`, then clipped by circular masks to create an intersecting grid pattern centered on the screen. The first SVG layer uses a white circle on a black mask, while the second inverts the mask, producing contrasting visibility between the two orientations. The visualization renders dynamically to the full window size.

Nov 9, 2022

Loading thumbnail…

trying to do it right

This example creates an interactive, full-window SVG composition using raw JavaScript and the React framework. It shows a grid of vertical and horizontal black lines whose visibility is selectively masked by two overlapping circular regions, producing a striking crosshatch pattern with a central circular window. The code constructs SVG elements programmatically, defining two masks—one with a white circle on a black background and another with a black circle on white—to control which lines appear. It leverages the SVG `mask` API and dynamic `rect` generation to achieve the layered effect, with no external data source.

Nov 9, 2022

Loading thumbnail…

vertical and horizontal

This example generates a full-screen grid of red vertical and horizontal bars, but uses an SVG `<mask>` to reveal only a circular region at the center of the canvas. A white rectangle inside the mask covers the entire viewport, while a black circle cuts out the visible area, clipping the bars to that shape. The code builds the SVG elements directly with `document.createElementNS` and uses the Google Fonts "Archivo" and "IBM Plex Sans" for styling. The result is a crisp, geometric pattern with a circular window.

Nov 9, 2022

Loading thumbnail…

Geometry

This example renders a geometric pattern of red vertical and black horizontal bars overlaid on a full-screen SVG. A circular white mask, created with the SVG `mask` element, reveals a clean circular window centered in the viewport, clipping the grid-like arrangement of rectangles. The code builds the visualization entirely with raw JavaScript and SVG APIs, setting attributes like `width`, `height`, `x`, `y`, and `fill` on each `rect`. No external libraries or data sources are used; the composition relies purely on procedural generation and CSS styling for typography.

Nov 9, 2022

Loading thumbnail…

DOM Manipulation

This example demonstrates how to dynamically create an SVG scene using only native JavaScript DOM manipulation methods, without any external libraries. It generates a grid of red and black rectangles, then applies a circular mask to reveal a striking circular composition at the center of the viewport. The code uses `document.createElementNS` and `setAttribute` to construct SVG elements, including a mask, circle, and rects, with dimensions determined by the window size. The result is a minimalist, geometric pattern that highlights the power of direct SVG element creation and styling.

Nov 9, 2022

Loading thumbnail…

Fork of SVG Fundamentals

This example shows a static bar chart-like composition built with raw SVG elements, displaying four gray rectangular bars of varying heights on a light background. The chart is accompanied by black text labels and path-based annotations, including the letter “A” and numeric values rendered as SVG `<path>` elements. The visualization is implemented using React with inline SVG markup, and the page imports the Archivo and IBM Plex Sans fonts via Google Fonts. The rendering approach relies entirely on hand-coded SVG coordinates and shapes without any data-driven JavaScript or charting library.

Oct 28, 2022

Loading thumbnail…

SVG Fundamentals

This example introduces the fundamental building blocks of SVG and HTML rendering. The visible page displays the text “Hello HTML!” centered with a font size of 13em on a blank background. The code uses plain CSS for styling and a basic HTML structure with a `div` element, demonstrating how static text is rendered without JavaScript or SVG shapes. It references a separate React starter example for comparison but does not implement any React components or dynamic data bindings in this version. The example serves as a minimal baseline for understanding web rendering contexts.

Oct 28, 2022