Natalia BM

@plattdev·8 public vizzes

Fork of Fork of Title to the Dot (Studying of D3 Scatter Plot)

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis, with each point rendered as an SVG circle. It demonstrates a simple D3 data-join workflow: the code loads CSV data using `d3.csv`, parses numeric fields, and uses `d3.scaleLinear` with `d3.extent` to set the scales. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, while `d3.select` and `.append` build the SVG elements. Hovering over a point reveals a tooltip with the coordinate pair via an SVG `title` element.

Jan 21, 2026

Loading thumbnail…

Fork of D3 Selection Exploration

This example demonstrates an animated set of circles that continuously move and resize, forming a wave-like pattern across the screen. It generates synthetic data by mapping a range of numbers to positions and radii using sine functions. The visualization renders the data as SVG circles, updating each frame. The code uses D3’s `select`, `range`, and `scaleLinear` functions, and employs the `join` method for efficient element creation and updating with new data.

Jan 20, 2026

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

A grid of 100 horizontal and 100 vertical striped rectangles is clipped by two inverted circular masks, revealing a crosshatched pattern within a central circle against a solid background. Built with D3 v6, the example uses `select`, `range`, and `join` to generate `<rect>` elements in SVG. Two masks—one with a black background and white circle, the other inverted—apply opposite clipping to the line groups, creating the visual effect.

Jan 19, 2026

Loading thumbnail…

Sol LeWitt Platt - vertical

This example reproduces a Sol LeWitt art piece using vertical black lines rendered as a full-screen SVG background. The visualization shows a series of evenly spaced, thin vertical rectangles that fill the viewport, creating a minimalist grid-like pattern. It works by generating 100 SVG `<rect>` elements in a loop, each positioned at 20-pixel intervals with a fixed width of 10 pixels and height equal to the window’s height. The code uses the native Document Object Model (DOM) API to create and append the SVG elements, with no external libraries or data sources involved.

Jan 18, 2026

Loading thumbnail…

Sol LeWitt Platt - circle mask

This example creates a minimal Sol LeWitt-inspired drawing using raw SVG and JavaScript, rendering 100 horizontal stripe rectangles of 10-pixel height across the full viewport. A circular mask, defined via the SVG `<mask>` element with a white circle, clips the stripes into a central circular region at the screen’s midpoint. The code dynamically generates the SVG namespace elements (`document.createElementNS`) for the mask, circle, and rectangles, mimicking a generative art process with no external libraries. The result is a stark black-and-white composition that isolates the line pattern within the circle, referencing LeWitt’s geometric wall drawings.

Jan 18, 2026

Loading thumbnail…

Fork of Fork of Sol LeWitt Platt - horizontal

This example renders a minimalist generative artwork inspired by Sol LeWitt, displaying a grid of 100 horizontal black rectangles across the full browser window. Using the SVG API directly via `createElementNS`, it calculates the viewport dimensions from `window.innerWidth` and `window.innerHeight`, then draws each band with a fixed height of 10 pixels and vertical spacing of 20 pixels. The result is a simple, repeating pattern of lines that fills the screen, echoing LeWitt’s conceptual wall drawings through procedural code.

Jan 18, 2026

Loading thumbnail…

Fork of Sol LeWitt Platt - horizontal

This example renders a minimalist visualization inspired by Sol LeWitt, showing a grid of vertical black rectangles evenly spaced across the full width and height of the browser window. The code uses the SVG API to create a single `<svg>` element with 100 `<rect>` elements, each 10 pixels wide and positioned every 20 pixels, filling the viewport. The rectangles are drawn directly with `document.createElementNS` and appended to the SVG, with no data source beyond the computed window dimensions.

Jan 18, 2026

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and their attributes, using a static 960-by-900 canvas. The code directly constructs SVG elements—circles, a rectangle, a line, and a path—with inline styling for fill, stroke, and stroke-width. It relies on the raw SVG API via HTML markup, with no JavaScript or external charting library beyond the browser’s native DOM. The rendering approach is purely declarative, showing how basic geometry is defined through coordinates and presentation properties.

Jan 17, 2026