Cars Report

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

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

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

Cars Report

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.

Ccharliekramer

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

Cars report

This example demonstrates how to load and display data from an external ES6 module in a VizHub project. It imports a JSON array of car objects from `carsreport.js` and renders the first car’s make (Honda) as plain text inside a `<pre>` element. The visualization uses standard JavaScript `JSON.parse` and DOM manipulation via `document.getElementById`, with D3 loaded from UNPKG as a dependency. The page structure lives in `index.html`, while styling is defined in `styles.css`.

Mmshah151

Cars Report

This example displays the first car make from a small, hardcoded dataset of five vehicles, rendering “HONDA” prominently in large, bright text on a dark navy background. It demonstrates a basic D3.js and ES6 module setup within VizHub, importing data from a separate JavaScript file and updating a DOM element via `document.getElementById`. The visualization uses the `cars` array, parsed from a JSON string, and relies on vanilla JavaScript to insert the value, with styling controlled by external CSS and the Ubuntu font.

Cchiavedisol

Cars Report

This example shows a simple report of five used cars, displaying their year, make, model, and price as raw JSON text directly on the page. The visualization is purely textual, rendering a static array of car data in a large `<pre>` element. It demonstrates loading D3 and local ES6 modules via VizHub, importing the `cars` array from a separate `cars.js` file, and using `document.getElementById` to inject the JSON string into the DOM. The page relies on a bundled `bundle.js` script with basic HTML and CSS styling.

KKumar Nishant