Black Canvas

100%

✓ Published1🌍 Public

Last edited May 8, 2020

Created on May 8, 2020

Forked from Maps

Using D3 v5, this example fills the browser viewport with a single black SVG rectangle whose corners are rounded by an `rx` of 40. The rectangle’s dimensions are set from `document.body.clientWidth` and `clientHeight` via `select("svg").attr("width")` and `.attr("height")`. The visualization demonstrates a minimal, full-screen canvas with no interactive elements, relying solely on SVG attributes for sizing.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Black Canvas

A black rectangle fills the entire browser viewport. The example is a minimal demonstration of a full-screen SVG canvas. The code sets the SVG's `width` and `height` attributes to the dimensions of the document's client area, then appends a single `rect` element with a rounded corner radius of 40 pixels. It relies on D3 v5's `select` function to fetch the SVG element and chain attribute modifications, resulting in a clean, static visual that highlights the root SVG element on a fixed, overflow-hidden body.

EEdoardoRegini

92% match

Loading thumbnail…

Black canvas

A full-screen black rectangle with rounded corners fills the browser viewport, rendered as an SVG element. The visualization demonstrates how to set up a minimal D3.js v5 environment within a React framework, using `d3.select` to target the SVG and dynamically sizing it to the document body’s client height and width. The code appends a single `rect` with a 40-pixel corner radius, showcasing basic SVG attribute manipulation without data or interaction. The stylesheet locks the body’s position to prevent scrolling, ensuring the canvas remains fixed.

Eevapavlinek

91% match

Loading thumbnail…

Black Canvas

The visualization displays only a large black rounded rectangle rendered across the full viewport, with no data marks or interactive elements. The code uses d3.select and d3.arc to manipulate the SVG canvas, setting its dimensions to the browser’s client height and width, then appending a `<rect>` element with corner radius 50. The fixed, full-screen body styling combined with the centered 13em font size suggests a minimalist, title-like presentation. The example demonstrates basic D3 SVG construction without any data source, relying solely on DOM geometry and styling.

EEngine194

90% match

Loading thumbnail…

Black canvas

A full-screen black rectangle fills the browser viewport, rendered as an SVG `<rect>` element. The example demonstrates a minimal setup where the page is fixed to the viewport dimensions and the rectangle is sized to match the window’s client height and width using D3’s `select` and `attr` methods. The code uses D3 v5 to append the rectangle to the SVG, with no additional data or interaction. The rectangle’s fill color is not specified, leaving the default black appearance from the page background.

AAaron Goebel

89% match

Loading thumbnail…

Blank Canvas

This example displays a black full-screen rectangle with rounded corners on a blank SVG canvas. It uses D3 v5’s `select` method to attach to the SVG element, sets its dimensions to match the browser viewport, and appends a `rect` with an `rx` of 40 pixels. The visualization demonstrates minimal SVG rendering with a simple, static geometric shape, relying on inline JavaScript and CSS to fill the entire screen.

HHasideluxe

89% match

Loading thumbnail…

Black Canvas

This example displays a black rectangle on an SVG canvas using the D3.js library. It creates an SVG element via `d3.select` and appends to it a rectangular shape with specified width and height attributes. The code sets the SVG canvas dimensions to 960 by 800 pixels, though the rectangle itself occupies a smaller 500 by 100 pixel area. The visualization is rendered as SVG, with the canvas initially having no default dimensions until explicitly assigned in the JavaScript. The data source is not provided, as the example focuses solely on basic SVG shape creation.

NNita

88% match

Loading thumbnail…

Blank Canvas

This example renders a full-screen black canvas with a single rounded rectangle drawn across the entire viewport. The visualization uses D3.js to select the SVG element and dynamically set its width and height based on the browser window’s client dimensions. The rectangle is appended with a corner radius of 40 pixels, while CSS fixes the body and disables scrolling. The page relies on D3’s `select` and `attr` methods, producing a minimal, static composition that highlights empty space.

Ddanrhymes

87% match

Loading thumbnail…

Blank Canvas!

A black rounded rectangle fills the entire browser window, creating a stark, minimalist blank canvas. The visualization uses D3 v5’s `select` method to target the SVG element, then sets its width and height to match the viewport dimensions. It appends a single `rect` with rounded corners (`rx`) and a black fill via CSS. The code dynamically reads `document.body.clientWidth` and `clientHeight` to size the graphic responsively, demonstrating a simple SVG rendering approach with no data or interaction.

AAbhijeet Panda

86% match