Cars report

100%

✓ Published0🌍 Public

Last edited May 12, 2021

Created on May 11, 2021

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

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

HHassan Abdullah

90% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded JSON dataset. It demonstrates loading D3 and using local ES6 modules in VizHub. The code imports the parsed `cars` array from `cars.js` and writes the first car’s make into a `<pre>` element via the DOM API. It uses `JSON.parse` on an embedded string to structure the data.

Ccharliekramer

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

89% match

Loading thumbnail…

Cars Reports

This example displays the name of the first car in a static JSON dataset, rendered as a large text message in a web page. The data is defined in a local ES6 module (`cars.js`) using a JSON string that is parsed into an array, and the entry point `index.js` imports it to update a DOM element’s text content. The visualization uses no D3 or external libraries—only plain JavaScript with `document.getElementById` to manipulate the HTML, styled by `styles.css` for centered, large typography. It demonstrates basic module imports and DOM scripting within a VizHub project.

NNehaGawri

89% match

Loading thumbnail…

Cars report

This example displays the name of the first car model from an embedded JSON dataset in large text on a web page. The data, defined in cars.js as an array of car objects with year, make, model, and price, is imported via an ES6 module. The code uses `JSON.parse` to convert the inline JSON string and `document.getElementById` to update the page’s content, with styling applied through a `pre` element and external CSS. It demonstrates basic D3-free data handling and modular JavaScript imports within a VizHub project.

SSonaJoseph-LD

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

88% match

Loading thumbnail…

Cars Report

This example demonstrates how to combine static HTML, JavaScript, and CSS to create a simple report page. It loads data from an inline JSON array of car details (name, model, price, year) and parses it using the native `JSON.parse` method. The page displays a large "Hello" message in a designated `<pre>` element and uses an external ES6 module to export a separate "Hello VizHub!" string, though this module's content is not rendered in the visible output. The code relies on standard DOM methods like `getElementById` and `textContent` to update the page.

SSahilPoonatar

88% match