Skip to main content
SimilarExport ZIP
100%

17. blank canvas - dataviz 2018

✓ Published2🌍 Public
Zzach b.
Last edited Jan 3, 2022
Created on Jan 3, 2022

A lime-green, rounded rectangle fills the entire browser viewport, created as a single SVG `<rect>` element. The example demonstrates a minimal blank canvas using D3 v7, with the `select` function targeting the `svg` element. The rectangle's dimensions and position are derived from `document.body.clientWidth` and `document.body.clientHeight`, and its color is set via the `fill` attribute to `#ddf054`. The SVG is styled with a fixed, full-screen body layout from `styles.css`.

AI-generated description

datraviz 2018 #17 - blank canvas for d3.js

MIT Licensed

Similar vizzes

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
88% 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
87% 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
87% match
Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the entire browser viewport, serving as a minimal canvas with no data or marks rendered. The SVG element is dynamically sized to match the window dimensions using the D3v5 `select` API, and a single `rect` is appended with a 40-pixel corner radius. The complete visual result is a simple, frameless field, demonstrating basic SVG construction with D3’s selection and attribute-chaining methods against a fixed-position, full-screen body.

Vvaynexie
87% match
Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser window with a single rounded rectangle. The visualization demonstrates minimal setup using D3 v5, where the `select` method targets the SVG element and sets its dimensions to match the viewport. A rect with a 40-pixel corner radius is appended to create the sole visual element. The example relies on the document body's client dimensions to size the canvas, with CSS constraining the page layout to prevent scrolling.

AAndreas Loew
86% match
Loading thumbnail…

Blank Canvas

This example shows a full-screen, rounded rectangle that fills the browser window with a solid teal color, creating a minimal blank canvas. The visualization uses D3 v5 to select the SVG element and dynamically size it to the viewport dimensions. A single `<rect>` is appended and styled with a 40-pixel corner radius and a muted blue-gray fill, with the body fixed to prevent scrolling.

CCassie
86% match
Loading thumbnail…

Blank Canvas

This example presents a blank, rounded-corner rectangular canvas that fills the entire browser viewport. The visualization uses D3 v5 to create a single SVG `rect` element, with dimensions dynamically calculated from the `document.body.clientWidth` and `clientHeight` properties. The canvas is styled with a fixed, full-screen layout, and the D3 `select` function targets the SVG element to set its width and height, demonstrating a minimal setup for responsive SVG rendering.

Ccheeson
86% match
Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the entire browser window. The visualization is a minimal SVG canvas that demonstrates the use of D3 v5's `select` method to resize an SVG element to the full width and height of the viewport. The code appends a single `rect` element with a 40-pixel corner radius, relying on the document's client dimensions. No data or interaction is present; the example focuses solely on the fundamental setup of an SVG drawing space.

VVito
86% match