Skip to main content
SimilarExport ZIP
100%

Blank Canvas

✓ Published1🌍 Public
Ddanielchamone
Last edited Nov 4, 2019
Created on Nov 4, 2019

A full-screen SVG canvas displays only a rounded rectangle drawn with D3's `select` and `append`. The rectangle fills the viewport dimensions, which are read from `document.body.clientWidth` and `clientHeight`. The visualization uses a minimal blank state with no explicit data source; the code sets the SVG's width and height attributes and applies a 40-pixel corner radius via `attr('rx', 40)`. No additional interactions or updates occur, leaving a static, empty composition.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Blank Canvas

A blank canvas is presented as a full-screen, rounded rectangle rendered in SVG, filling the entire viewport with a clean, empty surface. The visualization uses D3.js v5 via the `select` method to create and size the `rect` element dynamically based on the browser window's dimensions. No data is loaded or displayed, and the code simply sets the SVG's width and height attributes before appending the rectangle. The result is a minimal, static composition that foregrounds the canvas itself as the subject.

MMinwoo Pak
95% match
Loading thumbnail…

Blank Canvas

A blank, interactive canvas fills the browser window, rendered as a single rounded rectangle sized to the full viewport. The visualization demonstrates a minimal SVG setup using D3 v5, where the `select` function targets the empty `<svg>` element and dynamically sets its width and height attributes based on `document.body.clientWidth` and `clientHeight`. A single `<rect>` is appended and styled with a corner radius of 40 pixels. No data is loaded or transformed; the piece exists purely as a static starting point for further layering.

CCalvin Gomez
95% match
Loading thumbnail…

Blank Canvas

A blank, full-viewport SVG canvas is created, filling the browser window with a single rounded rectangle. The example demonstrates a minimal starting point for a visualization, with no data or marks drawn. The code uses D3 v5’s `select` function to target the SVG element, sets its dimensions to the document body’s client width and height, and appends a `rect` with a 40-pixel corner radius, all styled by a fixed-position CSS layout that removes margins and scrollbars.

Ggregosaure
95% match
Loading thumbnail…

Blank Canvas

A full-window rounded rectangle rendered as a blank canvas, occupying the entire viewport with soft corners. The visualization uses D3 v5’s selection API to append a single SVG `rect` element, with dimensions bound to the browser’s client width and height via `document.body.clientWidth` and `clientHeight`. The `svg` is sized programmatically, and a CSS rule fixes the body to prevent scrolling, ensuring the rectangle remains the sole visual element. No data or interaction is present, highlighting the minimalist starting point of a blank SVG drawing surface.

Ddanrhymes
95% match
Loading thumbnail…

Blank Canvas

A full-screen blank canvas renders as a rounded rectangle filling the browser viewport, with no marks or data. The visualization uses D3 v5’s `select` to target the SVG element and sets its dimensions from the document body’s client width and height, then appends a single `rect` with a 40-pixel corner radius. The fixed-position CSS ensures the canvas remains edge-to-edge regardless of scroll, while the empty SVG plus appended rectangle constitutes the entire graphic.

TToooooooT
95% match
Loading thumbnail…

Blank Canvas

A single rounded rectangle fills the entire viewport, rendered in SVG with no data or marks. The visualization uses D3 v5’s `select` to bind the SVG element, then sets its width and height to the browser window’s client dimensions. A `rect` is appended with a 40-pixel corner radius, creating a soft-edged blank canvas. The code relies on `document.body.clientWidth` and `clientHeight` for sizing, with the body fixed and overflow hidden via CSS.

MMatthiasVanCampen
95% match
Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser window with a single rounded rectangle. The visualization demonstrates minimal setup using D3 v5, where the `select` method targets the SVG element and sets its dimensions to match the viewport. A rect with a 40-pixel corner radius is appended to create the sole visual element. The example relies on the document body's client dimensions to size the canvas, with CSS constraining the page layout to prevent scrolling.

AAndreas Loew
94% match
Loading thumbnail…

Blank Canvas

A full-screen SVG rectangle stretches to the browser window’s dimensions, its corners rounded by an rx attribute. The canvas remains otherwise blank, an empty visual field defined solely by the viewport’s width and height. Built with the v5 version of D3, the code uses `select` to target the SVG element and `attr` to set its size and the rectangle’s rounded geometry. No data is loaded, and no interaction or animation occurs, leaving the example as a minimalist exploration of spatial boundaries.

MMichał Szumnarski
94% match