blank canvas

100%

✓ Published1🌍 Public

Last edited Aug 22, 2019

Created on Aug 22, 2019

The example presents an interactive SVG canvas that fills the browser viewport with a rounded rectangle, while asynchronously loading car listings from a local JSON dataset. D3 v5 selections (`select`, `attr`) handle DOM manipulation and styling after a simulated two-second delay. The `getCars` promise resolves sample vehicle data, which `generateReport` filters by price and formats via `formatCar` into readable text. The interface displays a loading message in a `<pre>` element until the data arrives, then renders the result in a message div.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Report

This example renders a blank SVG canvas with a red background using D3 v5 and a minimal HTML page. It selects the `<svg>` element with `d3.select`, then applies the background color via `style('background-color', 'red')`. The visualization does not yet display any data, serving as a starting point for adding car-related charts or reports. The code relies on the D3 library loaded from a CDN and demonstrates basic DOM selection and styling through D3’s API.

RRomans Gainanovs

82% match

Loading thumbnail…

Blank Canvas

A blank, interactive canvas fills the browser window, rendered as a single rounded rectangle sized to the full viewport. The visualization demonstrates a minimal SVG setup using D3 v5, where the `select` function targets the empty `<svg>` element and dynamically sets its width and height attributes based on `document.body.clientWidth` and `clientHeight`. A single `<rect>` is appended and styled with a corner radius of 40 pixels. No data is loaded or transformed; the piece exists purely as a static starting point for further layering.

CCalvin Gomez

81% match

Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser viewport. The visualization draws a single rounded rectangle that covers the entire display area, using the body’s client dimensions for sizing. The code imports `select` from the D3 library (version 5.9.2) and applies `.attr` and `.append` methods to create the SVG rectangle, with no data or additional marks rendered.

MMunTatt Yap

81% match

Loading thumbnail…

Blank Canvas

A blank canvas fills the browser window, rendered as a single rounded rectangle. The visualization demonstrates the minimal setup for a D3 project, with no data or interaction. The code uses `d3.select` to target the SVG element and dynamically sizes it to the viewport's client dimensions. A `rect` is appended to the SVG, inheriting the full width and height with a corner radius, all rendered as vector graphics. The example relies on D3 v5’s core selection methods, not any specialized visualization API.

Ccpsshan

81% match

Loading thumbnail…

Blank Canvas

A blank rectangular canvas fills the browser window, rendered as a single large SVG rectangle with rounded corners. The code creates this minimal visualization by selecting the `svg` element and setting its dimensions to match the viewport, then appending a `rect` with `rx` for rounded edges. It uses D3 v5's `select` and `json` imports, though no data is loaded or displayed, resulting in an intentionally empty, interactive-free surface. The styling relies on fixed positioning and hidden overflow to ensure the canvas occupies the entire screen.

MMaciek Sitkowski

81% match

Loading thumbnail…

Blank Canvas

A blank canvas fills the browser window, rendered as a single rounded rectangle using D3 v5's `select` and SVG `attr` methods. The visualization displays no data, only an empty, fixed-position SVG that adapts to the viewport's dimensions. The code imports `select` and `arc` from D3, though only `select` is used to create the static shape. The HTML loads `styles.css` for full-bleed layout and `bundle.js` to execute the drawing logic.

LLiu2021311512

81% match

Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser window, defined by a single rounded rectangle that matches the viewport dimensions. The page appears as an empty, frameless space with no data or interaction, emphasizing the starting point for a visualization. The code uses D3 v5’s `select` and `arc` imports, though only `select` renders the static shape. The SVG size adapts to the document body’s client height and width, while CSS fixes the body and hides overflow, ensuring the canvas remains fully visible without scrollbars.

HHanyang

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

81% match