Untitled

100%

✓ Published0🌍 Public

Last edited Dec 23, 2021

Created on Dec 23, 2021

This example demonstrates how to load data from a local ES6 module and update the text content of an HTML element. The code imports a parsed JSON array of car objects from `cars.js`, selects the first car’s make, and assigns it to the `textContent` of an element with the ID `message-element`. It uses D3 via UNPKG for module loading, alongside standard DOM manipulation through `document.getElementById`. The page renders a large, styled message in a `<pre>` tag.

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…

Untitled

This example shows a simple DOM update: it takes the make of the first car from a hardcoded JSON array and inserts that text into an element with the id `message-element`. The data is defined as a JSON string in `cars.js`, parsed with `JSON.parse`, and then accessed in `index.js` to set the text content via the standard DOM API `document.getElementById().textContent`. It demonstrates basic data loading and rendering without any external libraries or visualization frameworks.

JJP Moïse

85% match

Loading thumbnail…

cars

This example demonstrates how to display and update a simple text message on a webpage using D3 and ES6 modules. It loads D3 from UNPKG and imports it locally, then uses `document.getElementId` to select the message element and set its text content to “hello world.” The code illustrates basic DOM manipulation and module usage within a minimal HTML structure.

Vvivienneobrien

83% match

Loading thumbnail…

Cars Report

This example displays a static text message, “hellow,” inside a large `<pre>` element on a centered page. It imports a hard-coded JSON array of car objects from a separate module using ES6 `import` syntax. The page loads D3 v7 from a CDN but does not use any D3 methods. Instead, the script directly sets the `textContent` property of the `message-element` to demonstrate basic DOM manipulation with plain JavaScript. The visualization relies on the exported `cars` data, though that data is not rendered or processed visually.

Eethanjones-git

82% match

Loading thumbnail…

JavaScript101

This example demonstrates a minimal D3 version 6 setup by rendering a hardcoded message extracted from a JSON array of car data. It shows how to import and parse local data through ES modules, specifically using `cars.js` and `carsJSON` with `JSON.parse`. The code uses `document.getElementById` to set the text content of a `<pre>` element in `index.html`, displaying only the make of the first car. The visualization relies on standard DOM manipulation rather than D3’s data-binding or scales.

JJoshuoYang

82% match

Loading thumbnail…

Untitled

This example imports a small array of car objects from an ES6 module and displays the name of the first item in an HTML element. The data is parsed from a JSON string literal using `JSON.parse` and rendered as text content via `document.getElementById`. The page uses a large Ubuntu font from Google Fonts with a dark background, and the bundled output is loaded through `bundle.js`. No external visualization libraries are involved, as the focus is purely on data extraction and DOM text insertion.

MMukund Khandelwal

81% match

Loading thumbnail…

Cars Report

This example demonstrates how to build a minimal HTML page that loads D3 v5 from the unpkg CDN and displays a text message extracted from a local JSON dataset. The code imports the cars dataset from a local ES6 module, parses it with JSON.parse, and updates the DOM by setting the text content of a pre element to the first car's make property. It also includes a separate ES6 module for message export and basic CSS styling to center and enlarge the displayed text.

Bbicyclecode

81% match

Loading thumbnail…

Cars Report

This example demonstrates how to build a simple HTML page using D3.js and ES6 modules. It loads D3 version 5 from UNPKG and uses `document.getElementById` to set text content inside a `<pre>` element, displaying the message "Hello World" from `index.js`. The page also imports a second message from a local ES6 module (`myMessage.js`) and renders it. The `styles.css` file applies large, centered typography to the message container, creating a visually clean display.

Iihatelearning

80% match

Loading thumbnail…

cars new try

This example demonstrates a minimal D3 version 6 setup by displaying a simple text message in an HTML page. It imports a JavaScript object parsed from a JSON string defined in a separate module, though the visible output shows only the static string "test" rendered in a large preformatted element. The code uses the native `JSON.parse` method and ES6 module imports via `export` and `import`, along with basic DOM manipulation through `document.getElementById().textContent`. No data visualization is performed; the focus is on establishing a project structure with bundled dependencies.

Ddmiljkov

79% match