Canvas

100%

✓ Published1🌍 Public

Last edited Jul 4, 2020

Created on Jul 4, 2020

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

This example displays a visually rounded rectangular frame rendered across the full browser window, created with an SVG element that fills the viewport and a `rect` with corner radius set to 40 pixels. The visualization uses D3 v5 within a React framework, employing `d3.select` to append the shape directly to the SVG. The `styles.css` fixes the body dimensions to prevent overflow. The underlying data structure, a hierarchical representation of world countries by region from `countryHeirarchy.json`, is available in the project files but not actively visualized in this minimal layout.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser viewport, rendered as a single rounded rectangle that adapts to the window’s dimensions. The example demonstrates a minimal setup for D3 v5 with React, using `select` from `d3` to target the `<svg>` element and setting its `width` and `height` attributes based on `document.body.clientWidth` and `document.body.clientHeight`. The code appends a `rect` with a 40-pixel corner radius via SVG’s `rx` attribute, while the stylesheet fixes the body to prevent scrolling. It serves as a starting point for building more complex visualizations.

GGino Dzin

83% match

Loading thumbnail…

making a canvas!

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.

Ffernandotsurukawa

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

82% match

Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the viewport, with a single rounded rectangle covering its full width and height. The code uses D3's `select` to grab the SVG element, then sets its dimensions based on `document.body.clientWidth` and `clientHeight`. A `rect` is appended with `rx` for rounded corners. The visualization demonstrates a minimal setup with D3 v5, React, and SVG, where the data is simply the viewport geometry itself.

Ggilbster

82% match

Loading thumbnail…

Blank Canvas

This example demonstrates a simple, blank SVG canvas with rounded corners, filling the entire browser viewport. The visualization uses JavaScript and the D3.js library (version 5) to select the SVG element and dynamically set its width and height to match the body's client dimensions. A single `rect` element is appended to the SVG, with its dimensions set to the full viewport size and a corner radius of 40 pixels. The accompanying CSS fixes the body to the viewport edges and defines styling for potential axis, line, and circle elements, though the displayed chart contains no data or additional marks.

WWarren-Fitzhenry

82% match

Loading thumbnail…

blank canvas

A blank SVG canvas fills the browser viewport, with a single rounded rectangle drawn to match the full window dimensions. The example demonstrates the minimal setup for a D3.js visualization within a React framework, using d3.select to target the SVG element and append a rect with computed clientWidth and clientHeight. The rect’s rounded corners are set via the rx attribute, while the body’s fixed positioning and hidden overflow ensure the canvas remains static and edge-to-edge.

Ssingularity6033

82% match

Loading thumbnail…

Black canvas

A full-screen black rectangle with rounded corners fills the browser viewport, rendered as an SVG element. The visualization demonstrates how to set up a minimal D3.js v5 environment within a React framework, using `d3.select` to target the SVG and dynamically sizing it to the document body’s client height and width. The code appends a single `rect` with a 40-pixel corner radius, showcasing basic SVG attribute manipulation without data or interaction. The stylesheet locks the body’s position to prevent scrolling, ensuring the canvas remains fixed.

Eevapavlinek

82% match

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

81% match