Skip to main content
SimilarExport ZIP
100%

blank canvas

✓ Published1🌍 Public
JJenny
Last edited Jul 11, 2019
Created on Jul 11, 2019
Forked from make a map

A blank SVG canvas fills the browser window, with a single large rounded rectangle drawn across its entire dimensions. The example demonstrates the minimal setup required to create a D3 visualization, using `d3.select` to target the SVG element and setting its width and height attributes based on `document.body.clientWidth` and `document.body.clientHeight`. The rectangle is appended with a 40-pixel corner radius, styled by an external Ubuntu font and hidden overflow CSS. No data or interactive behavior is present, serving purely as an empty starting point.

AI-generated description
MIT Licensed

Similar vizzes

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, rounded rectangle fills the entire browser window, created as a single SVG `<rect>` element. The visualization calculates the canvas dimensions from the document body's client height and width, applying a 40-pixel corner radius to the shape. The code uses D3 v5's selection API (`d3.select`) to target the SVG element and chain attribute assignments for sizing and styling. The example demonstrates a minimal SVG rendering pipeline with D3, where the resulting graphic is purely a static, empty canvas with no data or interaction.

Wwyh1029
94% match
Loading thumbnail…

Blank Canvas

This example creates a blank, rounded rectangle that fills the entire browser window, providing a simple, empty SVG canvas. The visualization uses the d3.select API to target the SVG element and dynamically sets its width and height based on the current document body dimensions. A single rectangle is appended and styled with a 40-pixel corner radius, while CSS positions the body to cover the viewport with hidden overflow. The result is a minimal, functional starting point for further D3 development, rendered entirely through vector graphics.

OOleg
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

An empty SVG canvas stretches across the viewport, containing no marks or data. The example demonstrates a minimal starting point for D3-based visualization work. It uses d3.select to reference the SVG element and computes the available dimensions from document.body.clientWidth and document.body.clientHeight, though the code to set the SVG size and append a rectangle is commented out. The page relies on d3.v5 and styles the body to fill the screen with hidden overflow.

AAveryBurke
93% match
Loading thumbnail…

blank canvas

An empty SVG canvas stretches across the viewport, containing no marks or data. The example demonstrates a minimal starting point for D3-based visualization work. It uses d3.select to reference the SVG element and computes the available dimensions from document.body.clientWidth and document.body.clientHeight, though the code to set the SVG size and append a rectangle is commented out. The page relies on d3.v5 and styles the body to fill the screen with hidden overflow.

AAveryBurke
93% match
Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser viewport, displaying nothing but a single rounded rectangle that matches the window's dimensions. The visualization demonstrates the foundational setup of a D3 project by importing the `d3` library and appending a basic shape element. Using `d3.select` on an empty SVG, it dynamically sets the width and height attributes based on the document's client dimensions, then adds a `rect` with a 40-pixel corner radius. The code relies on D3 v5 and a bundled JavaScript file, with CSS positioning the body to cover the entire viewport.

AAndreas Loew
93% match
Loading thumbnail…

blank canvas

A blank white canvas fills the browser viewport, rendered as a single rounded rectangle. The visualization demonstrates a minimal starting point for D3-based projects, showing an empty SVG surface with no data or interactive elements. The code uses D3 v5's `select` function to access the SVG element, reads its width and height attributes, and appends a `rect` with a 40-pixel corner radius using `svg.append`. A fixed-position CSS body ensures the canvas remains centered and non-scrollable.

Jjlspangl
93% match