Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published0🌍 Public

Last edited May 15, 2021

Created on May 15, 2021

This example demonstrates how D3.js can load and display data from a local ES6 module while also using D3 to update the DOM. It shows a simple text message and a car data value (the year 2000) rendered on the page. The code uses `import { select } from 'd3'` to manipulate the `#message` div, imports data via a local `cars.js` module, and reads a property from the parsed JSON array. The visualization relies on D3 v5 loaded from UNPKG, with styling applied through an external stylesheet.

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

91% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to build a simple VizHub visualization that displays a formatted message about a car from a small, hardcoded JSON dataset. The visualization uses D3 v5, loaded via UNPKG, along with local ES6 modules for code organization. The `index.js` file imports the `select` function from D3 to set the text of an HTML div, while the message itself is generated by a custom module that parses the car data and formats it into a readable string. The rendering is minimal, showing the result as large centered text via CSS.

RRobertWell

91% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how D3.js can be used to update the text content of an HTML element, showing a simple data-binding pattern. It loads D3 from UNPKG and uses the `select` function to target a div with id `message`, setting its text to a string imported from a local ES6 module. The visualization also illustrates modular JavaScript with `import` statements for both D3 utilities and custom code, while a CSS file centers the text. The rendering approach is straightforward DOM manipulation, with no external data source.

Ssalim.mir@outlook.com

89% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to load and display a single data value from a local ES6 module in a web page. It imports a `cars` array containing one object with a `make` property, parses it from a JSON string, and renders the result (`Honda`) into a `<pre>` element using the DOM API. The visualization relies on D3 v5 loaded from UNPKG, though no D3-specific functions are invoked. A separate CSS file styles the message with large, centered text. The approach shows basic module imports, JSON parsing, and DOM manipulation within the VizHub environment.

Llrakla

89% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates D3.js module importing and basic DOM manipulation. It loads D3 v5 from UNPKG and uses the `select` function to set the text of a `div` element to 'Hello VizHub!'. The code also shows local ES6 module imports via `myMessage.js`, and applies styling from an external CSS file. The visualization is minimal, focusing on framework structure rather than data rendering.

UUzoemeka Okechukwu Innocent

88% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal “Hello VizHub!” application, rendering the message centered on the page using D3.js. It shows how to load D3 v5 from a CDN via UNPKG, use ES6 module imports to bring in the `select` function from the D3 library, and define custom local modules for sharing code. The visualization sets the text content of a `div` element with the id `message` using D3’s `select` and `.text` methods, styled by a separate CSS file. The data source is a simple hardcoded string from a local module.

Iindushashi.g@gmail.com

88% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that displays the text "Hello VizHub!" in the center of the page. It shows how an HTML page can load D3 from a CDN and use ES6 modules to structure code. The `index.js` file imports the `select` function from D3 and the `message` constant from a local `myMessage.js` module, then uses `select('#message').text()` to update the DOM. Styling is applied through an external CSS file, and three files—HTML, JavaScript, and CSS—work together as a basic template.

YYU

88% match

Loading thumbnail…

Hello VizHub Fork

This example demonstrates how to load D3 v5 from a CDN and import local ES6 modules in VizHub, displaying the make of the first car from a hardcoded JSON array in a pre element. The code parses the JSON string using JSON.parse, accesses the first object’s make property, and sets it as the text content of the element with the ID msg, styled by CSS. It shows basic D3 integration and module usage without additional visualization libraries.

IInferno-888

88% match