Blank Canvas

100%

✓ Published1🌍 Public

Last edited Aug 15, 2020

Created on Aug 15, 2020

Forked from Let's make a face with D3.js

A blank SVG canvas is filled with a rounded rectangle that resizes to fit the browser window. The example demonstrates fundamental DOM manipulation using D3.js v5, showing how to select an SVG element, set its width and height attributes, and append a styled rectangle shape. The code uses `d3.select` to target the SVG, then chains `.attr` calls to configure dimensions and corner radius, with CSS fixing the body to prevent scrolling. This is a minimal example intended to illustrate basic D3 selection and element creation.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Blank Canvas

This example shows a blank, rounded rectangle filling the browser window as a simple canvas. It demonstrates fundamental DOM manipulation and SVG creation using D3.js v5. The code calculates the width and height from the document body, sets the SVG element's size accordingly, and appends a rectangle with a defined corner radius. Using the `select` function and chained `attr` and `append` methods, it illustrates how to build and style SVG shapes entirely through D3’s programmatic interface.

MMajaha21

96% match

Loading thumbnail…

Blank Canvas

This example demonstrates a blank, resizable canvas that fills the browser window, rendered as a rounded rectangle using SVG. It shows fundamental DOM manipulation with D3.js by selecting the empty `svg` element, setting its width and height to the viewport dimensions, and appending a `rect` with rounded corners. The code uses `d3.select` and `d3.append` from d3.v5, with the SVG size dynamically bound to `document.body.clientWidth` and `clientHeight`. The accompanying stylesheet fixes the body to prevent scrolling, ensuring the visualization always fits the screen.

Aalfredo-f

93% match

Loading thumbnail…

Blank Canvas

This example demonstrates an empty SVG canvas that fills the browser window and displays a rounded rectangle as its only visual element. The code uses d3.select to target the SVG element and sets its width and height to match the available viewport dimensions, then appends a rect with a corner radius. The D3 v6 select method and attribute chaining handle the SVG drawing, while the fixed CSS positioning ensures the canvas remains anchored to the viewport.

AAjit Singh

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

93% match

Loading thumbnail…

Blank Canvas

A blank, full-screen SVG rectangle with rounded corners serves as the canvas. The example demonstrates a minimal setup using D3 v5, where the `select` function targets the SVG and sets its dimensions to match the viewport. It appends a single `rect` element with a rounded corner radius, filling the entire space. The code highlights basic SVG rendering and dynamic sizing based on the browser window.

SSimon Pettersson

93% match

Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser viewport, displaying nothing but a single rounded rectangle that matches the window's dimensions. The visualization demonstrates the foundational setup of a D3 project by importing the `d3` library and appending a basic shape element. Using `d3.select` on an empty SVG, it dynamically sets the width and height attributes based on the document's client dimensions, then adds a `rect` with a 40-pixel corner radius. The code relies on D3 v5 and a bundled JavaScript file, with CSS positioning the body to cover the entire viewport.

AAndreas Loew

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

93% match

Loading thumbnail…

Blank Canvas

This example presents a blank, rounded rectangle filling the entire browser window, rendered as an SVG element. It demonstrates the foundational structure of a D3.js visualization using the `d3.select` API to acquire the SVG canvas and setting its dimensions to match the viewport. The code calculates the width and height from the document body and appends a single `<rect>` element with a corner radius, offering a clean starting point for further graphical development.

CCurran Kelleher

92% match