SGPPellow

Epis5 d3 select

Fifteen circles animate vertically in a wave pattern across an SVG canvas. The visualization uses D3's `select` and `range` functions to generate data points, with `makeData` computing sine-based y-coordinates that shift over time via a `setInterval` loop. The `vizData` function binds the changing data to circle elements using D3's data join, updating their `cx` and `cy` attributes at 60 frames per second. The React-wrapped page fills the entire viewport with no margins or scrollbars.

Sep 26, 2022

Epis5 Javasript array

This example demonstrates JavaScript array operations, including a custom `range` function that generates a numeric array and `reduce` calls that sum its elements and convert an array of key-value pairs into an object. The code uses the built-in `Array.prototype.reduce` method and logs each addition to the console. It includes a D3 dependency in `package.json` but does not invoke any D3 functions. The rendering approach is purely console-based, showing algorithmic patterns rather than a graphical visualization.

Sep 26, 2022

Epis5 Javasript

This example demonstrates JavaScript array reduction by aggregating a numeric range and transforming an array of objects into a keyed dictionary. It creates a sequence of ten integers and sums them through `reduce`, logging each addition, then converts entries with `key` and `value` properties into a single object. The code runs entirely in the console without rendering visuals, relying on plain JavaScript methods rather than D3, though the project declares d3 7.6.1 as a dependency. All output appears as console logs, showing the step-by-step accumulation process.

Sep 26, 2022

Fork of Epis 4 sol lewitt

This example generates a grid of horizontal and vertical striped rectangles overlaid with two complex masks, creating an interplay of geometric forms inspired by Sol LeWitt. The SVG is rendered using D3’s `select`, `range`, and `join` to place the stripes, while custom mask paths are built with D3’s `symbol` and `symbols` API, drawing five distinct shapes at intervals. The first mask uses an inverted fill, the second a non-inverted fill, producing contrasting cutout effects across the composition. The visualization is fully responsive, sizing to the window dimensions.

Epis 4 Select

A grid of thin horizontal and vertical bars appears to overlap, but masks create alternating shapes from the Unicode symbols embedded in the code. The visualization renders 100 rows and 100 columns, with each bar masked by one of eight symbols (like stars or hearts) repeated across the canvas. Built with React and D3.js (specifically `select`, `range`, `symbols`, and `symbol`), it uses SVG masks with inverted fills to produce the interplay. The source code relies on D3 v7.6.1, rendering to an SVG element that fills the browser window.

Fork of Epis 4

This example creates a full-screen interactive grid of horizontal and vertical bars overlaid with circular masks. The visualization uses D3’s `select` and `range` to generate 100 thin rectangles along each axis, producing a crosshatch pattern. Two SVG masks hide all but a central circular area, revealing the intersecting lines within the circle against a blank background. The code relies on D3’s data join (`join('rect')`) to bind array values to SVG elements, demonstrating a declarative approach to building static geometric compositions.

Epis 4

This example creates a full-screen SVG pattern of 100 alternating horizontal and vertical stripes, with both sets masked to reveal a circular focal point in the center. Using D3’s `select` and `range` utilities, it generates rectangles that are constrained by two custom masks—one that hides everything outside the circle and another that hides the circle itself—producing a grid-like intersection effect. The rendered output is purely geometric, relying on SVG masks rather than data.

Fork of HTML Starter

This example uses raw JavaScript and the SVG API to dynamically construct a full-window visualization. It creates two distinct masks on an SVG canvas: a white circle on a transparent background and a white rectangle with a black circular hole at the center. The code then generates 100 horizontal and 100 vertical thin rectangles, applying these masks to reveal a grid-like pattern of intersecting lines against a plain background. The result is a geometric composition built entirely through procedural DOM manipulation without any external libraries.

Fork of HTML Starter

This example is a minimal HTML page that demonstrates the basic structure of a web document using CSS and JavaScript. It renders a blank page with a title in the browser tab and a script that outputs the string "aaaa" to the browser’s console via the `console.log` API. The page contains no visual elements or data visualization; instead, it serves as a bare-bones starter template for testing JavaScript execution inline within an HTML file.

Fork of D3 Starter

This example demonstrates the simplest possible D3 setup by rendering the static text “Hello D3 version 7” in the center of the page using a 13-em font size. The code relies on D3 version 7’s `select` method to target the `<body>` element and set its text content, while the HTML document loads the library from the unpkg CDN. It serves as a foundational template, showing only the basic structure of a D3 project without any data or interactive behavior.

Pseudo Bar Chart

This pseudo bar chart presents an abstract, hand-drawn appearance, composed of multiple SVG paths that simulate irregular, sketch-like data bars rather than using standard bar shapes. The visualization is rendered with React and SVG, featuring a light background and orange strokes that create a freeform, illustrative aesthetic. The code defines precise path coordinates and stroke properties to achieve the organic, pseudo-bar effect, demonstrating a creative alternative to conventional chart rendering. The example focuses on visual form over quantitative accuracy, emphasizing stylistic expression in data representation.

Day 0

This example demonstrates a single circle rendered on an empty SVG canvas. It serves as a minimal introduction to creating vector graphics. The visualization uses the SVG format directly within an HTML document, with the circle defined by its center coordinates and radius. The code relies on the native SVG `<circle>` element, with the file naming it “Day 0” as a starting point. The data source is not external; the shape is hardcoded in the markup.