Activity6

100%

✓ Published0🌍 Public

Last edited Jun 14, 2023

Created on Jun 14, 2023

This example demonstrates how to use D3.js v5 within a VizHub project to display a custom message on a webpage. It shows a simple text rendering workflow, where the message "Hello VizHub!" is centered and styled using CSS. The code imports the `select` function from D3 and a local ES6 module exporting the message string. D3’s `select` method targets the `#message` div and sets its text content. The project also illustrates loading D3 from a CDN via UNPKG and bundling local ES6 modules.

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…

activity 6

This example demonstrates how to combine D3.js selection methods with ES6 module imports in a VizHub project. The page displays the text "Hello VizHub!" centered at a large font size using D3’s `select` function to target a div element and set its content. The message text itself comes from a separate local module, `myMessage.js`, while D3 v5 is loaded via a CDN script tag. The code shows a minimal workflow for importing both D3 APIs and custom modules, with styling handled by external CSS.

Ppjdhungana@gmail.com

93% match

Loading thumbnail…

Activity 8

This example demonstrates a minimal D3.js v5 setup within VizHub, replacing the contents of a div with a static text message. It shows how to load D3 from a CDN, import functions like `select` directly from the `d3` module, and import a local ES6 module that exports a string constant. The rendered output is a single, large, centered “Hello VizHub!” message, styled via a linked CSS file. The code uses `select('#message').text(message)` to set the DOM content, highlighting basic module imports and DOM manipulation without any data or animation.

Lleftymadi

93% match

Loading thumbnail…

Activity6 Task4

This example displays the text "Hello VizHub!" centered on a plain background, demonstrating the basic workflow of a VizHub project. It loads D3.js version 5 from a CDN and uses the `select` API to target the `#message` div and set its text content. The page imports a local ES6 module, `myMessage.js`, which exports the displayed string, and applies styling through an external CSS file. The example shows how to combine global library imports, local module imports, and D3 DOM manipulation in a minimal setup.

MmNamratha25

92% match

Loading thumbnail…

Activity 6

This example displays the text “Hello VizHub!” in the center of the page using D3 v5, loaded via UNPKG. It demonstrates importing individual API functions like `select` from the D3 module, as well as local ES6 modules for reusable content. The `select` method targets the `#message` div and sets its text content to the imported `message` string. Styling relies on a separate CSS file that centers the text and sets a large font size, showing a basic modular structure for VizHub projects.

Ssuryavamsi00024

92% match

Loading thumbnail…

activity 6 task 3

This example demonstrates the use of D3.js in a minimal VizHub setup, showing how to import modules and manipulate the DOM. It displays a single text message, “Hello VizHub!”, centered on the page. The code imports the `select` function from D3 and a custom message from a local ES6 module. D3’s `select` method targets the `#message` div and sets its text content, while CSS handles the large, centered font styling. The example serves as a basic template for combining D3 with local and external modules.

NNukaShravanKumar

92% match

Loading thumbnail…

activity 6

This example demonstrates how D3.js can be used to update the text content of an HTML element. It imports the `select` function from D3 and a custom ES6 module, then applies the module’s exported message string to a div with the ID `message`. The visualization loads D3 v5 from a CDN via UNPKG and styles the text using CSS, resulting in a centered, large-font display of the message "Hello VizHub!".

Ssaikrishnabussa

91% match

Loading thumbnail…

activity 8

This example demonstrates the basic capabilities of VizHub by displaying the text "Hello VizHub!" prominently in the center of the page. Using D3 v5 loaded via UNPKG, the code imports the `select` function to target the HTML element with the ID `message` and sets its text content. The message itself comes from a local ES6 module, `myMessage.js`, which exports the string constant, and the styling is handled by an external CSS file.

Ppardha1411

91% match

Loading thumbnail…

Activity 6

This example demonstrates a minimal setup for integrating D3.js with ES6 modules in VizHub. It displays a large, centered “Hello VizHub!” message by dynamically setting the text content of an HTML element. The code imports the `select` function from D3 via UNPKG, and imports a local ES6 module exporting the message string. It uses D3’s `select` and the `text` method to update the targeted div, with styling applied through an external CSS file. The example illustrates basic module imports, CDN loading, and DOM manipulation with D3.

Iindushashi.g@gmail.com

91% match