cars reports

100%

✓ Published0🌍 Public

Last edited Mar 5, 2020

Created on Mar 5, 2020

This example displays a single car make—Ford—as large text extracted from a small inline JSON dataset of five used cars. The data is loaded from `cars.js`, where the JSON string is parsed into an array and exported. `index.js` selects the third car object and assigns its `make` property to the text content of a `<pre>` element via `document.getElementById`. The page renders this result in a 3em font, demonstrating basic data binding and DOM manipulation without external libraries.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Report

This example displays a single message—the make of the first car in a small dataset—on a webpage using a large `<pre>` element. The data is defined as an inline JSON array in `cars.js` and parsed with `JSON.parse`, then imported into `index.js` where the first object’s `make` property is accessed directly. The text is rendered by setting `textContent` on the element, using no external libraries or visualizations.

HHombreLobotomia

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

89% match

Loading thumbnail…

Cars Reportmodified

This example displays a single car make from a hardcoded dataset of five vehicles, rendered in large text on a page. It loads car data from a JSON array in `getCars.js` and uses plain JavaScript to access the first entry, outputting its `make` property into an HTML `<pre>` element via `document.getElementById`. The page also logs a message to the browser console, but visual rendering relies solely on DOM manipulation without external libraries or frameworks.

Ccsteigleder

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

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

89% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small static dataset, rendering the text into a large `<pre>` element. The code imports car data from a JSON string parsed into an array in `cars.js`, then uses plain DOM manipulation via `document.getElementById` to update the page content. Built with React, it relies on a bundled JavaScript output and a simple HTML shell, with no interactive charts or visual encoding beyond the displayed label.

SShriram Bhosle

89% match

Loading thumbnail…

Cars Report

This example displays a single text message—the make of the first car in a hardcoded JSON array—inside a large `<pre>` element. It loads the car data from `cars.js` via a JSON string parsed with `JSON.parse` and imported as a module, then accesses `cars[0].make` to update the page content. The visualization is minimal, demonstrating how a React-based project can integrate plain JavaScript data handling and DOM manipulation through `document.getElementById` and `textContent`. The data includes five cars with attributes like year, make, model, and price.

GGarrett Haas

89% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small static dataset, rendered as large text on a blank page. The code imports a hardcoded JSON array of five car records containing year, make, model, and price, then uses `document.getElementById` and `textContent` to inject the value into a `<pre>` element. No interactive or charting libraries are involved; the visualization relies solely on DOM manipulation to show a single data point.

PPallabi Dutta Bose

88% match