Héloïse Feldmann

@Yheloww·10 public vizzes

javascipt arrays

This example demonstrates how to visualize the contents of JavaScript arrays as interactive nodes. The index.html file loads D3.js and uses its force simulation to position the array elements. The code constructs SVG circles for each data point, with colors and sizes mapped to the array values. The visualization updates dynamically as new data is pushed to the arrays, showing how the layout responds to changes. The example relies primarily on D3’s `d3.forceSimulation` and standard SVG rendering to depict the array structure.

May 11, 2023

Loading thumbnail…

sol lewit full exs

This example displays a dense grid of thin, overlapping horizontal and vertical rectangles across the full screen, creating a woven, textile-like pattern. The code uses d3.select to build an SVG, then applies two d3.mask elements to reveal symbols from a set of d3.symbols, with each mask inverted to produce alternating cross-shaped cutouts. The composition shows how repeated geometric shapes can be filtered through masks to create intricate visual textures.

May 5, 2023

Loading thumbnail…

Fork of d3 sol lewit

This visualization generates a grid of horizontal and vertical rectangles on an SVG canvas, with two masks that reveal or hide different symbol shapes across the grid. The project uses D3 v6 APIs including `select`, `range`, `symbols`, and `symbol` to render the masked patterns. The two masks, created via `renderMask`, alternate between white and black backgrounds with the opposite fill for the symbols, producing a moiré-like interplay between the line grid and the overlaid symbol clusters. The code runs on a React framework and uses raw SVG rendering with dynamic window dimensions.

May 5, 2023

Loading thumbnail…

d3 sol lewit full

This example generates a geometric line pattern using D3.js and SVG, rendering a grid of horizontal and vertical rectangles across the full browser window. Two masks, one inverted, create a cross-shaped cutout in the center by selectively hiding or revealing the rectangular bands. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs to build the SVG elements, while `mask` elements with paths control the visibility. The design is inspired by Sol LeWitt’s minimalist wall drawings, with the cross motif emerging from the overlapping masked layers.

May 5, 2023

Loading thumbnail…

Fork of advancement sol lewit

This visualization creates a geometric pattern of overlapping horizontal and vertical rectangles, masked by two circular regions that reveal different sections of the grid. The code uses D3 selections and data joins to generate 100 thin rectangles in each direction across the full viewport. Two SVG masks control visibility: the first shows a white circle on black, while the second inverts this pattern, producing an interplay of solid and empty forms inspired by Sol LeWitt's minimalist wall drawings.

May 5, 2023

Loading thumbnail…

advancement sol lewit

This example shows a geometric composition inspired by Sol LeWitt's wall drawings. It creates two circular masks overlaid on a grid of thin rectangles. A series of horizontal bars are clipped to a central white circle, while vertical bars outside that circle are shown through an inverse mask. The result is a crosshatched pattern that reverses direction at the boundary of the inner disk. The piece uses raw SVG manipulation via the DOM API, constructing elements with `createElementNS` and applying `mask` attributes to control visibility.

May 5, 2023

Loading thumbnail…

Fork of Sol Lewitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript without any external libraries. It renders two sets of overlapping rectangles: 100 horizontal stripes and 100 vertical stripes, both evenly spaced across the full window size. A circular mask, defined via the SVG `mask` element, restricts visibility of the horizontal stripes to a centered circle, creating a layered geometric effect. The code dynamically creates SVG elements using `document.createElementNS` and appends them to the page, with all dimensions derived from `window.innerWidth` and `window.innerHeight`.

May 5, 2023

Loading thumbnail…

Sol Lewitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing using SVG, rendering 100 horizontal bars masked by a central circle. The code builds the visualization dynamically with the `document.createElementNS` API, creating a white rectangle and black circle to define the mask, then looping through the bars. Each bar is 10 pixels tall, spaced 20 pixels apart, and clipped by the `url(#circle-mask)` reference. The visualization fills the entire browser window, with the mask and bars sized based on `window.innerWidth` and `window.innerHeight`, producing a geometric composition of stripe-like shapes.

May 5, 2023

Loading thumbnail…

Sol Lewitt Reproduction

This example reproduces a Sol LeWitt-inspired wall drawing using raw SVG elements created directly through the DOM API. It shows a series of 100 thin vertical rectangles evenly spaced across the full height of the browser viewport, creating a minimalist striped pattern. The visualization uses `document.createElementNS` to generate SVG `rect` elements, setting each rectangle’s width to 10 pixels and its horizontal offset to 20 pixels apart. No external libraries are used, relying purely on vanilla JavaScript and CSS to render the geometric composition dynamically based on the window size.

May 5, 2023

Loading thumbnail…

Untitled

This example presents an empty HTML page with a blank 960 by 500 pixel SVG element, styled by a minimal CSS block and accompanied by an empty JavaScript section. It serves as a bare-bones starting point for building interactive visualizations, demonstrating the basic structure of an HTML document that incorporates CSS and JavaScript with an SVG rendering surface. The code does not include any data, axes, or graphical marks, and it uses no external libraries or APIs, instead relying on plain HTML, CSS, and JavaScript. This is a foundational template rather than a finished visualization.

May 4, 2023