guts

@guts982·15 public vizzes

Fork of D3 Selections Explorations - exercise - lines

A set of colored circles and connecting lines animates in a wave pattern across the screen. The visualization uses D3 selections with `join` to update SVG circles and lines every frame, driven by a `setInterval` loop. Data is generated procedurally using `d3.range` and sine functions for position, radius, and color. The code explicitly imports `select` and `range` from D3 v7, updating attributes like `cx`, `cy`, `r`, and line endpoints in real time.

Oct 11, 2023

Loading thumbnail…

D3 Selections Explorations - exercise

A generative animation renders a dynamic scatter of circles connected by lines, with positions, radii, and colors oscillating over time. The code imports `select` and `range` from D3 v7, builds an SVG, and a 60 FPS interval updates data via a custom `makeData` function using sine waves. Selections with `join` update circles and lines, while attributes like `cx`, `cy`, `r`, and stroke colors animate smoothly. Data is generated procedurally, with no external source.

Oct 11, 2023

Loading thumbnail…

Fork of D3 Selections Explorations

A grid of circles undulates in sine-wave patterns across the screen, with each circle’s vertical position and radius oscillating over time to create a flowing, wave-like motion. The animation runs at 60 frames per second, updating a dataset generated by `makeData.js` that calculates `x`, `y`, and `r` values from trigonometric functions of time. Using D3 v7 selections, `selectAll('circle').data().join()` binds the changing data to SVG circle elements, while chained `.attr()` calls update their positions and sizes in a tight loop. The scene sets its dimensions to the full browser viewport and hides overflow for an immersive, full-window display.

Oct 11, 2023

Loading thumbnail…

D3 Selections Explorations

This example demonstrates dynamic data binding in D3.js, showing a group of circles that smoothly oscillates in count and position to create a flowing wave-like pattern. Using D3 selections and the `join('circle')` method, it updates the SVG in real time, while a `setInterval` callback runs at 60 frames per second. The code leverages `d3.range` to generate data points and animates their x and y coordinates based on trigonometric functions of a time variable. The visualization is rendered entirely with SVG elements in an HTML page.

Oct 11, 2023

Loading thumbnail…

JavaScript Arrays

This example demonstrates the result of sorting a JavaScript array of numbers in ascending order using D3’s `d3.ascending` comparator. It shows the sorted array output in the browser’s console, not on the page. The code defines an array, calls `arr.sort()` with the D3 comparator, and logs the reordered values. The visualization is minimal, consisting only of a blank HTML page with a large placeholder message style, while the actual data processing relies on D3 v7 and JavaScript’s native array methods.

Oct 11, 2023

Loading thumbnail…

Full Sol LeWitt Reproduction with D3 - exercises

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js. It displays four distinct shapes—a black diamond, a yellow four-pointed star, a red cross, and a blue rotated square—positioned across the screen. The visualization uses SVG rendering with D3’s `symbol` generator, applying rotations and translations via `attr('transform')` to arrange each shape. The code relies on D3 v7, importing the library and using `d3.symbol` with different symbol types and sizes, while filling each path with specific colors.

Oct 11, 2023

Loading thumbnail…

Full Sol LeWitt Reproduction with D3 and path masks refactored

This visualization reproduces a Sol LeWitt art piece using D3.js, displaying a grid of horizontal and vertical bars that are selectively revealed through two SVG path masks. The masks, created with the `symbol` function to generate complex paths, alternately invert their fill to hide or show different sections of the overlapping rectangles. The code uses D3’s `select`, `range`, and `join` APIs to efficiently build the SVG structure, with masks applied via the `mask` attribute. The artwork is rendered dynamically based on the browser window’s dimensions.

Oct 11, 2023

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v7, displaying 100 horizontal and vertical striped rectangles that overlap to create a grid pattern. Two SVG masks, each containing a large diamond symbol, selectively hide portions of the stripes, revealing the geometric interplay between the layers. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate the shapes, with masks defined via SVG `<mask>` elements and rendered as a static SVG scene.

Oct 11, 2023

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical lines that intersect to form a subtle pattern across the full browser viewport. The piece relies on two SVG masks—one circular and one rectangular—to selectively reveal or hide portions of the line arrays. Specifically, a path generated via `symbol(symbols[1],100000)` creates a large circular mask over the vertical lines, while a black circle mask obscures the horizontal lines in a contrasting region. The code uses D3’s `select`, `range`, and `join` APIs to efficiently append hundreds of SVG rect elements, with all rendering performed client-side in SVG format.

Oct 11, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece as a full-screen SVG. It creates 100 horizontal and 100 vertical bars, each with a fill mask, layering them to form a grid. The masks use a circle to reveal a central disk, with the second mask inverting the effect. The piece uses D3's `select`, `range`, and `join` APIs to build the SVG elements and masks.

Oct 11, 2023

Loading thumbnail…

Fork of patterns masked

This example uses SVG masks to create a geometric pattern of horizontal and vertical stripes that disappear within a circular region. Two complementary masks (`circle-mask` and `circle-mask2`) control which stripes are visible, with the horizontal lines masked by a black circle and the vertical lines masked by its inverse. All elements are created dynamically using the native `document.createElementNS` API, rendering 100 rectangles in each direction without any external libraries.

Oct 3, 2023

Loading thumbnail…

patterns masked

A grid of horizontal and vertical stripes is partially revealed through a circular mask, creating a layered pattern where the lines cross and overlap within the masked region. The visualization uses raw SVG APIs, including `document.createElementNS` to construct rectangles and a mask with a circle, alongside `setAttribute` to position elements. The stripes form a woven texture, and the mask highlights a central focal area while leaving the surrounding space empty.

Oct 3, 2023

Loading thumbnail…

Patterns solo witt vertical

A stacked array of horizontal bands fills the browser window, with 100 rectangles of fixed height rendering as a full-screen vertical pattern. Each band spans the entire viewport width, creating a simple striped composition. The example uses plain SVG elements created via `document.createElementNS` and configured with setters for `width`, `height`, and `y` positions. No data source or animation is involved; the pattern is generated procedurally in JavaScript and appended directly to an SVG root element sized to the viewport.

Oct 3, 2023

Loading thumbnail…

Patterns

This example generates a full-screen abstract composition of 100 thin vertical rectangles. It uses the SVG namespace to create each rect element directly via JavaScript, setting the x position to increment by 20 pixels and giving each a fixed width of 10 pixels and a height equal to the window height. The visualization relies on `document.createElementNS` and `svg.appendChild` to build the pattern dynamically, without any external libraries.

Oct 3, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental SVG shape elements—circle, rect, and path—positioned within a fixed 940x460 canvas. The shapes use basic visual styling properties including fill colors, stroke colors, and stroke width, all defined as SVG attributes. The HTML document embeds the SVG markup directly, with a cascading style sheet rule that sizes a message container but remains unused. The rendered output is a simple composition of geometric forms on a yellow background with a black border, illustrating core vector graphics concepts without external libraries.

Oct 3, 2023