Skip to main content
SimilarExport ZIP
100%

Blank!

✓ Published0🌍 Public
Aaidanoconnor1
Last edited Dec 1, 2019
Created on Dec 1, 2019

This example shows a blank SVG canvas with a yellow rectangle. It demonstrates fundamental DOM manipulation using D3.js by appending a `rect` element and setting its width attribute. The code imports the `select` function from the d3 library, then uses it to target the SVG element. The page renders using SVG, and the implementation is based on D3 v5, with styling defined in an external stylesheet.

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

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.

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

Blank Canvas

The visualization displays a full-viewport, rounded rectangle filled with a solid yellowgreen color. It uses D3.js version 5.12.0 to select the SVG element and set its width and height to the browser window’s dimensions. The `select` function appends the rectangle, and the `attr` method configures its size, corner radius (rx), and fill color. This minimal example demonstrates basic SVG manipulation and layout without any data mapping or interaction.

Aarieltonglet
87% match
Loading thumbnail…

Blank Canvas

A blank SVG canvas is filled with a single gray rectangle that spans the full width and height of the viewport, creating a minimalist visual effect. The example demonstrates the basic structure of a D3.js v5 project, using `d3.select` to access the SVG element and `svg.append` to add a `rect` element. The rectangle’s width is set twice in the code, while its height remains unspecified, leaving the shape incomplete. This serves as a starting point for understanding SVG rendering with D3’s declarative API.

CClara Hu
87% 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
86% match
Loading thumbnail…

Blank Canvas

A nearly empty SVG canvas fills the entire browser viewport, containing only a single small rectangle with default black fill. The example demonstrates the most basic D3 setup: selecting the root `<svg>` element, reading the browser window’s dimensions, and setting the SVG’s width and height attributes accordingly. Using d3.select, the code appends one `<rect>` element with hardcoded width and height values, serving as a minimal starting point for further visualization development. The renderer is SVG with D3 v5, and the layout is fully responsive to the viewport size.

Mmgrundell
86% match
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
86% match
Loading thumbnail…

Blank Canvas

A blank, rounded-rectangle canvas fills the entire browser viewport, with its width and height set to the document’s client dimensions. The example demonstrates a minimal SVG setup using D3 v5, where the `select` and `arc` functions are imported but only `select` is used to append a single styled `<rect>`. The visualization shows no data or interaction, serving purely as an empty starting point. It relies on the D3 selection API and SVG attributes, with CSS fixed positioning to prevent page scrolling.

Nntds12
86% match