Cars report

100%

✓ Published0🌍 Public

Last edited Aug 21, 2019

Created on Aug 21, 2019

A dashboard displays the brand of the first car from a small inline JSON dataset, rendered as oversized text in a dark, blue-themed page. The example uses d3.v5 to parse the data and plain JavaScript to update the DOM. It highlights VizHub’s ability to combine an ES6 module, inline data, and external styling, with the CSS font loaded from Google Fonts.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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

89% match

Loading thumbnail…

Cars Report

This example demonstrates a minimal data-visualization setup in VizHub, displaying a static message in a web page. The code imports a small dataset of car records from a local ES6 module and defines a string variable, though only the string is rendered as text in an HTML heading. D3 is loaded via UNPKG from a CDN, and the example showcases modular JavaScript imports and basic DOM manipulation with `document.getElementById`. The styling is handled by a linked CSS file, with the final output appearing as centered, large text.

JJ. Hunter Priniski

88% match

Loading thumbnail…

Cars Report

This example displays a list of five used cars with their year, make, model, and price, rendered as static text on a dark blue page. The Cars.js module stores the car data as a JSON string, which is parsed and exported for use in index.js. The page imports D3 v5 and uses the ES6 module system, while the message “Hello VizHub!” is set via `document.getElementbyId`, though it is not shown in the final output. The styling uses an imported Ubuntu font with large centered text.

Aapiask18

88% match

Loading thumbnail…

Cars Report

This example demonstrates how to load and display a small dataset of car information in the browser. It parses a hardcoded JSON string containing five car records and renders it as text on an SVG canvas. The visualization uses D3.js v7, loaded via UNPKG, alongside native JavaScript ES6 modules for organizing the code. The page includes a separate module that exports the message “Hello VizHub!” and displays it in a styled element using the `textContent` property. Text formatting is handled through plain CSS.

JJChung-rpi

87% match

Loading thumbnail…

Cars Reports

This example displays the name of the first car in a static JSON dataset, rendered as a large text message in a web page. The data is defined in a local ES6 module (`cars.js`) using a JSON string that is parsed into an array, and the entry point `index.js` imports it to update a DOM element’s text content. The visualization uses no D3 or external libraries—only plain JavaScript with `document.getElementById` to manipulate the HTML, styled by `styles.css` for centered, large typography. It demonstrates basic module imports and DOM scripting within a VizHub project.

NNehaGawri

87% match

Loading thumbnail…

Cars Report

This example renders a simple text report about a small collection of cars, displaying the make of the first car in the dataset. The page uses a dark blue background with a light, centered Ubuntu font to present the message. The data is defined as a JSON string in JavaScript, parsed into an array of car objects, and the first entry’s make is retrieved and assigned to a DOM element. The implementation relies on D3 v5 for basic utilities, while the output is delivered through standard HTML and CSS styling.

Ssgroko

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

87% match