Skip to main content
SimilarExport ZIP
100%

Blank canvas

✓ Published1🌍 Public
JJacob van Lingen
Last edited May 18, 2020
Created on May 18, 2020

This blank canvas demonstrates an empty SVG viewport that fills the browser window. The visualization shows a single rounded rectangle covering the entire display area, creating a blank slate. The code uses D3 v5's `select` method to target the SVG element and chain attribute setters for width and height. It retrieves the viewport dimensions from `document.body.clientHeight` and `document.body.clientWidth`, then appends the rectangle with rounded corners via the `rx` attribute, all rendered as vector graphics.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Blank Canvas

This example displays a blank canvas that fills the entire browser viewport. The visualization uses a simple SVG rectangle with rounded corners, rendered in a fixed-position body that prevents scrolling. The code relies on D3 v5's selection API (`select`) to target the SVG element and sets its dimensions based on the document's `clientWidth` and `clientHeight` properties. The rectangle’s `rx` attribute gives it a subtle rounded appearance, creating an empty but intentional visual space.

Jjlongwellchc
94% match
Loading thumbnail…

Blank Canvas

This example shows an empty, full-window SVG canvas with a rounded rectangle filling the entire viewport. The visualization resizes to the browser’s current dimensions, logging the width to the console. It uses D3 v6’s `select` function to target the SVG element and append the rectangle, while CSS `body` styles fix the document to the viewport and hide overflow. The code demonstrates a minimal starting point for a blank canvas, with the rounded corners (`rx` attribute) subtly framing the otherwise empty space.

Zzlastefcia
93% match
Loading thumbnail…

Blank Canvas

This example fills the browser viewport with a single rounded rectangle rendered in SVG. The visualization is a blank canvas, created by selecting the `svg` element and setting its width and height to match the document body’s client dimensions, then appending a `rect` with a corner radius. The code uses D3 v5’s `select` function to manipulate the SVG and relies on CSS to fix the body’s position and hide overflow, ensuring the canvas spans the entire screen.

FFhouston17
93% 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
93% 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
92% match
Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the viewport, with a single rounded rectangle covering its full width and height. The code uses D3's `select` to grab the SVG element, then sets its dimensions based on `document.body.clientWidth` and `clientHeight`. A `rect` is appended with `rx` for rounded corners. The visualization demonstrates a minimal setup with D3 v5, React, and SVG, where the data is simply the viewport geometry itself.

Ggilbster
92% match
Loading thumbnail…

Blank Canvas

This example presents a minimalist blank canvas: a single, large rounded rectangle that fills the entire browser window. The visualization demonstrates a foundational D3 setup, using the `select` method to target an SVG element and dynamically setting its width and height attributes based on the viewport dimensions. It relies on the SVG rendering approach, appending a rectangle with `rx` for rounded corners. The code uses D3 v5, and the simple styles.css configures the body for a fixed, edge-to-edge display.

AAnShed
92% match
Loading thumbnail…

Blank Canvas

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.

Yyejichun@naver.com
92% match