Colin Frutschi

@ColinFru·9 public vizzes

D3 Selection Exploration

Fifteen circles undulate vertically in a sine-wave pattern, creating a rhythmic, animated wave across the browser window. The visualization demonstrates D3's data join and selection methods, where each frame generates new array data and updates the circles' positions. Using `d3.select`, `d3.range`, and the `.join()` pattern, the code binds fresh coordinates to SVG circle elements, which are animated every 60 milliseconds via `setInterval`. Rendering is done in SVG, with circles styled by radius and positioned absolutely by attributes like `cx` and `cy`.

May 12, 2023

Loading thumbnail…

Le04 Full Sol LeWitt Reproduction with D3

This example generates a full-screen abstract composition inspired by Sol LeWitt’s wall drawings, using D3 to render overlaid striped rectangles. The code creates 120 horizontal and vertical bands, each partially hidden behind an SVG mask that reveals a repeating pattern of geometric symbols. Rendering uses d3.select, data joins with .join, and d3.range to drive the grid, while the mask layer applies both a normal and an inverted variant using d3.symbol and d3.symbols to define the cutout shapes. The result is a crisp, generative pattern displayed entirely as vector SVG.

May 11, 2023

Loading thumbnail…

Le04 Sol LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s geometric wall drawing using D3.js. It renders a grid of thin horizontal and vertical SVG rectangles across the full browser window, with each line colored by default. Two circular masks reveal the lines: the first shows a white circle over a black background, while the second inverts the effect, hiding the circle and showing the surrounding lines. The code uses `d3.select`, `d3.range`, and `selection.join` to bind data and create the rectangles.

May 10, 2023

Loading thumbnail…

Le03 Sol LeWitt Reproduction Vertical

This example reproduces Sol LeWitt’s vertical line drawing using raw SVG and the Document Object Model (DOM) API. It displays a grid of 100 horizontal and 100 vertical black bars on a white background, with two circular masks applied to the bars to create a central, circular region where the lines appear to overlap. The first mask reveals the horizontal bars inside a black-bordered circle, while the second mask hides the vertical bars in the same circle, producing a visual inversion. The code constructs all elements via `document.createElementNS` and sets attributes directly, without any external visualization library.

May 10, 2023

Loading thumbnail…

Le03 Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt-style drawing using a vertical grid of narrow, evenly spaced rectangular bars that span the full height of the viewport. The code generates 100 rectangles directly via the SVG namespace API (`document.createElementNS` and `setAttribute`), positioning each at an `x` increment of 20 pixels with a fixed width of 10. Rendered in a browser window, the pattern creates a rhythmic striped composition. No external libraries are used; the example demonstrates basic SVG manipulation with vanilla JavaScript.

May 10, 2023

Loading thumbnail…

Le03 JS Basics

This example demonstrates basic JavaScript syntax and DOM interaction within an HTML page, displaying a large “Some JS Basics” message as the primary visual element. It logs various expressions and values to the browser console, including arithmetic operations, a const variable, a let variable that is reassigned, and a property from an object literal. The page renders an empty SVG container (960 pixels wide) but performs no drawing or data binding with it, focusing solely on fundamental scripting concepts rather than data-driven visualization or external libraries.

May 10, 2023

Loading thumbnail…

A Bar Chart

A set of five black horizontal bars of varying widths on a white background represents categories labeled “First one” through “Fourth one,” with the fifth bar unlabeled. The bars are created with SVG `rect` elements, while labels are placed using `text` elements at fixed coordinates. Accompanying the bars, a large black rectangle at the top suggests a title area, though it contains no text. The chart is static and hand-coded, with no data binding or interaction.

May 8, 2023

Loading thumbnail…

A Bar Chart

A bar chart displays population estimates for ten countries, ranked from China’s 1.4 billion down to Mexico’s 131 million, with each bar’s length proportional to its value. The chart uses D3 v7 with SVG rendering, reading the data from a CSV file. It employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` to render the axes. Bars are appended as `rect` elements and filled with a steelblue color.

May 8, 2023

Loading thumbnail…

Learning SVG Fundamentals

This example demonstrates fundamental SVG shapes by placing colored circles, a rectangle, and a diagonal line on a 960×500 canvas. The code uses raw SVG markup with inline attributes for positioning and styling, including `cx`, `cy`, `r`, `fill`, `stroke`, `x`, `y`, `width`, and `height`. A navy-stroked circle overlaid on a red-filled circle illustrates how stroke and fill interact, while the rectangle and line show coordinate-based geometry. The rendering relies entirely on native SVG elements without JavaScript libraries or external data.

May 8, 2023