Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published0🌍 Public
MMichaelBGonzalez
Last edited Dec 13, 2021
Created on Dec 13, 2021
Forked from Hello VizHub

This example demonstrates a simple SVG card with a title label and a greeting message, styled with a drop shadow. It shows how to import D3.js from a CDN via `https://unpkg.com/d3@5.16.0/dist/d3.min.js` and use the `select` API from the `d3` module to set text content. The code also imports a local ES6 module (`./myMessage`) to supply the string `'Hello VizHub!'`, and uses an external `styles.css` for text formatting.

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 a minimal D3.js setup within a VizHub project, displaying the text "Hello VizHub!" centered on the page. It shows how to import D3 functions and local ES6 modules, using `select` from D3 to update a DOM element's content. The code loads D3 via UNPKG and combines it with a custom module, `myMessage.js`, to supply the message string. The rendering uses an SVG element in the HTML, while styling for the message text is handled in a separate CSS file.

RRoderick Anthony
88% match
Loading thumbnail…

Fork of Hello

This example demonstrates a minimal D3.js setup within the VizHub environment, showing how to integrate external libraries and local ES6 modules. The page renders a static SVG circle and displays the text "Hello VizHub!" using D3’s `select` to target a div by ID. The code imports the `select` function from D3 v5 via UNPKG, imports a message string from a separate `myMessage.js` module, and applies styling through an imported CSS file. The visualization highlights basic modular coding and D3’s DOM manipulation capabilities.

Aanthonythecodewizard
87% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates basic D3.js text manipulation and ES6 module imports within the VizHub environment. It uses the `select` function from D3 v5 to populate a `div#message` element with a greeting string. The greeting originates from a separate local module, `myMessage.js`, highlighting how VizHub supports modular code organization. The page loads D3 via UNPKG and applies custom styling through an external `styles.css` file, showing a simple, complete visualization scaffold.

KKayDD1
87% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates how to create a simple text display using D3.js within the VizHub environment. It uses the `select` function from D3 to target a DOM element with the ID "message" and sets its content to the text "Hello VizHub!". The text message is imported from a local ES6 module via the `import { message } from './myMessage'` statement, showcasing modular JavaScript. The page loads D3 version 5.16.0 directly from the UNPKG CDN. Custom styling is applied through a linked CSS file, which centers the message and sets its font size to 12em. This example illustrates the basic workflow of combining external libraries, local modules, and custom styles in a data visualization project.

Aanjalimadhavi98@gmail.com
87% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, rendering the text “Hello VizHub!” into a centered message div. It highlights fundamental workflow patterns: loading D3 v5 from UNPKG, importing the `select` function via ES6 modules, and importing a local module (`myMessage.js`) for the message content. The visualization is a simple static text output, with styling applied through an external CSS file. The code illustrates the basic structure for combining CDN-hosted libraries with modular JavaScript.

RRobertWell
87% match
Loading thumbnail…

Fork of Hello VizHub

This example shows static SVG shapes—a red circle and a green rectangle—positioned on a black background, demonstrating basic D3 selection and styling via `d3.select`. The page loads D3 v5 from UNPKG and uses a local ES6 module (`myMessage.js`) to export a message, though the message is not rendered in the visible output. The SVG is defined directly in `index.html`, while `index.js` applies the background color through a D3 selection. The code illustrates VizHub’s support for CDN imports, local modules, and inline SVG markup.

AAyush Morankar
86% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that renders an SVG element and displays the text "Hello world" in the DOM. It loads D3 v5 from UNPKG and uses the `d3.selectAll` API to target the SVG, though no visual marks are drawn. The code imports a local ES6 module (`myMessage.js`) to show modular JavaScript in a VizHub project. Styling is handled externally via CSS for the message div.

BBoni
86% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within the VizHub environment, displaying the text “Hello VizHub!” centered in the browser. It loads D3 v5 from a CDN via UNPKG and uses the `select` API to target a `div` element and set its content. The code also illustrates importing a local ES6 module, `myMessage.js`, to supply the displayed string, with styling applied through an external CSS file.

Yyadlapallisaisathvik@gmail.com
86% match