Skip to main content
SimilarExport ZIP
100%

making a canvas!

✓ Published1🌍 Public
Ffernandotsurukawa
Last edited Oct 14, 2019
Created on Oct 14, 2019

This example demonstrates how to create a full-screen interactive canvas using D3 v5 and SVG rendering. The visualization fills the browser viewport with a single rounded rectangle, responding to the window dimensions by setting the SVG width and height attributes dynamically. The code uses D3’s `select` function to target the SVG element and appends a `<rect>` element with a 40-pixel corner radius. The stylesheet ensures the body has no margins and prevents overflow, making the canvas occupy the entire display area.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Blank Canvas

This example displays a blank, full-window SVG canvas with a single rounded rectangle filling the viewport. The code uses D3 v5's `select` function to target the SVG element and sets its width and height attributes based on the browser window dimensions. A `rect` element with a corner radius of 40 pixels is appended and sized to match the available space. The minimal setup demonstrates how to initialize a D3 visualization with dynamic sizing and CSS styling that locks the body to the viewport.

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

Create a new Blank Canvas with D3.js!

This example creates a blank canvas by sizing an SVG to fill the browser viewport, then drawing a single rounded rectangle across the entire drawing area. The code uses D3.js v5’s `select` method to grab the `<svg>` element, sets its width and height from `document.body.clientWidth` and `document.documentElement.clientHeight`, and appends a `rect` with a 40-pixel corner radius via chained attribute setters. The SVG rendering approach is direct, with no external data source.

Fframptonb
85% match
Loading thumbnail…

Blank Canvas!

This example demonstrates a blank, responsive canvas that fills the entire browser window. The visualization is an empty SVG surface with a large rounded rectangle covering its full dimensions, creating a minimalist starting point. The code uses D3 v5's `select` function to target the SVG element, sets its width and height based on the viewport, and appends a `rect` with a corner radius of 40 pixels. The fixed positioning and hidden overflow in the CSS ensure the canvas remains stable and fully visible.

MMuhammad Jarir Kanji
85% match
Loading thumbnail…

blank canvas

A full-screen rounded rectangle serves as the sole visual element, rendered as an SVG rect that dynamically fills the browser viewport based on measured client dimensions. The example demonstrates a minimal D3 v5 setup using `select` to target the SVG element and setting width and height attributes directly from `document.body` parameters. With rounded corners applied via the `rx` attribute, the visualization creates a simple, frameless canvas effect while showcasing basic SVG manipulation and responsive sizing in a fixed-position layout.

JJason-Manbodh
83% match
Loading thumbnail…

Create a blank canvas

This example creates a full-screen, blank SVG canvas that fills the browser viewport. The code uses D3 v5’s `select` to target the SVG element, then reads the document’s `clientWidth` and `clientHeight` to set the SVG’s dimensions and append a solid rectangle covering the entire area. The underlying `styles.css` fixes the body to the viewport edges with zero margins, ensuring a seamless, borderless display. No data is loaded or manipulated; the visualization simply demonstrates a minimal setup for a fresh drawing surface.

Ooptimizeresume
83% match
Loading thumbnail…

Blank Canvas

This example fills the browser viewport with a single rounded rectangle rendered in SVG. The visualization is a blank canvas, created by selecting the `svg` element and setting its width and height to match the document body’s client dimensions, then appending a `rect` with a corner radius. The code uses D3 v5’s `select` function to manipulate the SVG and relies on CSS to fix the body’s position and hide overflow, ensuring the canvas spans the entire screen.

FFhouston17
83% match
Loading thumbnail…

Blank Canvas!

A blank, rounded rectangle fills the entire browser window, created entirely with SVG. The example demonstrates a minimal, full-screen canvas using D3 v5 to select an SVG element and set its dimensions based on the viewport. The code appends a single rectangle with a 40-pixel corner radius, while CSS fixes the body to prevent scrolling, resulting in a clean, empty visual space.

SSuzizaher
83% match