Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published0🌍 Public

Last edited Dec 23, 2021

Created on Dec 23, 2021

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.

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

CCecilia831

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

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

87% match

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal VizHub project that displays the make of the first car from a static JSON dataset. It uses D3 v5 for data handling and DOM manipulation, importing a parsed array of car records from a separate ES6 module via `export` and `import`. The code targets a `<pre>` element in the HTML and sets its text content to "Honda" using `document.getElementById`. The project shows how to structure modular code with external data and a simple rendering update.

Ssleyus

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

86% match

Loading thumbnail…

Hello VizHub

This example displays a single car make from a hardcoded JSON dataset parsed as an ES6 module. The visualization shows the text "Honda" centered on a dark blue background, styled with an imported Google Font. It uses d3.v5 for the environment and plain DOM manipulation through `document.getElementById` to set the message text. The code demonstrates importing from a local module (`cars.js`) and parsing JSON as a data source.

Ssaamkhya

85% match

Loading thumbnail…

Cars report

This example demonstrates how to load and display data from an external ES6 module in a VizHub project. It imports a JSON array of car objects from `carsreport.js` and renders the first car’s make (Honda) as plain text inside a `<pre>` element. The visualization uses standard JavaScript `JSON.parse` and DOM manipulation via `document.getElementById`, with D3 loaded from UNPKG as a dependency. The page structure lives in `index.html`, while styling is defined in `styles.css`.

Mmshah151

85% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the modular capabilities of VizHub, importing data from a local ES6 module and using D3.js to render static SVG shapes. The page displays a hard-coded dataset of five cars, loaded via a promise and filtered by price using a custom report generator. The visualization features basic SVG primitives, including circles, rectangles, and lines, with D3's `select` API used to manipulate page elements, though the main output is a text report.

SsunilthkGmail

85% match