Skip to main content
SimilarExport ZIP
100%

Black Canvas

✓ Published1🌍 Public
EEngine194
Last edited Mar 21, 2023
Created on Mar 21, 2023
Forked from Fork of D3 Starter

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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
90% 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
90% 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
90% 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…

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

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
85% 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
85% match