wgloss

@wgloss·19 public vizzes

Scatter plot

This example shows a bare-bones HTML page that loads the D3.js library and begins fetching the classic Iris flower dataset from a GitHub gist. The code defines the D3 `csv` function to parse data from the provided URL, naming the data source explicitly. The page currently renders only the text "Hello HTML" and a script that attempts to call `csv`, but the data is not yet visualized, leaving the scatter plot unimplemented. It relies on D3 v6 and raw JavaScript within a simple HTML structure.

May 30, 2021

Loading thumbnail…

Double Harmonic

Two circles bounce between expanding and contracting in a loop, with one radius derived from a random integer and the other responding inversely to it. Built with D3 v6, the animation uses `setInterval` to regenerate data and update SVG circle attributes `r`, `cx`, and `cy` every 100 milliseconds. The `ball2radiusMaker` function toggles the second circle’s size based on whether the random value exceeds the midpoint, creating a visual counterpoint. The code reads as an algorithmic sketch inspired by Sol LeWitt’s geometric rules.

Apr 30, 2021

Loading thumbnail…

Fork of Double Harmonic Black and white

A black-and-white animated line traces a double pendulum motion, with two connected arms sweeping from a fixed center point and a small circle riding at the tip. The circle alternates between white and black fills while a larger shadow circle follows underneath. The animation updates every 50 milliseconds using JavaScript’s `setInterval`, and d3 v6 selection methods like `selectAll`, `data`, and `join` bind new positions to SVG `<line>` and `<circle>` elements.

Apr 10, 2021

Loading thumbnail…

Fork of Double Harmonic

A double pendulum animation built with D3.js v6 renders a black tracing line and white ball in SVG. The code uses `select`, `range`, and `setInterval` to update circle and line positions at each tick, computing the pendulum’s path from cosine and sine functions with a fixed psi ratio. The full-screen SVG shows two connected rods and the swinging tip, with ball radius and arm lengths as constants.

Apr 7, 2021

Loading thumbnail…

Double Harmonic

Two concentric pendulum arms trace a slowly evolving path. A large circle rotates around the center, and a smaller circle rotates around it, creating a complex harmonic motion. The visualization uses SVG elements, including circles and lines, and is updated at a fixed interval. The code employs D3’s `select`, `range`, and data join methods to render the animation, based on the `d3` library version 6.

Apr 6, 2021

Loading thumbnail…

Fork of D3 Starter

A grid of fifteen circles undulates vertically and changes radius in a continuous sine-wave pattern, creating a flowing wave effect across the screen. Running on a timer that updates every 20 milliseconds, the animation redraws each circle's y-coordinate and radius based on a sine function. The code uses D3 v6’s `select`, `range`, and data joins with `join('circle')` to bind and update SVG circle elements, while the viewport-sized SVG fills the browser window.

Apr 5, 2021

Loading thumbnail…

Sol LeWitt US Flag with d3.

This example recreates Sol LeWitt’s geometric interpretation of the US flag using D3.js and SVG. It draws the flag’s red and white stripes and blue canton through overlapping horizontal and vertical bands, each masked by a rectangular region that reveals the alternating pattern. White stars are placed in a grid across the canton, with a path symbolizing a five-pointed star. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the SVG elements and masks.

Apr 3, 2021

Loading thumbnail…

US Flag with d3.

This example uses D3.js to render the US flag as an SVG. The code calculates the flag’s proportions from an arbitrary base length, drawing the 13 red and white stripes with `rect` elements and the blue canton with a filled rectangle. Fifty white stars are created using D3’s `symbol` and `symbols` for a five-pointed star path, placed in alternating rows of six and five across the canton. The visualization is built entirely with D3’s low-level selection and joining APIs, scaling to fill the browser window.

Apr 3, 2021

Loading thumbnail…

Full Sol LeWitt Reproduction With D3 with multi symbols

A generative artwork reproduces Sol LeWitt's geometric style using D3.js and React. The SVG canvas displays interlocking horizontal and vertical lines, masked by D3 symbols (circles, crosses, diamonds, squares, stars, triangles, and wye shapes) positioned across the middle. Two masks invert the symbol fills to selectively reveal the line grid, creating layered visual intersections. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to render 100 rows and columns with 10-pixel line weights.

Mar 28, 2021

Loading thumbnail…

Full Sol LeWitt Reproduction With D3

This example reproduces a Sol LeWitt-style drawing using D3.js, rendering a full-screen SVG composed of 100 horizontal and 100 vertical stripes that are masked by two overlapping circular forms. The code directly uses `d3.select`, `d3.range`, and the `join` API to append and position the rectangles, while `d3.symbol` and `d3.symbols` generate the circular mask paths. The two masks, one inverted, are applied via the `mask` attribute to create a subtle interplay between the grid and the geometric shapes. The visualization responds to the browser window’s dimensions, as the width and height are taken from `window.innerWidth` and `window.innerHeight`.

Mar 28, 2021

Loading thumbnail…

Fork of Sol LeWitt Reproduction With D3

This visualization reproduces a Sol LeWitt-inspired geometric drawing using D3 v6 and SVG rendering in a React context. It shows a grid of horizontal and vertical rectangles, each with a circle-shaped mask, creating an intersecting pattern that reveals or hides lines depending on mask polarity. The code uses `d3.select`, `d3.range`, and SVG `mask` elements with black and white fills to produce the effect over a full-window canvas. Rendering relies on SVG attributes for positioning and sizing, with no external data source beyond generated ranges.

Mar 28, 2021

Loading thumbnail…

Sol LeWitt Exercise 9 x 4

This example recreates Sol LeWitt's Exercise 9 x 4 using randomly generated SVG rectangles, circles, and polygons. The code shows vertical and horizontal black-and-white striped bands with varied widths, layered over circular arc patterns that shrink in radius from the canvas edges toward the center. It uses the raw DOM API `createElementNS` to construct SVG elements, including masks that define which parts of the layered shapes remain visible. All geometric values, such as stripe widths and circle offsets, are derived from the `getRandomInt` and `offset` functions, producing a near-regular grid with subtle irregularities.

Mar 25, 2021

Loading thumbnail…

Sol LeWitt Exercise 9

This example recreates Sol LeWitt’s Wall Drawing Exercise 9, generating a grid of irregular polygons whose corners are randomly offset. The page fills the browser window with an SVG, drawing alternating black and white horizontal and vertical bands that are clipped to each polygonal region using SVG `<mask>` elements. The polygons split the viewport into a 3×3 grid, with each cell’s vertices jittered by random values. The code uses plain SVG APIs like `createElementNS`, `setAttribute`, and `appendChild`, with random offsets via `Math.random`.

Mar 24, 2021

Loading thumbnail…

Sol LeWitt Exercise Take 2

A web-based recreation of Sol LeWitt’s geometric wall drawings, this piece generates four triangular regions radiating from the canvas center toward the top, right, bottom, and left edges, each clipped by a distinct SVG mask. Within each masked region, either horizontal or vertical black rectangles are drawn with randomized widths and spacings, using the built-in `Math.random()` function and `getRandomInt` helper for variation. The SVG API creates the shapes, masks, and rectangles, while line thickness and gap sizes differ per region—ranging from 10 to 15 pixels with a variance of 6—producing an abstract, generative composition that fills the full browser viewport.

Mar 24, 2021

Loading thumbnail…

Sol LeWitt Exercise

A generative drawing creates a randomized geometric composition inspired by Sol LeWitt's wall drawings. The piece shows layered bands of rectangles meeting at the canvas edges, with a central diamond-like void formed by four triangular masks. Using plain JavaScript and the SVG DOM API, the code constructs masks and randomly sizes and positions horizontal and vertical rectangles to create a structured, grid-like pattern. Each render produces a unique variation based on the random offset and per-rectangle dimensions.

Mar 24, 2021

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing using procedural SVG. It first draws a series of vertical black rectangles across the full viewport, then applies an SVG mask containing a white circle over a black background to hide a central circular region. Horizontal strips are then drawn across the entire width, with the mask revealing only the area inside the circle, creating an intersecting grid pattern. The visualization uses raw JavaScript with the SVG DOM API to create elements dynamically, reacting to the browser window’s dimensions.

Mar 23, 2021

Loading thumbnail…

Fork of Exercise 1

This example displays the flag of the Seychelles as a static SVG graphic, constructed from five colored polygon shapes within a 300-by-150 viewBox. The code uses raw JavaScript and inline SVG elements, including `<svg>` and `<polygon>` tags, to render the flag’s diagonal bands of blue, yellow, red, white, and green. No external libraries or data processing are involved; the visual is defined entirely by hardcoded coordinate points and CSS style properties for fill colors. The page is a minimal HTML document that demonstrates direct SVG manipulation without any framework or dynamic behavior.

Mar 12, 2021

Loading thumbnail…

Exercise 1

This example renders a stylized flag of the United States using raw SVG elements. The graphic is composed of a dark blue rectangle for the canton and a series of red horizontal stripes, with a single white polygon representing a star. The code directly constructs the SVG markup in the HTML file, specifying each shape's coordinates and fill style. It relies on the browser's native SVG rendering through the `rect` and `polygon` elements, without any external JavaScript libraries or dynamic data. The design is static and purely declarative.

Mar 12, 2021

Loading thumbnail…

SVG Me

This example displays two concentric circles rendered directly inside an HTML page using pure SVG. A large blue circle with an orange stroke and a smaller red circle with a teal stroke are positioned together to create a simple layered composition. The code relies on inline SVG markup with standard attributes such as `cx`, `cy`, `r`, and `stroke-width`, avoiding any JavaScript or external libraries. The shape definitions are written directly in the `index.html` file, demonstrating how vector graphics can be embedded without additional frameworks.

Mar 11, 2021