Fork of Hello

100%

✓ Published0🌍 Public

Last edited Mar 30, 2021

Created on Mar 30, 2021

This example displays a single car model from a small dataset of vehicles, showing the text "accord" centered on the page with large font styling. It imports car data from a local ES6 module (`cars.js`) that parses a JSON string using `JSON.parse`, then accesses the second entry to extract the model field. The code demonstrates module imports, DOM manipulation via `getElementById`, and CSS styling for the message element.

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…

Fork of Hello D3 Version 6

This example shows a single car make, “Honda,” displayed in large text on a web page. It demonstrates a minimal D3 version 6 setup by importing car data from a JavaScript module and updating the DOM. The code uses `d3.v6` from a CDN, a JSON string parsed with `JSON.parse` within `cars.js`, and `document.getElementById` to set the text content of a `<pre>` element. No charts or visual encodings are present; the focus is on basic data import and rendering.

MMonisha Gopinath

83% match

Loading thumbnail…

Fork of HTML Starter

This example displays the make of the first car in a small dataset, specifically showing “Honda” as large text on a blank page. The visualization uses a JavaScript script, `index.js`, to import the car data from `cars.js` and update the text content of an HTML element with the ID `message-element`. The page layout is styled with CSS, setting the font size of the message to three times the default. The dataset contains four cars with attributes for year, make, model, and price.

NNoah Adeshina

82% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to build a minimal D3-powered web page using ES6 modules. It displays a static text message and a car model name by importing data and functions from separate local JavaScript files. The code loads D3 v5 from UNPKG in the HTML file and uses the `select` API from the `d3` import to update the DOM. It also parses a hardcoded JSON string from a local module to access the first car’s model attribute.

HHENRY

81% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal React and JavaScript approach to displaying a single data value from an imported dataset. It shows the first car’s make (“Honda”) as large text on a blank HTML page. The code imports car data from a local `cars.js` module containing embedded JSON, parses it with `JSON.parse`, and writes the result to the DOM using `document.getElementById` and `textContent`. Styling relies on basic inline CSS within the HTML file, with no external visualization libraries.

Mmahamanesani

81% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal static page that displays the model name of the first car in a hardcoded array. It shows how to structure an HTML file with embedded CSS and JavaScript, alongside separate ES6 modules for data and logic. The page uses plain DOM APIs like `getElementById` and `textContent` in `index.js` to update the `#message-element` preformatted block. The `cars.js` file exports a const array of objects containing brand, model, and price fields, with the displayed value sourced from that dataset.

LLulu

81% match

Loading thumbnail…

Fork of car report

This example displays the make of the first car in a hard-coded dataset, rendering “Honda” as large text centered on the page. A JavaScript array of car objects is stored in a separate module and imported into the main script, which then updates the text content of an HTML element via `document.getElementById`. The page uses plain CSS for centering and font sizing, with no external visualization libraries or interactive features beyond the static output.

Kknguyengithub

81% match

Loading thumbnail…

Fork of Cars report

This example displays the make of the first car in a static dataset, rendering “Honda” as large text on a plain HTML page. It imports car data from a separate `cars.js` module, which contains a hardcoded JSON array of five vehicles with year, make, model, and price fields. The `index.js` file parses this JSON using `JSON.parse` and updates the DOM by setting the `textContent` of a `<pre>` element with `id="message-element"`, styled via inline CSS. The visualization uses no charting library, relying solely on React-like modular imports and vanilla JavaScript.

Kknguyengithub

81% match

Loading thumbnail…

Fork of Cars report

This example displays a static HTML page with a large centered message reading “Hello d3.js!” styled using CSS with a font size of 13em. The page references a local `cars.js` file that defines a single car object with properties for name, year, and price, though that data is not visualized. The implementation uses plain CSS for layout and styling, and the body contains no interactive or data-driven elements beyond the hardcoded text.

VVamsiYandapalli

80% match