Skip to main content
SimilarExport ZIP
100%

Cars report

✓ Published2🌍 Public
AAsperge-Atomique
Last edited Oct 26, 2019
Created on Aug 21, 2019
Forked from Hello VizHub

This example displays a one-word report, “Honda,” pulled from a hardcoded JSON dataset of five cars stored in `cars.js`. The page renders the first car’s make in large, styled text on a dark blue background. The code imports the parsed `cars` array and uses `document.getElementById` to set the text content of a `<pre>` element. Styling relies on CSS with a Google Fonts import, while D3 v5 is loaded via CDN but not used for visualization.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Report

This example displays a simple text report from an array of car data, showing the make of the first car, a Honda, in a large `<pre>` element. The visualization loads D3 v5 and uses a static JSON dataset defined in `cars.js`, which is parsed with `JSON.parse`. The main logic in `index.js` imports the `cars` array and sets the text content of the HTML element via `document.getElementById`. It demonstrates basic data import and DOM manipulation without requiring any D3 data-joining or scales.

Ggpfstuff
93% match
Loading thumbnail…

Cars Report

This example displays a car report, initially showing “Hello” before updating the page text to the make of the first car in the dataset, “HONDA,” using plain DOM manipulation. It imports car data from a separate module via `import { cars } from "cars"` and parses a hardcoded JSON string with `JSON.parse`. The page is styled with a dark background and large Ubuntu font via external CSS, and D3 v5 is loaded from a CDN.

Cchiavedisol
93% match
Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded dataset, rendering the word "Honda" prominently on a dark, styled page. It loads a JSON array of car records via JavaScript’s `JSON.parse` and uses a simple DOM `textContent` assignment to update a `<pre>` element. The page’s visual design relies on an imported Google font (Ubuntu) and CSS for large, centered text. No interactive or charting library is used, focusing instead on minimal data extraction and static presentation.

RRod Potter
92% match
Loading thumbnail…

Cars Report

This example depicts a minimal cars report, displaying the make of the first vehicle from a hardcoded JSON array. A pre-formatted element renders the text "Honda" at a large font size. The implementation imports the parsed car data from a separate `cars.js` module, then uses the standard Document Object Model (DOM) API—specifically `document.getElementById` and `textContent`—to update the page. The visualization relies on D3 version 6 for data handling, though the core output is a simple text readout of the data.

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

Cars Report

This example displays a single car make—Honda—in large text on a dark page, sourced from a JSON array of five car objects with year, make, model, and price fields. The code imports the `cars` data from `cars.js`, logs the first car’s make to the console, and updates the HTML element with the ID `message-element` using `document.getElementById().textContent`. The visualization relies on a simple DOM manipulation approach rather than D3, though the project metadata lists D3 v5 as available. The styling uses the Ubuntu font from Google Fonts with a high-contrast color scheme.

SSameer.
91% match
Loading thumbnail…

Cars Report

This example displays a single car make, “Honda,” from a small JSON dataset of five used cars, rendered as oversized text on a dark, centered page. The visualization uses a plain HTML `<pre>` element and JavaScript to parse the embedded `carsJSON` string, then writes the first record’s `make` property into the page via `document.getElementById`. Styling relies on CSS with the Ubuntu font, while data imports come from the `cars` module and rendering is handled by the browser’s DOM API, with no external visualization libraries.

RRod Potter
91% match