Edgar Cortez

Modules D3 Selection Explorations

This example demonstrates a dynamic collection of circles that undulate across the screen, with each circle’s position and radius varying sinusoidally over time. The animation runs at 60 frames per second using a `setInterval` callback. It leverages D3’s `select` and `range` modules to build and update the SVG scene, while a custom `vizData` function uses D3’s selection `.join()` API to create or update circles based on newly generated data. The data itself is produced by `makeData`, which computes x, y, and r values from time and index parameters.

Feb 14, 2023

Refactor of Fork of D3 Selection Explorations

This example uses D3 to render an animated SVG scatterplot of circles. The code generates synthetic data, calculating each circle’s x, y, and radius from a sine wave function based on an index and time variable. At 60 frames per second, a `setInterval` updates this time value, and the `d3.select` and `d3.range` APIs update existing circle attributes via the `.join` method, creating a smooth, pulsing wave pattern. All rendering is handled as SVG within the full browser viewport.

Feb 14, 2023

Fork of D3 Selection Explorations

A fork of D3 Selection Explorations demonstrates the use of D3's data join and enter/update/exit pattern with animated SVG circles. It uses `d3.select`, `d3.range`, and the `selection.join('circle')` method to bind an array of generated data points to circle elements, updating their positions and radii every animation frame via `setInterval`. The visualization shows a sinusoidal wave of circles moving horizontally and vertically, with the number of circles varying over time as the data array length changes. The code relies on plain SVG rendering without additional libraries beyond D3 v6.

Feb 14, 2023

D3 Selection Explorations

A collection of animated circles demonstrates D3's data-join pattern for dynamic SVG rendering. The visualization continually updates data via a JavaScript interval, adjusting the number and positions of circles based on sine waves. Using D3 v6, the code employs `select`, `range`, and the `join` method to bind new data to existing SVG circle elements, updating their `cx` and `cy` attributes at 60 frames per second. The example highlights the simplicity of enter, update, and exit handling within a single chained call.

Feb 13, 2023

JavaScript Arrays - using methods

This example demonstrates how to manipulate JavaScript arrays using built-in methods such as filter, map, sort, and reduce, alongside D3's ascending function. It defines a range generator, then applies array operations to create filtered, mapped, and sorted results, logging them to the browser's Dev Tools console. The code also sorts an array of objects by key using D3's ascending comparator and shows how to construct an object from array entries. The visualization relies on the d3 library (version 6.6.2) for its ascending helper, with no graphical output beyond console messages.

Feb 13, 2023

JavaScript Arrays

This example demonstrates common JavaScript array methods for data manipulation and transformation. The code defines a `range` function that creates a numeric array, then uses commented-out examples of `forEach`, `filter`, `sort`, and `map` to show how these operations work. The active portion creates an array of key-value objects and uses `Array.prototype.reduce` to convert it into a single object. The example relies entirely on native JavaScript APIs and is meant to be explored through browser DevTools console output, with no external libraries or visual rendering involved.

Feb 10, 2023

Refactored Symbol Mask - D3 Version Sol LeWitt Reproduction

This piece reproduces a Sol LeWitt drawing using D3.js. It renders two masks—one inverted—that apply overlapping patterns of thick vertical and horizontal lines across the full canvas. The lines are generated as SVG rectangles, with each set filtered through a different mask to create the geometric interplay. Built with D3 v6, it uses `d3.symbol`, `d3.range`, and `d3.select` to construct the SVG output dynamically.

Refactored Rendering Masks - D3 Version Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece by layering two sets of SVG rectangles—horizontal and vertical stripes—each restricted by a distinct mask. The masks use D3 symbols (from the `symbols` and `symbol` APIs) to carve geometric shapes into the stripes, creating intersecting patterns. The code generates 100 stripes in each direction, with the masks defined via `svg.append('mask')` and applied using the `mask` attribute. Rendering is done entirely through D3 v6 selections and joins, with the canvas size set to the full window dimensions.

Using Symbols/Symbol - D3 Version Sol LeWitt Reproduction

This D3.js reproduction of a Sol LeWitt artwork generates an intricate grid of overlapping horizontal and vertical lines. The piece creates a dynamic visual interplay where lines are selectively revealed through two inverted SVG masks, each containing a large circular symbol. The code uses `d3.select`, `d3.append`, `d3.range`, and `d3.symbol` from D3 v6.6.1 to construct the SVG output. It renders 100 rectangles in each direction, with widths and heights calculated from the window dimensions, positioning the circular mask symbols at the canvas center.

Full D3 Version Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired geometric composition as a full-screen SVG. It shows a grid of thin horizontal and vertical lines layered with two circular mask regions that selectively reveal or hide strokes, creating a distinctive visual pattern. Using D3 v3, the code appends 100 vertical and 100 horizontal rectangles, positioned programmatically, and applies masks defined with SVG primitives. The first mask exposes lines through a circular symbol, while the second inverts the effect with a black circle, producing an overlapping interplay of opaque and transparent line areas.

Fork of Fork of D3 Version Sol LeWitt Reproduction

A generative reproduction of a Sol LeWitt wall drawing fills the browser viewport with two sets of intersecting, striped rectangles. The piece creates a contrast between dense, parallel bands and a central circular region where the pattern shifts orientation. Using D3 v6, the code appends an SVG and employs two mask definitions (`circle-mask`, `circle-mask2`) to selectively hide portions of the vertical and horizontal line groups. It renders 100 rects per group via `selectAll().data().join()`, with each rect sized to cover the full screen.

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired generative drawing using raw SVG and D3 selection utilities. It shows a grid of thick horizontal and vertical bars intersecting across the full viewport, with a circular mask revealing a clean white center where the lines are hidden. Two SVG masks stack to selectively hide and show line segments: the first mask clips horizontal bars through a black rectangle with a white circular hole, while the second inverts this to mask vertical bars. The code constructs all elements dynamically via `document.createElementNS` and appends them to the page, relying on D3's `selection` import for utility but primarily using native DOM APIs.

Fork of D3 Version Sol LeWitt Reproduction

This block-like composition reproduces Sol LeWitt’s geometric art using D3 v3 and SVG rendering. It displays a grid of horizontal and vertical stripes that intersect, with circular masks revealing overlapping patterns: one mask exposes the vertical lines, another hides sections of the horizontal ones. The code uses `d3.select`, `d3.range`, and data joins to generate 100 rectangles in each direction, applying `mask` attributes to create the visual interplay. The artwork fills the browser window, adapting its dimensions to the viewport.

D3 Version Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using D3 v6 to generate dense horizontal and vertical striped patterns across the full viewport. Through two circular SVG masks, the code selectively reveals horizontal lines in one circular region and vertical lines in an overlapping area, creating a striking crosshatch effect. The rendering employs D3 selections with `range(n)` to generate 100 rectangular bars per axis, applying masks via `attr('mask', 'url(#circle-mask)')`. The piece demonstrates minimalist geometric abstraction through programmatic SVG construction.

Sol LeWitt Reproduction

This visualization uses raw SVG and JavaScript to reproduce a Sol LeWitt wall drawing. It layers 100 horizontal and 100 vertical rectangular stripes across the full browser window. A circular mask, created via SVG `mask` and `circle` elements, is applied only to the horizontal lines, revealing them solely within a central 200-pixel radius. The code dynamically sizes the artwork to the viewport dimensions, using `document.createElementNS` and `setAttribute` to build the composition without any external libraries.