Sami Kauhanen-Duac

@SamiJohannes·8 public vizzes

Arrays

This example visualizes a simple array of numeric values as circles rendered in an SVG canvas. The code uses d3.select to create an SVG element sized to the full browser window, then prepares to bind the array data to circle elements. While the circle positioning and styling logic is incomplete, the example demonstrates the foundational pattern of data binding with d3’s selection and data join methods. The array `[2, 1, 3, 20]` serves as the dataset, with d3 version 7.6.1 imported via npm.

Jul 29, 2022

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece by layering thirteen colorful star-shaped symbols, each rendered as an SVG path and centered on the screen. The stars shrink in size as their index increases, creating a concentric, geometric pattern. The visualization uses D3 v3’s `select`, `range`, `symbols`, and `symbol` APIs to generate the path data, with the SVG canvas sized to the full window. The color palette is hard-coded in an array, and the code includes commented-out experiments with masks and rects.

Jul 22, 2022

Loading thumbnail…

my take of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired geometric composition using D3’s `select`, `range`, `symbol`, and `symbols` APIs. It displays a grid of horizontal and vertical rectangles, with two overlapping SVG masks that reveal or hide areas based on inverted symbol shapes. The code generates 100 stripes in each direction, then applies masks built from D3’s predefined symbol paths (circles, crosses, diamonds, etc.) positioned across the canvas. All rendering is done with SVG within an HTML page, using D3 v6.6.1 from a package dependency.

Jul 22, 2022

Loading thumbnail…

Sol LeWitt reproduction with D3

This example reproduces Sol LeWitt’s 1984 geometric wall drawing using D3.js. It renders a grid of sixteen semi-transparent colored rectangles that fill the entire browser viewport, arranged in four rows and four columns with a beige background. The code uses D3’s `select`, `.data()`, and `.join()` methods to bind the color data to SVG `<rect>` elements, computing each block’s position and size dynamically from `window.innerWidth` and `window.innerHeight`. Each rectangle’s fill color is drawn from a predefined array of sixteen named CSS colors.

Jul 8, 2022

Loading thumbnail…

Sol LeWitt reproduction

This example reproduces Sol LeWitt’s 1984 AXA Center artwork as a grid of sixteen semi-transparent filled rectangles. Each rectangle occupies a quarter of the viewport width and height, with the sequence of colors cycling through a predefined palette. The SVG is built entirely with vanilla JavaScript, using `document.createElementNS` to append `rect` elements to an SVG canvas that dynamically fills the browser window. The rendering approach directly mirrors the geometric abstraction of the original work, with no external libraries or data sources.

Jul 7, 2022

Loading thumbnail…

Pseudo Viz

This example shows three horizontal bars labeled Bar 1, Bar 2, and Bar 3, with varying widths representing different values. The visualization is rendered as static SVG elements directly in the HTML, using `<rect>` for the bars and `<text>` for labels, styled with CSS for font size and color. The code relies on standard HTML, CSS, and JavaScript APIs without any external libraries or data processing, presenting a simple hardcoded bar chart layout.

Jul 6, 2022

Loading thumbnail…

Fork of Bob Ross Painting

This animated SVG scene recreates a Bob Ross–style landscape with a sun, layered mountains, and a body of water. The sky, mountains, and ocean shift through color cycles using SMIL animations within SVG `linearGradient` definitions, while the sun moves vertically and fades via `animate` elements on its `cy` and `opacity`. The scene uses only raw SVG shapes and gradients, with no external libraries, drawing from the SVG Fundamentals exercise.

Jul 5, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG rendering on a blank HTML page, showing two overlapping circles, a green line, and an orange rectangular path. The SVG markup includes a circle with blue fill, a semi-transparent red circle, and a line with stroke properties. The code uses native SVG elements—`circle`, `line`, and `path`—to display shapes directly in the browser. It accompanies a tutorial on SVG fundamentals, with styling handled through a simple CSS rule for the displayed text.

May 30, 2022