Skip to main content
SimilarExport ZIP
100%

Blank Canvas

✓ Published2🌍 Public
Yyejichun@naver.com
Last edited Jul 28, 2021
Created on Jul 28, 2021

A blank, rounded rectangle fills the browser viewport, sized to the full window and created with a single `rect` element appended to an SVG. The visualization uses D3 v7's `select` method to target the SVG and set its width and height attributes dynamically based on `document.body.clientWidth` and `clientHeight`. The example demonstrates a minimal SVG setup within an HTML page, styled by CSS to remove margins and hide overflow, with a placeholder ES6 module exporting a string.

AI-generated description
MIT Licensed

Similar vizzes

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

Blank Canvas

A rounded, full-viewport rectangle fills the browser window, rendered as a single SVG `<rect>` with no data mapped to it. The example demonstrates a minimal blank canvas using D3 v6's `select` and `attr` methods to set the SVG's width and height from the document body's client dimensions. The rectangle's `rx` attribute softens its corners, while CSS fixes the body to prevent scrolling. The visualization shows only this simple geometric form, with no axes, marks, or interaction beyond the static shape.

Ggabcoderboi
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
94% match
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, 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
94% 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
94% 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
94% match