Skip to main content
100%

Blank canvas

✓ Published1🌍 Public
DDaniel García
Last edited Mar 23, 2020
Created on Mar 23, 2020
Forked from D3js Tutorial

An empty, rounded-rectangle SVG canvas fills the entire browser viewport. The example demonstrates a minimal D3 v5 setup where the `select` and `arc` functions are imported but unused, leaving the visualization intentionally blank. The code sets the SVG’s width and height attributes based on `document.body.clientWidth` and `clientHeight`, then appends a single `rect` with a 40-pixel corner radius. No data or interaction is present, showing the starting point for a blank visualization project.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Blank Canvas

A blank, rounded-rectangle canvas fills the entire browser viewport, with its width and height set to the document’s client dimensions. The example demonstrates a minimal SVG setup using D3 v5, where the `select` and `arc` functions are imported but only `select` is used to append a single styled `<rect>`. The visualization shows no data or interaction, serving purely as an empty starting point. It relies on the D3 selection API and SVG attributes, with CSS fixed positioning to prevent page scrolling.

Nntds12
96% match
Loading thumbnail…

Blank Canvas

An empty SVG canvas fills the browser window, displaying only a rounded rectangle that spans the full viewport. The example demonstrates the minimal setup required to render a blank visualization surface. The code uses D3 v5's `select` and `arc` imports to create an SVG container, then appends a `<rect>` element with its width and height set to the document body's client dimensions. The CSS fixes the body to prevent scrolling, ensuring the canvas remains static.

Jjblaskovich
95% match
Loading thumbnail…

Blank canvas

A blank, interactive canvas fills the browser window, rendered as a single rounded rectangle spanning the full viewport. The example demonstrates a minimal setup for a D3.js visualization, using `d3.select` to target the SVG element and setting its dimensions based on the document body's client width and height. The code imports `select` and `arc` from D3 v5, though the latter is not used here. The SVG background is drawn via `.append('rect')`, with the page's fixed positioning and margin removal handled by the accompanying CSS file.

JJames Malvern
94% 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
94% match
Loading thumbnail…

Blank canvas

A blank, full-viewport SVG canvas fills the browser window with a single rounded rectangle. The page starts with an empty 960x500 SVG element, then dynamically resizes it to match the document's client width and height using `document.body.clientWidth` and `clientHeight`. The code imports `select` from d3, sets the SVG’s dimensions, and appends a `rect` with a 40-pixel corner radius. No data or interaction is present, demonstrating a minimal d3 SVG setup.

MMatan
94% 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 blank, rounded rectangle fills the browser window, demonstrating a minimal D3.js setup. The visualization shows an empty SVG canvas, with no data or marks drawn. The code uses the `select` and `arc` functions from D3 v6, though the latter is not invoked. It sizes the SVG to the viewport's client width and height, then appends a single rounded `<rect>` covering the entire space. The document's body is fixed to the viewport edges via CSS, ensuring the canvas fills the screen.

PPiotr Paszek
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