Skip to main content
SimilarExport ZIP
100%

Blank Canvas

✓ Published1🌍 Public
CCassie
Last edited Oct 13, 2021
Created on Oct 13, 2021
Forked from Blank Canvas

This example shows a full-screen, rounded rectangle that fills the browser window with a solid teal color, creating a minimal blank canvas. The visualization uses D3 v5 to select the SVG element and dynamically size it to the viewport dimensions. A single `<rect>` is appended and styled with a 40-pixel corner radius and a muted blue-gray fill, with the body fixed to prevent scrolling.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Blank Canvas

A rounded rectangle fills the entire browser viewport, creating a minimal, blank canvas within the SVG element. The visualization uses d3.select to target the SVG and sets its dimensions to match the window's inner height and width. It then appends a single rect element with a 40-pixel corner radius, styled through an external CSS file. The page is fixed to the viewport with hidden overflow, ensuring the shape remains static and unresponsive to interaction.

Ssheafallick
94% match
Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the entire browser window. The visualization is a minimal SVG canvas that demonstrates the use of D3 v5's `select` method to resize an SVG element to the full width and height of the viewport. The code appends a single `rect` element with a 40-pixel corner radius, relying on the document's client dimensions. No data or interaction is present; the example focuses solely on the fundamental setup of an SVG drawing space.

VVito
93% 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
93% match
Loading thumbnail…

Blank Canvas

This example presents an empty, rounded rectangle that fills the entire browser viewport as a blank canvas. The visualization uses D3 v5 to select the SVG element and dynamically set its dimensions based on the document body’s client width and height, then appends a single rectangle with a 40-pixel corner radius. The SVG rendering approach relies on the D3 `select` and `append` API, while the fixed-position CSS ensures the graphic stays locked to the screen edges without scrollbars.

LLuis Fabian Cortes Perez
93% match
Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the entire browser viewport, serving as a minimal canvas with no data or marks rendered. The SVG element is dynamically sized to match the window dimensions using the D3v5 `select` API, and a single `rect` is appended with a 40-pixel corner radius. The complete visual result is a simple, frameless field, demonstrating basic SVG construction with D3’s selection and attribute-chaining methods against a fixed-position, full-screen body.

Vvaynexie
93% match
Loading thumbnail…

Blank Canvas

A full-window, rounded rectangle fills the browser viewport as a blank canvas, rendered as a static SVG shape. The visualization demonstrates a minimalist setup using D3 v5’s `select` to target the SVG element and set its width and height attributes based on the document’s client dimensions. A single `rect` is appended with a large corner radius (`rx` of 40), and CSS fixes the body to eliminate scrolling. No data or interactive behavior is present; the piece simply showcases a clean, borderless visual starting point.

Fforeverworld1879
93% match
Loading thumbnail…

Blank Canvas

This example presents a blank, rounded-corner rectangular canvas that fills the entire browser viewport. The visualization uses D3 v5 to create a single SVG `rect` element, with dimensions dynamically calculated from the `document.body.clientWidth` and `clientHeight` properties. The canvas is styled with a fixed, full-screen layout, and the D3 `select` function targets the SVG element to set its width and height, demonstrating a minimal setup for responsive SVG rendering.

Ccheeson
93% match
Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the browser window, adapting to the full viewport dimensions. The visualization is empty, showing no data or marks. It uses D3 v5's `select` to target the SVG element and sets its width and height based on `document.body.clientWidth` and `clientHeight`, then appends a single `rect` with a corner radius of 40 pixels. The page's CSS fixes the body to prevent scrolling.

NNameeeee
93% match