Cars Report

100%

✓ Published0🌍 Public

Last edited Sep 12, 2021

Created on Sep 12, 2021

This example shows a simple report of five used cars, displaying their year, make, model, and price as raw JSON text directly on the page. The visualization is purely textual, rendering a static array of car data in a large `<pre>` element. It demonstrates loading D3 and local ES6 modules via VizHub, importing the `cars` array from a separate `cars.js` file, and using `document.getElementById` to inject the JSON string into the DOM. The page relies on a bundled `bundle.js` script with basic HTML and CSS styling.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Report

This example displays a list of five used cars with their year, make, model, and price, rendered as static text on a dark blue page. The Cars.js module stores the car data as a JSON string, which is parsed and exported for use in index.js. The page imports D3 v5 and uses the ES6 module system, while the message “Hello VizHub!” is set via `document.getElementbyId`, though it is not shown in the final output. The styling uses an imported Ubuntu font with large centered text.

Aapiask18

92% match

Loading thumbnail…

Cars Report

This example displays a list of used cars with their year, make, model, and price. The data is defined as a JSON array in a local ES6 module, parsed with `JSON.parse`, and rendered as formatted text in a `<pre>` element by setting its `textContent`. The page loads D3 via UNPKG and imports the data using ES6 `import` syntax, demonstrating modular code organization. No charts or D3 visualization functions are used in the visible behavior.

YYi-Qing

91% match

Loading thumbnail…

Cars Report

This example displays a static report of five used cars, showing each vehicle’s year, make, model, and price. It renders the data by parsing a JSON string embedded in the `cars.js` module with `JSON.parse`, then assigns a simple greeting message to a DOM element using `document.getElementById`. The visualization relies on React for its component framework and outputs the plain text message to a `<pre>` element in the HTML, demonstrating a minimal data-driven setup without interactive charts or graphics.

PPhilippe Bonnet Doring

91% match

Loading thumbnail…

Cars Report

This example visualizes a small dataset of five used cars with their make, model, year, and price. It loads D3 via UNPKG and imports car data from a local ES6 module using `JSON.parse`. The page renders the raw data into an HTML `<pre>` element with large font size, demonstrating basic module imports and D3 integration with minimal setup.

HHaniAlHawasli

91% match

Loading thumbnail…

Cars Report

This example displays a single car make from an embedded JSON dataset of five vehicles, showing how to parse and render data with plain JavaScript. The code imports the car data from a separate ES6 module (`cars.js`), parses it with `JSON.parse`, and uses the DOM API `document.getElementById` to insert the value of `cars[1].make` (Nissan) into a styled `<pre>` element. The page styling relies on CSS with an imported Ubuntu font and a dark blue background, while the visualization itself is minimal, demonstrating VizHub's module-based workflow rather than any charting library.

TTucker Richlie

90% match

Loading thumbnail…

Cars Report

This example displays a short list of used cars with their make, model, year, and price, sourced from a static JSON array defined in `cars.js`. The visualization renders the data as plain text on a webpage, with a large "Hello" message styled via CSS. It uses D3 v5, loaded from a CDN, but the code primarily relies on standard JavaScript `JSON.parse` and DOM manipulation rather than D3-specific data-binding or layout methods.

Yylzami40

90% match

Loading thumbnail…

Cars Report

This example displays a list of five used cars with their make, model, year, and price, extracted from an inline JSON array. The page renders the text “Hey there” in a large `<pre>` element by using D3 v5’s selection and DOM manipulation via `d3.select` and `.text()`. The data is imported as a JavaScript module from `cars.js`, while the HTML loads D3 from a CDN and references a bundled script.

Ggpfstuff

90% match

Loading thumbnail…

Cars report

This example shows a simple data report of five used cars, displaying their make, model, year, and price in a static JSON dataset. The page renders a large red greeting message and a heading, while the JavaScript sets the message element’s text content to the second car’s make, “Nissan,” using the DOM API `document.getElementByID` and `textcontent`. The data is parsed with `JSON.parse` and imported from a separate module, but no charting or visualization library is used.

Bb-g-h

90% match