Skip to main content
Log in
M

maciekawsq@gmail.com

@Mxnts·13 public vizzes

Loading thumbnail…

Select D3 L4

A set of circles animates in a sine-wave pattern across the screen, with each circle’s vertical position and radius fluctuating over time. The visualization uses D3’s `select` and `range` functions to generate data and bind it to SVG circle elements via `join`. A `setInterval` loop updates the data every 60th of a second, recalculating each circle’s `cx`, `cy`, and `r` attributes based on a changing time variable. The animation runs continuously, creating an organic, flowing motion.

Mar 10, 2024
Loading thumbnail…

Full Sol LeWitt Reproduction with Background

A full-screen grid of alternating horizontal and vertical stripes is overlaid with masks that punch out repeating geometric symbols, creating a dynamic, woven composition. The example uses D3.js methods including `select`, `range`, and `symbol` to generate and position SVG elements. Two masks apply contrasting patterns: one uses white and black rectangular bands with D3 symbols to reveal the horizontal stripes, while the other applies the inverse logic to the vertical stripes. The result is a layered, shifting optical effect driven entirely by SVG masking and D3’s data-join.

Mar 9, 2024
Loading thumbnail…

Full Sol LeWitt Reproduction in D3

This example recreates a Sol LeWitt-style geometric composition using overlapping horizontal and vertical grid lines rendered as SVG rectangles. The lines are selectively revealed or hidden through two complementary mask patterns, each containing a row of varied symbols that create organic interruptions in the strict grid. The visualization demonstrates D3’s data-joining capabilities and masking utilities, using `d3.select`, `d3.range`, and `d3.symbols` to generate the visual rhythm. A custom `renderMask` function builds the masks, with one mask using inverted fill logic to produce contrast across the full viewport.

Mar 6, 2024
Loading thumbnail…

Sol LeWitt Reproduction in D3

This example recreates a Sol LeWitt-inspired geometric composition using D3.js. It renders a grid of horizontal and vertical SVG rectangles across the full window, with each set masked to reveal intersecting circular cutouts at the center. The visualization relies on d3.select, d3.range, and SVG mask elements to layer two sets of stripes, alternating black and white fills within the circles. The result is a clean, minimal pattern that mimics the artist’s systematic approach to drawing, with no data input beyond the generated grid dimensions.

Mar 5, 2024
Loading thumbnail…

Frank Stella Reproduction

This example reproduces a Frank Stella-style geometric composition using overlapping horizontal and vertical striped bands. The visualization shows a dynamic interplay of red and yellow stripes, with their visibility controlled by two triangular mask regions that reveal or hide portions of the stripes. The code uses the SVG JavaScript API to create elements dynamically, defining masks with `mask` elements and `path`/`rect` primitives. The rendering approach relies on layered rectangles with alternating fills and stroke styles, clipped through the masks to generate the final intersecting pattern.

Mar 4, 2024
Loading thumbnail…

Fork of HTML Starter

This example renders a static SVG illustration of a landscape with a sky-blue sky, green ground, and several geometric mountain shapes made from polyline paths. The code directly embeds SVG elements such as `rect`, `path`, `ellipse`, and `circle` in HTML, using CSS to set the background. It also demonstrates basic JavaScript string concatenation within an attribute, referencing a variable named `height` that is not defined in the displayed code. The visualization serves as a minimal starter template for understanding SVG drawing without external libraries or data sources.

Mar 3, 2024
Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style geometric composition as a vertical grid of alternating vertical and horizontal stripes. It shows a structured visual pattern where two circular masks define regions of overlap, creating a cross-shaped interplay of lines. The rendering uses plain SVG elements—`rect` and `circle`—with two custom masks (`circle-mask` and `circle-mask-2`) to control which stripes appear in each area. The code dynamically generates 100 vertical and 100 horizontal rectangles, each styled with a distinct mask, to achieve the final layered effect. No external libraries are used; the visualization relies solely on native SVG and JavaScript.

Mar 1, 2024
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired geometric composition using raw SVG and JavaScript. It shows a systematic grid of thin, evenly spaced vertical bars that span the full height of the viewport, creating a rhythmic, minimalist pattern reminiscent of LeWitt’s wall drawings. The code creates an SVG container sized to the browser window and appends 100 rectangles, each positioned at increasing x-coordinates with a fixed width, using the `document.createElementNS` API for SVG elements. The rendering relies solely on native DOM manipulation and CSS styling via an embedded stylesheet, with no external libraries beyond a Google Font import for the text styling.

Feb 29, 2024
Loading thumbnail…

Pseudo Tree Map

A pseudo-tree map arranges nested rectangles in a grid-like hierarchy, using shades of blue to suggest depth and grouping. The largest blue square anchors the top-left, with progressively smaller squares and rectangles branching to the right and downward, mimicking a treemap’s structure without explicit parent-child edges. The example renders as static SVG rectangles with hardcoded positions and dimensions, styled with the Share Tech font for any text. It demonstrates a manual layout approach rather than an algorithmic one, relying on SVG’s rect elements to construct the visual metaphor.

Feb 29, 2024
Loading thumbnail…

Pseudo Line Chart

A pseudo line chart arranges nested rectangles in a grid to imitate a line graph, using shades of blue to suggest a rising trend across a white background. The SVG rendering defines each rectangle explicitly with fixed coordinates and fills, including a dark blue initial block and progressively lighter blue segments. The visualization uses no JavaScript libraries or data binding, relying solely on static markup from the provided HTML and CSS with the Share Tech font.

Feb 29, 2024
Loading thumbnail…

Pseudo Horizontal Bar Chart

The visualization displays four horizontal bars of varying lengths, labeled A through D, on a white background, using a pseudo bar chart format where bars are represented as black rectangles. It is rendered as an SVG with hardcoded coordinates, with each bar’s width decreasing from top to bottom, mimicking a categorical comparison. The text labels are placed to the left of each bar using the Share Tech font, and the chart uses basic SVG elements like `rect` and `text` without any external libraries or data-driven logic.

Feb 27, 2024
Loading thumbnail…

Pseudo Bar Chart

A minimal pseudo bar chart presents four black rectangles on a white background, suggesting categorical data without conventional axes or scales. The static SVG visualization uses basic `<rect>` elements with fixed x, y, width, and height attributes to encode values through bar height, ranging from 161 to 406 pixels. No JavaScript libraries or data sources appear in the code, as the chart relies entirely on hardcoded SVG shapes within an HTML document. The example demonstrates how raw SVG primitives can create a minimalist, functional chart layout.

Feb 27, 2024
Loading thumbnail…

Pseudo scatter

This example presents a hand-coded static scatter plot titled “Pseudo Visualization,” rendered as six equally sized circles positioned across a 960-by-500 SVG canvas on a white background. The visualization is built with plain HTML and CSS, using no JavaScript libraries; each circle’s center and radius are specified directly in the markup. The layout mimics a pseudo-random distribution, though the coordinates are fixed and manually defined rather than generated by an algorithm.

Feb 27, 2024