dalia.miliauskaite@me.com

@DaliaMil·8 public vizzes

JavaScript Array

This example demonstrates JavaScript array operations, focusing on how to create and manipulate arrays in the browser console. The code defines a `range` function that generates an array of numbers from 0 to 4, then applies various array methods including `forEach`, `filter`, and `sort`. The final visible output shows how `.sort()` combined with `.reverse()` reorders the array `[0, 9, 1, 84, 23, 6]`, logging the reversed sorted result to the console. The visualization uses a large text message to display the result, with the logic implemented through raw JavaScript array prototypes rather than any external libraries.

Mar 24, 2024

Loading thumbnail…

Full Sol LeWitt with D3

This example reproduces Sol LeWitt’s geometric wall drawing using D3 and SVG. It builds a grid by rendering horizontal and vertical rectangles, each filtered through a mask that reveals alternating symbol shapes. The code uses `d3.select`, `range`, `symbols`, and `symbol` to draw the mask patterns, with `join` for data-driven elements and `mask` attributes for clipping. The visualization fills the entire browser window, with parameters like `n = 100` controlling the grid density and symbol spacing.

Mar 24, 2024

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

A fork of a Sol LeWitt reproduction uses D3 to render intersecting horizontal and vertical line bands, each filtered by a mask that reveals a row of geometric symbols. The code generates 100 rectangles per axis, spaced at 20-pixel intervals, and applies separate masks created with D3’s `symbol` and `symbols` API. The SVG output relies on D3 selections, `range`, and mask definitions to alternate inverted fills, producing an abstract, generative pattern across the full viewport.

Mar 24, 2024

Loading thumbnail…

Sol LeWitt with D3-v2

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7 in a React-free HTML page, rendering with SVG. It shows overlapping horizontal and vertical striped rectangles that create a crosshatch pattern, with circular masks revealing a central circular region where the lines intersect. The visualization uses `d3.select`, `d3.range`, and data joins to generate 100 horizontal and 100 vertical `<rect>` elements, each masked by a dedicated `<mask>` with a circle. The first mask exposes a white circle over black background, while the second inverts the effect, producing contrasting visible and hidden areas. The code demonstrates D3’s data-binding and SVG mask primitives without external data sources, relying entirely on procedural generation.

Mar 23, 2024

Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js in a React application, rendered as SVG. It shows a grid of horizontal and vertical rectangles that are partially revealed through two circular masks, creating an intersecting crosshatch pattern. The code uses `d3.select` and `d3.range` to generate 100 stripes in each direction, with alternating fills applied via SVG `mask` elements. Two separate masks—one inverting the circle’s effect—control visibility, producing a dynamic interplay between the grid lines and the central circular reveal. The visualization runs full-window, adapting to the viewport dimensions.

Mar 23, 2024

Loading thumbnail…

Sol LeWitt

This visualization reproduces Sol LeWitt’s geometric style using overlapping horizontal and vertical stripe patterns. It shows a large circular mask that reveals alternating bands of stripes against a contrasting background. The code uses raw SVG elements via `document.createElementNS` to construct rectangles, masks, and circles. A single white circle and black circle are combined with two masks to clip the stripe layers, creating an interplay of positive and negative space. The rendering relies on SVG’s mask attribute and fills the full viewport with 100 stripes in each direction.

Mar 23, 2024

Loading thumbnail…

Pseudo viz

This visualization presents a simple, abstract face composed of basic geometric shapes, built using SVG and styled with CSS. It demonstrates how static vector graphics can be assembled into a recognizable figure without any interactive or data-driven logic. The rendering uses raw SVG elements like `rect`, `path`, `ellipse`, `line`, and `g`, with drop shadows applied via the `filter` definition. The face is centered on a white background, featuring a gray head, two differently colored eyes (blue and purple), and a subtle mouth, all defined directly in the markup. No external libraries like D3 or React are used; the code relies solely on native web technologies.

Mar 17, 2024

Loading thumbnail…

SVG funds

This example demonstrates a static SVG composition with overlapping circles and a rounded rectangle, using basic geometric shapes to create a simple visual hierarchy. The code relies on raw SVG elements (rect, circle) rendered through plain HTML, with CSS controlling font styling for a message block. The visualization shows two circles—one green and one purple—layered over a blue rectangle, with a smaller green circle overlapping the purple one to create depth. Although the title suggests fund data, the current implementation only displays decorative shapes without any data binding or interactive behavior, serving as a minimal starter template for SVG rendering in a browser.

Mar 17, 2024