Black Canvas

100%

✓ Published1🌍 Public

Last edited Dec 18, 2018

Created on Sep 20, 2018

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.

AI-generated description

MIT Licensed

Similar vizzes

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

88% match

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

88% match

Loading thumbnail…

Black Canvas

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.

Ssploitfun

88% 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

86% 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

86% 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

83% match

Loading thumbnail…

Blank Canvas

This example presents a blank, interactive canvas as an SVG element that fills the entire browser viewport. The visualization consists of a single large rectangle with rounded corners, rendered in a default black color against the white page background. The SVG is sized dynamically to match the dimensions of the browser window using the client dimensions. The code relies on D3 version 5 to select the SVG element and append the rectangle, while CSS positioning ensures the canvas remains fixed to the viewport edges.

BBazarbayevManas

83% match

Loading thumbnail…

Blank Canvas

A nearly empty SVG canvas fills the entire browser viewport, containing only a single small rectangle with default black fill. The example demonstrates the most basic D3 setup: selecting the root `<svg>` element, reading the browser window’s dimensions, and setting the SVG’s width and height attributes accordingly. Using d3.select, the code appends one `<rect>` element with hardcoded width and height values, serving as a minimal starting point for further visualization development. The renderer is SVG with D3 v5, and the layout is fully responsive to the viewport size.

Mmgrundell

82% match