Cars Report

100%

✓ Published0🌍 Public

Last edited Nov 26, 2019

Created on Nov 26, 2019

This example displays a single car make, "Honda," from a small dataset of five cars. The data is embedded as a JSON string in `cars.js` and parsed with `JSON.parse`. The visualization uses plain JavaScript to select the first car object and update the text content of a pre-formatted HTML element via `document.getElementById`. The page’s large text output is styled with inline CSS, with the bundle built by Rollup. The code demonstrates basic data access and DOM manipulation without additional charting libraries.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Cars Report

This example displays a single car make, “Honda,” from a hardcoded JSON array of five car records. The visualization reads the first object in the array using `JSON.parse` and assigns it to an exported `cars` variable, then accesses `cars[0].make` to set the text content of a `<pre>` element. It relies on vanilla JavaScript, with no external visualization libraries, and renders the result as plain text in the browser via the DOM API `document.getElementById`. The data source is an embedded static dataset rather than a live feed.

EEmiliano de Jesús Gonzalez Rodriguez

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

92% match

Loading thumbnail…

Cars Report

This example displays a single car make, “Honda,” pulled from a hardcoded JSON array of five vehicle entries (year, make, model, price) defined in `cars.js` and parsed with `JSON.parse`. The code uses plain JavaScript to select an element by ID via `document.getElementById` and writes the text content to the page. No D3 version 6 APIs or visual elements are employed; the demonstration focuses on importing an ES module and manipulating the DOM directly.

Ttssytrack

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

91% match

Loading thumbnail…

Cars Report

This example displays a single car make, "Honda," extracted from a hard-coded JSON array of five vehicles. It demonstrates loading D3 and local ES6 modules, then uses `document.getElementByID` to write the message into a preformatted HTML element. The data is parsed with `JSON.parse` from the `cars.js` module and rendered as plain text.

Pparsonsdjp

91% match

Loading thumbnail…

Cars Report

This example displays a single car make from a small static dataset of four vehicles. The code imports car data from a JSON array via an ES6 module and uses `document.getElementById` to update the text content of a `<pre>` element. The page applies a custom Ubuntu font and bold styling through CSS, and the bundled script runs in the browser from `bundle.js`. The visualization shows only the first car’s make, "Honda," without any charts or interactive elements.

Mmartiguesc

91% match

Loading thumbnail…

Cars Report

This example shows a single data point from a small built-in dataset of used cars, displaying the make of the first car ("Honda") in large text on a webpage. It demonstrates a minimal data-to-DOM pipeline: a hardcoded JSON array in `cars.js` is parsed into a JavaScript array using `JSON.parse`, then imported via ES modules into `index.js`. The code selects an HTML element by ID with `document.getElementById` and sets its `textContent` to the value. No external visualization libraries are used; the rendering relies entirely on plain JavaScript and static HTML.

Aaudreyfr

91% match