JeppeOEM

@JeppeOEM·9 public vizzes

Fork of D3 Starter

This example demonstrates a simple D3.js starter template that renders a grid of rectangles across the full window. The visualization uses nested loops to create SVG groups at regular intervals, with each group containing multiple rectangles positioned vertically. The code imports `select` and `range` from the d3.v7 library and uses data joins with `.join('rect')` to append elements. The page scales text to 13em and includes a YouTube tutorial link, while the JavaScript calculates grid margins based on window dimensions and sets the SVG size to fill the viewport.

Feb 27, 2023

Loading thumbnail…

Sol

This interactive artwork reproduces a Sol LeWitt-inspired drawing using SVG. It displays a grid of vertical and horizontal lines that are partially revealed through a mask containing geometric symbols. The piece builds the composition by layering 100 rectangles in each orientation. The visualization uses D3.js, specifically the `select`, `range`, `symbols`, and `symbol` APIs, to generate the mask patterns and render the final image dynamically based on the browser window size.

Feb 27, 2023

Loading thumbnail…

FFFSDASDASDAS

This piece reproduces a Sol LeWitt drawing as a generative grid of horizontal and vertical lines. The lines are masked by two complementary filters: one mask reveals a set of symbolic glyphs, while the inverse mask hides them, creating a complex interplay of line and form. The code uses the D3.js library, specifically `select`, `range`, `symbols`, and `symbol`, to build SVG elements and apply masks. The output is rendered as a single SVG.

Feb 26, 2023

Loading thumbnail…

FFFF

This example reproduces a Sol LeWitt-inspired geometric composition using overlapping striped grids and two circular masks. It renders 100 horizontal and 100 vertical rects in an SVG, with each set filtered through a distinct mask that reveals or hides portions of the lines. The masks are built with `d3.symbol` and the `symbols[2]` shape, creating two large circles that intersect to produce a dynamic, patterned interplay of light and dark areas. The code uses D3’s `select`, `range`, `join`, and `mask` APIs to generate the layered structure and the final visual effect.

Feb 25, 2023

Loading thumbnail…

Sol witte complete selection

This example reproduces a Sol LeWitt-inspired geometric composition using SVG. It displays a grid of horizontal and vertical rectangles that are partially obscured by two overlapping masks: one reveals a large diamond shape, while the other hides a circle in the center. The code uses D3.js version 6.6.1 with selections and the `join()` method to generate the rectangles, and the `d3.symbol` API to draw the diamond path. The result combines structured linework with negative space, mimicking the artist’s minimalist aesthetic.

Feb 25, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 and SVG. It uses `select` to create an SVG canvas and `range` to generate data for drawing a grid: horizontal and vertical rectangles are appended with `.join('rect')`. Two SVG mask elements (`circle-mask` and `circle-mask-2`) reveal the grid through a central circular opening, with one mask inverting the other to create a contrasting effect. The visualization runs at full browser window size using D3 version 6.6.1.

Feb 25, 2023

Loading thumbnail…

Fork of D3 Implementation jepp

A grid of horizontal stripes fills the screen, each row visible only through a circular cutout at the center. The visualization uses an SVG mask with a white circle over a black rectangle to reveal the stripes beneath. Built with D3 v7, the code uses `select`, `range`, and `join` to create 500 axis-aligned rectangles, each 10 pixels tall, with a fixed 200-pixel radius mask applied to every element.

Feb 25, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction je

This example shows a generative SVG reproduction of a Sol LeWitt wall drawing, rendered as a series of horizontal bands. The code uses the D3.js selection and data-join API to create 100 rectangular marks, each positioned vertically and sized to cover the full window width. A circular mask, defined in SVG and applied to every rectangle, clips the bands into a circular disk, mimicking the geometric aesthetic of LeWitt’s instructional art. The rendering approach relies on raw JavaScript to construct the SVG elements and apply the mask attribute.

Feb 25, 2023

Loading thumbnail…

Fork of Hello VizHub

This fork of the Hello VizHub example combines static SVG shapes and paths to create a playful geometric composition. It renders a red rectangle with a thick black stroke that transitions to green on hover, alongside a series of cubic Bézier curves forming abstract patterns and a yellow filled path. The code imports D3’s `select` API from `d3` v5 to set text content from a local ES6 module, while styling is handled through embedded CSS and an external stylesheet. No external data is used; the visualization relies entirely on hardcoded SVG markup.

Feb 23, 2023