Skip to main content
SimilarExport ZIP
100%

Blank canvas

✓ Published1🌍 Public
Hhugomell
Last edited Jul 31, 2020
Created on Jul 31, 2020

A blank, full-viewport SVG rectangle with rounded corners fills the browser window. The visualization demonstrates the minimal setup for a Vizhub project using D3 v5, with the page dimensions retrieved from `document.body.clientWidth` and `document.body.clientHeight`. The code selects the SVG element via `d3.select`, sets its width and height attributes, and appends a single `rect` element with a 40-pixel corner radius. Styling is handled with fixed positioning and hidden overflow in the page’s CSS.

AI-generated description

A Minimal Example illustrating the basic structure of a Vizhub visualization.

MIT Licensed

Similar vizzes

Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser window, rendered as a single rounded rectangle that adapts to the viewport dimensions. The example demonstrates a minimal D3 setup where `d3.select` attaches to the `svg` element, and the viewport size is read from `document.body.clientWidth` and `document.body.clientHeight`. Using d3.v5, the code appends a `rect` with a 40-pixel corner radius, while the CSS hides any page overflow. No data or interactive behavior is present; the piece simply shows the initial scaffolding for a charting project.

Pperez.h89@gmail.com
90% 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
89% 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
89% 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
89% 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
89% match
Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the entire browser viewport, offering an empty visual canvas. The example demonstrates the minimal setup for a D3.js v5 visualization using SVG rendering, where the page dimensions are read directly from the document body and applied to the SVG element. The code relies on d3.select to target the pre-existing svg tag and appends a single rect with corner radius. No data drives the display; the focus is purely on establishing a flexible, full-window drawing surface.

AAndreas Loew
88% 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
88% 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
88% match