Cars Report

100%

✓ Published0🌍 Public

Last edited Dec 8, 2020

Created on Dec 8, 2020

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.

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

92% match

Loading thumbnail…

Cars Report

This example demonstrates a minimal data-visualization setup that loads a static dataset of five cars from a local ES6 module using `import`, then displays the make of the first car in large text within an HTML `<pre>` element. The code imports D3 from a CDN via UNPKG and uses `document.getElementById` to update the DOM with the selected value. It highlights basic ES6 module usage and simple DOM manipulation without any chart or graphical rendering.

SShankar Ghimire

92% match

Loading thumbnail…

Cars Report

This example demonstrates a minimal data visualization setup using D3 v5 loaded from a CDN via UNPKG, alongside a local ES6 module for car data. The page displays static text from an imported `cars` array containing two entries, rendered into a `<pre>` element using `document.getElementById`. The code highlights modular imports, JSON parsing, and simple DOM manipulation, with CSS styling applied through `styles.css`. No charts or visual encodings are present; the focus is on foundational D3 and ES6 integration.

Nnikeshkv

91% match

Loading thumbnail…

Cars Report

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.

KKumar Nishant

91% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded dataset, rendering it as large text in an HTML `<pre>` element. It demonstrates loading D3 via UNPKG, though the primary functionality uses local ES6 modules: `cars.js` exports parsed JSON data, and `index.js` imports it to update the DOM through `document.getElementById`. The visualization is minimal, showing a single string value rather than a chart, with styling provided by an external `styles.css` and inline font-size attributes.

YYumpman

91% match

Loading thumbnail…

Cars Report

This example presents a simple report on a small dataset of three used cars, listing their year, make, model, and price. It demonstrates how to import data from an ES6 module and render a specific value—the make of the second car—directly into the page. The visualization uses the `d3` library (v5) to parse the embedded JSON data, while the `index.js` script updates a `<pre>` element’s text content via the Document Object Model (DOM). A dark, styled background and custom font from Google Fonts enhance the presentation.

Ssgroko

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

The Cars Report example displays the first car’s make from a small inline JSON dataset. It uses D3, loaded via UNPKG, to parse the data, and demonstrates local ES6 module imports. The visualization renders the string "Honda" in a large `<pre>` element, showing a minimal data-to-text pipeline. It also includes a separate `myMessage.js` module, though the main output does not use it.

Yyann-toullec

90% match