Cars report

100%

✓ Published0🌍 Public

Last edited Mar 5, 2021

Created on Mar 5, 2021

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.

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

92% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small dataset. The data is embedded in a JSON string in cars.js and parsed into an array of objects. The code uses `document.getElementById` to access a `<pre>` element and sets its `textContent` to a single car make. It demonstrates basic data import and DOM manipulation in a VizHub environment.

BBrandon Da Silva

90% 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 the make of the first car in a small embedded dataset, rendering the text “Honda” in large type. It demonstrates importing and parsing JSON data with `JSON.parse` and updating the DOM via `document.getElementById` in `index.js`. The page uses D3 v5 loaded from a CDN, but relies on plain JavaScript rather than D3-specific APIs for the visualization. The dataset contains five car records with year, make, model, and price fields.

Ggpfstuff

89% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded JSON dataset as a large text message on a web page. The data, defined in a local `cars.js` ES6 module, contains three car records with year, make, and price fields. The visualization imports this data using the `import` statement and uses standard JavaScript DOM manipulation to set the text content of the `#message-element` HTML element. The page loads D3 version 5 from a CDN, though the visible code does not call any D3 functions.

MMartin Casey

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

88% match

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

88% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small JSON dataset of five vehicles, rendering it as large text on a blank page. It imports the parsed car data from the `cars.js` module, then uses `document.getElementById` and `textContent` to update the message element with the value `"Honda"`. The visualization is minimal, demonstrating ES6 module imports and basic DOM manipulation with no external libraries.

DDvdscot

88% match