Arnulfotos

@Arnulfotos·8 public vizzes

Fork of D3 Starter

This example demonstrates the simplest possible starting point for a D3 visualization: a web page displaying the text “Hello D3 version 7” centered on the screen. It uses the D3 v7 library, loaded via a CDN script tag, and calls `select('body').text(...)` from `d3` to set the body’s text content. The accompanying README and video explain how to adapt this starter template for building more complex interactive charts and graphs.

Sep 7, 2023

Loading thumbnail…

FULL D3 Sol LeWitt Reproduction a la G

This example reproduces a Sol LeWitt-inspired drawing using D3 version 6 in an SVG. It layers 100 horizontal and 100 vertical stripes across the full viewport, which are selectively revealed through two masks. The first mask uses a large diamond symbol from `d3.symbol` to cut a hole in the horizontal stripes, while the second mask employs a circle to reverse the effect on the vertical lines. The code constructs these masks with `svg.append('mask')` and positions elements dynamically with `window.innerWidth` and `window.innerHeight`.

Feb 18, 2023

Loading thumbnail…

D3 Sol LeWitt Reproduction a la class

This example reproduces a Sol LeWitt wall drawing using a grid of horizontal and vertical SVG rectangles that are selectively revealed through two circular masks. The masks invert their fill colors so that one circle exposes horizontal stripes while the other exposes vertical stripes, creating an intersecting cross-hatch pattern. The code uses D3 v6 selection methods like `select` and `range` to generate 100 rectangles in each direction, with SVG `mask` elements defining the circular regions. The visualization fills the entire browser window and renders entirely as vector graphics.

Feb 18, 2023

Loading thumbnail…

D3 Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired wall drawing using a full-screen SVG canvas. It generates a grid of horizontal and vertical bands with D3’s `range()` and `selectAll().join()` pattern, creating 100 stripes in each direction. Two SVG masks with central circles reveal overlapping stripe patterns: one masks horizontal stripes with a white circle on black, the other masks vertical stripes with a black circle on white. The result produces a dynamic, intersecting geometric composition that shifts with the viewer’s window size.

Feb 18, 2023

Loading thumbnail…

Stage 2 of Sol LeWitt Reproduction

This example reproduces the second stage of a Sol LeWitt wall drawing using raw SVG and JavaScript. It creates two circular masks over a full-window canvas, then draws 100 horizontal and 100 vertical stripes. Horizontal stripes appear only inside the first mask, while vertical stripes are visible outside the second mask, producing a grid that shifts from a solid square to an open circle at the center. The code builds all elements dynamically using `document.createElementNS` and sets attributes directly, with no external libraries.

Feb 18, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using SVG and JavaScript. A circular mask isolates a group of horizontal stripes, while un-masked vertical lines extend across the full canvas. The code generates 100 horizontal rectangles with a set height and 100 vertical rectangles, positioning them in a grid pattern via the `createElementNS` API. The mask, defined with a `circle` element, limits the horizontal stripes to a central circular region, creating a subtle intersection effect between the two sets of lines.

Feb 18, 2023

Loading thumbnail…

Fork of D3 Implementation

Two sets of 100 striped rectangles overlay each other at right angles, revealing a circular window at the center through SVG masks. Built with d3.select and d3.range, the code generates horizontal and vertical bars filled with alternating colors. Each set applies a mask combining a full-screen rect with a 200-pixel-radius circle, one using a white circle on black and the other inverting the colors. The result forms a crosshatched grid visible only inside the overlapping circular region, rendered as vector SVG graphics scaled to the full browser viewport.

Feb 11, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in a web page using the Fetch API. It fetches a remote CSV file containing CSS named colors and logs the raw text response to the browser console. The code uses the asynchronous `fetch` function within a custom `fetchText` helper, chaining a `.then()` callback to handle the retrieved data. No visualization is rendered; the focus is purely on retrieving and inspecting the CSV text.

Oct 19, 2022