Skip to main content
SimilarExport ZIP
100%

Blank Canvas

✓ Published1🌍 Public
Ssreeanthrds
Last edited Jun 21, 2020
Created on Jun 21, 2020
Forked from Blank Canvas

A blank rectangular canvas in vivid purple stretches across a fixed browser window, rendered as a single rounded rectangle. D3 v5 selects an empty SVG and appends a rect element sized to the SVG's declared dimensions, with a corner radius of 40. The code logs the document body width and height to the console, while CSS locks the viewport and applies a solid background color.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Blank Canvas

A blank SVG canvas displays only a single purple rectangle with rounded corners. The example uses D3 v5's `select` and `append` methods to draw the shape, reading the SVG's width and height attributes as numeric values. The page's background is set to a solid magenta color via CSS, with the body fixed to prevent scrolling. The code logs the browser's client dimensions to the console, which are not otherwise used in the visualization.

XX. N. Chu
93% match
Loading thumbnail…

Blank Canvas

The visualization displays a blank, rounded rectangle that fills the entire browser viewport, with no data or marks drawn. It uses D3 v5 to select the SVG element and set its width and height based on the document body’s client dimensions, then appends a single `<rect>` with a 40-pixel corner radius. The code logs the viewport size to the console, and the CSS fixes the body to prevent scrolling, leaving the canvas as a pure, empty surface.

Ffbudwill
91% 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
91% 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
90% match
Loading thumbnail…

Blank Canvas

A blank rectangular canvas fills the browser viewport, rendered as a single rounded rectangle. The visualization demonstrates the foundational step of setting up an SVG drawing surface with D3 v5. The code uses `d3.select` to access the SVG element and sets its width and height attributes based on the document body’s dimensions. A `rect` element is appended and styled with `rx` for rounded corners, creating an empty, minimal display with no additional data or interactive elements.

XX. N. Chu
90% 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
90% match
Loading thumbnail…

Blank Canvas

A blank rectangular canvas fills the entire browser window, rendered as an SVG rectangle with rounded corners. The visualization demonstrates a minimal starting point where no data or marks are present, leaving the empty space as the primary visual element. The code uses D3 v5 to select the SVG element, measure the document’s client width and height, and append a single rectangle with a 40-pixel corner radius. Styling is handled via fixed positioning in CSS to prevent scrolling overlow.

Ccledevoute
90% 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
90% match