Skip to main content
SimilarExport ZIP
100%

Cars Report

✓ Published1🌍 Public
YYilmazSalman
Last edited Nov 8, 2019
Created on Nov 8, 2019
Forked from 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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

RRashmi000
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
91% match
Loading thumbnail…

Cars Report

This example displays the make of the first car in a small, hardcoded JSON dataset. The code defines an array of car objects in `cars.js`, parses it with `JSON.parse`, and then uses DOM manipulation via `document.getElementById` to insert that value into a `<pre>` element. The page uses an external Google Fonts stylesheet and a dark blue, centered text layout, with the displayed message rendered at a very large font size.

PPrasad Saodekar
90% 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
90% match
Loading thumbnail…

Cars Report

This example displays the make of the first car in a static dataset as large, centered text. It loads a hardcoded JSON array of car objects from a local ES6 module named `cars.js` and uses `document.getElementById` to inject the value into an HTML `<pre>` element. The page demonstrates basic module import/export syntax and DOM manipulation without any external libraries.

Ssofiaboteva
90% match
Loading thumbnail…

Cars report

This example shows a minimal cars report that displays the make of the first car in a dataset. The page renders “honda” in large, styled text on a dark blue background using the Ubuntu font. The code imports a static JSON array from `cars.js`, accesses `cars[0].make`, and updates the text content of a `pre` element via `document.getElementById`. Styling is handled through an external Google Fonts import in `styles.css`.

Cclara6
89% match
Loading thumbnail…

Cars report

This example shows a minimal cars report that displays the make of the first car in a dataset. The page renders “honda” in large, styled text on a dark blue background using the Ubuntu font. The code imports a static JSON array from `cars.js`, accesses `cars[0].make`, and updates the text content of a `pre` element via `document.getElementById`. Styling is handled through an external Google Fonts import in `styles.css`.

Cclara6
89% match