Blank Canvas

100%

✓ Published2🌍 Public

Last edited Dec 13, 2020

Created on Dec 13, 2020

This example presents a blank, rounded rectangle drawn as an SVG element, filling the entire viewport. The visualization uses d3.v5’s `select` and `append` methods to create a `<rect>` with a fixed corner radius, while the page’s dimensions are pulled from `document.body.clientWidth` and `clientHeight`. The included data.csv, referencing the biblical family tree from Eve and Cain, is not loaded or processed in the displayed code, leaving the canvas intentionally empty. The stylesheet fixes the body to prevent scrolling, ensuring the graphic occupies the full screen.

AI-generated description

README Link 1.

MIT Licensed

Similar vizzes

Loading thumbnail…

Blank Canvas

This example displays a blank, rounded rectangle that fills the entire browser viewport against an empty page. Built with D3 v5 and rendered as SVG, the code uses `select` and `append` to create a single `rect` element. The visual’s dimensions are derived directly from `document.body.clientWidth` and `clientHeight`, and the CSS fixes the body to prevent scrolling. No data or interaction is present; the piece functions purely as a minimalist canvas.

Ccornshoots

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

90% match

Loading thumbnail…

Blank Canvas

A full-window, rounded rectangle fills the browser viewport as a blank canvas, rendered as a static SVG shape. The visualization demonstrates a minimalist setup using D3 v5’s `select` to target the SVG element and set its width and height attributes based on the document’s client dimensions. A single `rect` is appended with a large corner radius (`rx` of 40), and CSS fixes the body to eliminate scrolling. No data or interactive behavior is present; the piece simply showcases a clean, borderless visual starting point.

Fforeverworld1879

89% match

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

89% match

Loading thumbnail…

Blank Canvas

This visualization displays a blank, rounded-corner rectangle that fills the entire browser viewport, occupying the full width and height of the page’s client area. The SVG canvas is dynamically sized using `document.body.clientWidth` and `document.body.clientHeight`, with the rectangle drawn via a simple `<rect>` element appended to the SVG. The styling uses fixed positioning and hidden overflow in CSS to ensure the canvas remains edge-to-edge. Built with d3.v5, the code leverages the d3 `select` method to target the SVG element, and no data source is used, as the piece is purely a minimal geometric composition.

Iianleekq

89% match

Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the entire 960 by 500 pixel SVG canvas, demonstrating a minimal starting point for visualization projects. The example uses D3 v5’s `select` method to target the SVG element and set its dimensions, then appends a single `rect` with a 40-pixel corner radius. The accompanying CSS fixes the body to the viewport edges and hides overflow, ensuring the canvas occupies the full screen without scrollbars. This serves as a template for building more complex D3-based graphics.

1123fischer

89% match

Loading thumbnail…

Blank Canvas

A blank, interactive canvas fills the browser window, rendered as a single rounded rectangle sized to the full viewport. The visualization demonstrates a minimal SVG setup using D3 v5, where the `select` function targets the empty `<svg>` element and dynamically sets its width and height attributes based on `document.body.clientWidth` and `clientHeight`. A single `<rect>` is appended and styled with a corner radius of 40 pixels. No data is loaded or transformed; the piece exists purely as a static starting point for further layering.

CCalvin Gomez

89% match

Loading thumbnail…

Blank Canvas

A blank, rounded-corner rectangle fills the viewport, rendered as an SVG element sized to match the browser window. The visualization uses D3 v5’s `select` and `arc` methods to construct a single `rect` element with no data binding or interactive behavior. The page loads D3 from a CDN, with the SVG styled via CSS to eliminate margins and prevent scrolling. This minimal example demonstrates a static canvas-like backdrop, relying solely on the `attr` method to set width, height, and corner radius of the shape.

ZZ-Richard

89% match