Cars Reports

100%

✓ Published1🌍 Public

Last edited Mar 4, 2021

Created on Mar 2, 2021

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.

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 name of the first car model from an embedded JSON dataset in large text on a web page. The data, defined in cars.js as an array of car objects with year, make, model, and price, is imported via an ES6 module. The code uses `JSON.parse` to convert the inline JSON string and `document.getElementById` to update the page’s content, with styling applied through a `pre` element and external CSS. It demonstrates basic D3-free data handling and modular JavaScript imports within a VizHub project.

SSonaJoseph-LD

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

91% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded JSON dataset as a large text message on a web page. The data, defined in a local `cars.js` ES6 module, contains three car records with year, make, and price fields. The visualization imports this data using the `import` statement and uses standard JavaScript DOM manipulation to set the text content of the `#message-element` HTML element. The page loads D3 version 5 from a CDN, though the visible code does not call any D3 functions.

MMartin Casey

89% match

Loading thumbnail…

Cars Report

This example displays the make of the first car from a hardcoded JSON dataset, rendered as large text on a page. It shows how to import and parse data from an ES6 module (`cars.js`) and update the DOM via `document.getElementById` and `textContent`. The styling uses Google Fonts' Ubuntu and a dark blue background via CSS. No external visualization library is used; the example relies solely on core JavaScript and the browser's DOM API.

RRashmi000

89% match

Loading thumbnail…

cars report

This example displays the make of the first car in a small JSON dataset as plain text on a webpage. It loads D3 via UNPKG and uses local ES6 modules to import and parse the car data with `JSON.parse`. The index.js file selects a DOM element by ID and sets its text content, while CSS styles the message with a large font size. The visualization demonstrates basic data loading, module imports, and DOM manipulation with D3 v5.

Mmanishabehera

89% match

Loading thumbnail…

Cars Report

This example demonstrates a minimal web page that displays a static text message, "Hello world !!", extracted from a JavaScript array of car objects. The visualization reports only the first car's make from the data, though the code currently overrides it with the fixed string. The page structure uses an HTML `<pre>` element with a large font size, populated via the `document.getElementById()` API. The data is defined in a separate `cars.js` module, which is parsed using `JSON.parse` and imported through the VizHub environment.

JJSR2000

89% match

Loading thumbnail…

Cars Report

This example displays a simple text greeting in a web page that reports the brand of the first car in a hard-coded JSON dataset. It demonstrates a basic D3 version 6 setup and data import, using JavaScript’s `JSON.parse` and a custom `cars` module. The page’s HTML contains a `<pre>` element whose text content is updated by the `index.js` script, which uses the `document.getElementById` method to set the message. The visualization is not interactive and contains no charts, only a static text output.

YYugank717

89% match

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

89% match