Cars Report

100%

✓ Published0🌍 Public

Last edited Nov 30, 2021

Created on Nov 30, 2021

This example demonstrates a minimal visualization gallery entry that displays the text "H" in a large HTML `<pre>` element. It loads D3 via UNPKG and uses ES6 module imports to fetch and parse a hard-coded JSON array of car data from `cars.js`. The code imports the parsed `cars` array but does not render it, instead writing a static message to the DOM via `document.getElementById`. The example primarily showcases VizHub’s support for module loading and D3 integration.

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 demonstrates how to load and display data from an external ES6 module in a VizHub project. It imports a JSON array of car objects from `carsreport.js` and renders the first car’s make (Honda) as plain text inside a `<pre>` element. The visualization uses standard JavaScript `JSON.parse` and DOM manipulation via `document.getElementById`, with D3 loaded from UNPKG as a dependency. The page structure lives in `index.html`, while styling is defined in `styles.css`.

Mmshah151

90% match

Loading thumbnail…

Cars Report

This example shows a minimal web page that renders the text “hello world” in large type, demonstrating how to load D3 and local ES6 modules in VizHub. The page uses an HTML `<pre>` element as the output target and updates its content via `document.getElementById` in the main script, which imports from `cars.js` and `myMessage.js`. The data file includes a small JSON array of car objects parsed with `JSON.parse`. The code relies on a bundled script generated by Rollup, with styling defined in `styles.css`.

XXAlomia

90% match

Loading thumbnail…

Cars Report

This example demonstrates a minimal data-visualization setup in VizHub, displaying a static message in a web page. The code imports a small dataset of car records from a local ES6 module and defines a string variable, though only the string is rendered as text in an HTML heading. D3 is loaded via UNPKG from a CDN, and the example showcases modular JavaScript imports and basic DOM manipulation with `document.getElementById`. The styling is handled by a linked CSS file, with the final output appearing as centered, large text.

JJ. Hunter Priniski

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

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

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

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

88% match

Loading thumbnail…

Cars Report

This example demonstrates a minimal data-visualization gallery piece where the page displays the make of the first car from a hardcoded JSON array, showing "Honda" prominently. The code parses an embedded JSON string via `JSON.parse` into a `cars` array, exports it as an ES6 module, and imports it into `index.js` to update a `<pre>` element’s text content. The styling uses a Google Fonts import (`Ubuntu`) with CSS for a dark background and large centered text.

RRashmi000

88% match