Skip to main content
SimilarExport ZIP
100%

DUPA

✓ Published0🌍 Public
BBromBor
Last edited Mar 1, 2021
Created on Feb 28, 2021
Forked from Hello VizHub

This example demonstrates how to display text from a local ES6 module on a webpage. It uses a simple JavaScript array of bird objects with properties like species and food, and displays a specific species name in a large font. The code imports a variable from a separate `birbs.js` file and uses DOM manipulation via `document.getElementById().textContent` to update the page. It also shows commented-out examples of using JSON parsing and array mapping, though the active code focuses on simple data extraction and rendering.

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 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.

MMonaYuan
65% 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
64% 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
64% 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
64% match
Loading thumbnail…

Simple Webpage

This webpage presents a minimal interactive dashboard that loads the penguins dataset from a CSV file and visualizes it using D3.js. The page displays a simple title and paragraph alongside a data-driven chart, with styling applied through an external CSS file. The JavaScript file (main.js) handles data parsing and rendering, likely using D3’s CSV loading and SVG-based plotting. The example demonstrates a basic HTML/CSS/JavaScript setup where D3 binds the external data to visual elements, showcasing a clean, straightforward approach to embedding a chart in a standard web document.

LLuluh8080
63% match
Loading thumbnail…

test

This example demonstrates the basic setup for using D3 version 6, displaying a single message extracted from a flower dataset. It loads flower measurements as JSON and displays the first entry’s content in an HTML element. The code uses the native `import` statement to access the data from a local JavaScript module, then manipulates the DOM directly with `document.getElementById` and `textContent`. The visualization serves as a minimal introduction to integrating D3 v6 with modern ES6 module syntax, highlighting the correct import pattern for external data files.

AAmanda-Tai
63% match
Loading thumbnail…

JS in HTML

This example demonstrates how JavaScript modules can be seamlessly integrated into an HTML page using D3 v6. The page displays the text "Hello HTML" in large type, while the accompanying JavaScript logs greetings and exports to the browser console. It uses D3’s `select` import and modular exports from custom `something.js` and `thing.js` files, showcasing ES module syntax and dependency chaining. The rendering approach is simple static HTML with a CDN-hosted D3 script.

CCurran Kelleher
63% match
Loading thumbnail…

js tutorial

This example demonstrates how to load and display local data in a VizHub project using D3 and modern JavaScript modules. It imports a cars dataset from a local ES6 module, parses JSON, and writes the first car’s make to an HTML `<pre>` element via `document.getElementById`. The visualization relies on D3 loaded from UNPKG, showcasing basic import syntax and DOM manipulation without any chart rendering.

JJustin Epstein
63% match