Cars Report

100%

✓ Published0🌍 Public

Last edited May 5, 2022

Created on May 5, 2022

This example displays the make of the first car in a hardcoded JSON dataset. It demonstrates loading D3 and using local ES6 modules in VizHub. The code imports the parsed `cars` array from `cars.js` and writes the first car’s make into a `<pre>` element via the DOM API. It uses `JSON.parse` on an embedded string to structure the data.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small dataset. The data is embedded in a JSON string in cars.js and parsed into an array of objects. The code uses `document.getElementById` to access a `<pre>` element and sets its `textContent` to a single car make. It demonstrates basic data import and DOM manipulation in a VizHub environment.

BBrandon Da Silva

93% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small JSON dataset as text on a web page. It imports the `cars` array from a local ES6 module and uses JavaScript to access the `make` property, which is then assigned to the `textContent` of a `<pre>` element. The visualization demonstrates loading D3 via UNPKG and using ES6 `import` syntax for both local modules and the D3 library, though the current code only renders a single string value.

HHaniAlHawasli

93% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded dataset of four vehicles, rendered as large text on the page. It imports car data from a separate module using ES6 syntax, parses a JSON string with `JSON.parse`, and accesses the `make` property of the first object. The result is written into a `pre` element via `document.getElementById` and `textContent`, using a minimal D3 v5 setup with no visualization or animation.

AAnthony-coding

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

91% match

Loading thumbnail…

Cars Report

This example displays a single car make from an embedded JSON dataset of five vehicles, showing how to parse and render data with plain JavaScript. The code imports the car data from a separate ES6 module (`cars.js`), parses it with `JSON.parse`, and uses the DOM API `document.getElementById` to insert the value of `cars[1].make` (Nissan) into a styled `<pre>` element. The page styling relies on CSS with an imported Ubuntu font and a dark blue background, while the visualization itself is minimal, demonstrating VizHub's module-based workflow rather than any charting library.

TTucker Richlie

91% match

Loading thumbnail…

Cars Report

This example displays the make of the first car from a small inline dataset, rendered as large text in a dark themed report. It demonstrates basic ES6 module imports and data handling in D3 v5. The code parses a JSON string into a `cars` array using `JSON.parse`, then accesses `cars[0].make` to update the page. The single message replaces the content of a `<pre>` element via `document.getElementById`, with styling applied through an external Ubuntu font stylesheet.

Nnils

90% 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 page. It demonstrates loading D3-free ES6 modules in VizHub, with car data defined in a local module and imported into the main script. The code uses plain DOM manipulation to set the text content of an element, and it imports data from a local JavaScript module rather than using D3 APIs or external files.

IIudicatio

90% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small, hardcoded dataset. It shows how to import a JavaScript array of car objects, parsed from a JSON string in a separate module, and render a single data point to the page. The visualization uses a plain HTML `<pre>` element, directly setting its text content via the standard DOM API `document.getElementById` and `textContent` in a script that imports the `cars` array.

Ssalamullahuet

89% match