Cars Report

100%

✓ Published0🌍 Public

Last edited Sep 16, 2019

Created on Sep 16, 2019

This example displays the make of the first car from a hardcoded JSON dataset, rendered as large text on a page. It shows how to import and parse data from an ES6 module (`cars.js`) and update the DOM via `document.getElementById` and `textContent`. The styling uses Google Fonts' Ubuntu and a dark blue background via CSS. No external visualization library is used; the example relies solely on core JavaScript and the browser's DOM API.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Report

This example displays the make of the first car from a hardcoded JSON dataset containing three vehicles. It retrieves `cars[0].make` and writes the result into a large HTML element using the DOM API `document.getElementById`. The app imports the parsed JSON from the `cars.js` module and relies on ES6 module syntax. Styling uses a dark background with the Ubuntu font from Google Fonts, and the page runs as a bundled script in `index.html`.

RRashmi000

94% match

Loading thumbnail…

Cars Report

This example displays a cars report by reading the first entry’s make from an embedded JSON dataset and rendering it as large text on a dark, styled page. It uses a pre-formatted `<pre>` element to show “Nissan,” with the text updated via the `Document.getElementById` API. The visualization demonstrates basic data import and DOM manipulation through ES6 modules, importing `cars` from a local module and applying global CSS with the Google Fonts Ubuntu typeface.

YYilmazSalman

92% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded JSON dataset, rendering “Honda” in large, centered text on a dark background. It showcases a minimal setup where an ES6 module exports parsed car data, and the main script updates the DOM element’s text content directly. The page uses plain JavaScript with a custom stylesheet for typography, demonstrating a simple data-to-display pipeline without external visualization libraries.

Lliechtia

92% match

Loading thumbnail…

Cars Report

This example displays a single formatted car listing, showing the year, make, model, and price, with a large, styled text output on a dark blue background. It demonstrates basic data handling by parsing a static JSON array of car objects and using array methods like `filter` and `map` to process the data, though the final displayed message uses the first car. The code relies on ES6 modules for data import/export and the DOM API `document.getElementById` to update the page content. CSS styling uses an imported Google Font and custom properties.

RRashmi000

92% match

Loading thumbnail…

Cars Report

This example displays a car report by reading imported JSON data and rendering the make of the first vehicle in large text on a dark, styled page. Using the cars module, it parses a static array of car objects and assigns the property to a DOM element’s text content via `document.getElementById`. The interface relies on plain HTML, CSS with a Google Fonts import, and ES6 module exports, though no D3 or interactive visualization is present.

KKG-Gurley

92% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded JSON dataset, rendering it as large, styled text on a dark background. It loads an array of five car objects from `cars.js`, parses the JSON, and uses vanilla JavaScript to set the text content of a `<pre>` element via `document.getElementById`. The page’s styling comes from CSS, including the Ubuntu font, a navy background, and centered, 12em font size. No external visualization libraries are used; the focus is on a minimal DOM update.

Iimregan

92% match

Loading thumbnail…

Cars Report

This example displays a single car make—Honda—in large text on a dark blue page. It demonstrates basic module loading and DOM manipulation with vanilla JavaScript, importing a car dataset from a JSON string parsed in `car.js`. The page renders the first record’s make using `document.getElementById` and `textContent`, with styling from an external CSS file that sets the Ubuntu font and background color. The visualization is minimal, serving as a template for data-driven text output.

Aamoustafa93

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

91% match