Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published0🌍 Public
Llinyyyyyyyyy
Last edited Dec 1, 2022
Created on Dec 1, 2022
Forked from Hello VizHub

This example demonstrates how to create a basic VizHub page using D3 v5 and ES6 modules. It displays a large, centered text message by leveraging D3’s `select` function to manipulate the DOM. The code imports both the D3 library via UNPKG and a local module (`myMessage.js`), showcasing modular JavaScript. Though the `cars.js` file contains a small dataset with car information, the page does not render or use this data in its current behavior.

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…

cars report

This example demonstrates the basic capabilities of VizHub by rendering a simple text message in the center of the page. It loads D3 v5 via UNPKG and uses the `select` function to target a `div` element with the ID `message`. The text content comes from a local ES6 module, `myMessage.js`, which exports a string constant. The code highlights how to import from D3 and from local modules, with styling applied through an external CSS file.

GGreenBreakers
89% match
Loading thumbnail…

Cars Report

This example displays the text “Hello VizHub!” centered in a large font, demonstrating basic D3.js DOM manipulation and ES6 module structure. It loads D3 v5 from UNPKG, uses `select` from D3 to target a div with id `message`, and sets its text content from an imported local module. The code illustrates how to combine external libraries, local ES6 modules, and CSS styling within a VizHub project, serving as a minimal template for building interactive visualizations.

Rrondelletrinidadmdlz
88% match
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js setup where a user-defined message is rendered in a large, centered style on a dark background, alongside a second element displaying hardcoded text. The visualization imports the `select` function from D3 and a local ES6 module, `message`, to populate the DOM. It also imports car data from a local JSON file, though only the first car’s origin is referenced. The page uses D3 v5 and custom CSS with the Ubuntu font, showing basic data binding and modular file structure.

Aasimplesinger
88% match
Loading thumbnail…

Hello VizHub

This example demonstrates VizHub’s ability to render a simple text message defined in a separate data module. The code uses the D3 v5 library solely for loading, while the core interaction is a plain JavaScript DOM selection via `document.getElementById`. The message originates as the string "hello" in `cars.js`, is imported and assigned in `index.js`, and then displayed inside a styled HTML element. The visualization is static, with no dynamic data or scales, highlighting fundamental module import and DOM manipulation.

DDifan Gu
88% match
Loading thumbnail…

Cars Reports

This example shows an empty page with a single centered message, demonstrating VizHub’s ability to load D3 v5 from UNPKG, use ES6 modules, and bind data to the DOM. The code imports the `select` function from `d3` and a `message` string from a local `myMessage.js` module, then applies that text to a `#message` div via `select().text()`. The `styles.css` file renders the text at 12em, but no data or visual marks are present.

Mmuhadwan
87% match
Loading thumbnail…

Hello VizHub

This example displays a single text message, “Hello VizHub!”, on a dark blue page with large, centered Ubuntu typography. It demonstrates how to combine ES6 modules, an HTML file, and third-party styling within the VizHub environment. The code imports a car dataset from a JavaScript module, accesses the first car’s make, and renders it into a pre element using the Document Object Model API. The styling relies on a linked stylesheet and Google Fonts, while D3 v5 is loaded via a CDN script tag.

OONue_Y
87% match
Loading thumbnail…

Cars Report

This example demonstrates a minimal VizHub project that displays a large, centered “Hello VizHub!” message. It shows how to load D3.js from a CDN, import API functions like `select` using ES6 module syntax, and organize code across local modules such as `myMessage.js`. The page uses `index.html` to link a stylesheet and bundle, with the text styled via CSS. The rendering relies on D3’s `select` method to set the text content of an HTML div, and the data originates from a hardcoded string constant.

MMonaYuan
86% match
Loading thumbnail…

Cars Report

This example displays a simple HTML page with the text “Hello Viz” and “Hello VizHub!”. It shows how to import D3.js from a CDN and use local ES6 modules in a VizHub project. The code uses D3’s `select` method to set the text content of a div, relying on `d3.select` and JavaScript module syntax. Styling is handled via CSS, centering the message with a large font size. The data source is static text, demonstrating basic DOM manipulation with D3 and modular JavaScript.

Jjianntan
86% match