Activity 6_Task 1

100%

Activity 6_Task 1

✓ Published0🌍 Public

Last edited Oct 22, 2024

Created on Oct 22, 2024

This example demonstrates how D3.js version 5 can be loaded via UNPKG and used alongside local ES6 modules to dynamically update page content. It shows the ability to import specific functions like `select` from the D3 library, as well as custom local modules such as `message.js`, which exports a simple string. The code uses D3's `select` API to target a div element and set its text content, with styling applied via an external CSS file. It serves as a minimal starter template highlighting D3's modular import capabilities.

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

This example demonstrates how to load D3 via UNPKG and use ES6 `import` statements to bring in both D3 API functions and local modules. The code imports `select` from D3 and a custom `message` function from a local ES6 module, then uses `select('#message').text(message)` to display the text "Hello VizHub!" in the center of the page. A stylesheet styles the message with a large 12em font, and HTML includes the D3 library from a CDN before executing the bundled JavaScript.

Ppraneeth.d555@gmail.com

89% match

Loading thumbnail…

activity 6_Task 1

This example demonstrates a minimal D3.js visualization setup using ES6 modules, loading D3 v5 from UNPKG and importing both local modules and D3 API functions. The code uses `import { select } from 'd3'` to update the text content of a message div, while also defining CSS styling and a regular expression. The visualization renders a simple text message centered on the page, showing how to structure a basic D3 project with separate files for marks, axes, and data loading. The example does not display any actual data or chart elements beyond the styled text output.

AAP19110020041-Pavan Kumar

89% match

Loading thumbnail…

activity 6_Task 1

This example demonstrates how to build a modular D3.js application using ES6 modules and local imports. It displays a message in a large, centered text element, with the text content defined in a separate module. The code loads D3 from UNPKG and uses the `select` function to update the DOM, while also showcasing a regular expression and a constant variable. The styling is handled through an external stylesheet.

Ssahithya.voleti@gmail.com

88% match

Loading thumbnail…

Activity6_Task 2

This example demonstrates a minimal D3.js setup that loads the library via UNPKG and uses ES6 modules to display a static message. It shows how `import { select } from 'd3'` manipulates the DOM by setting the text of a `#message` div, while a separate local module (`myMessage.js`) exports the string content. The page also imports a stylesheet to center and scale the text with a 12em font size. The visualization itself contains no data or interactive elements.

Vvikramkotlo9@gmail.com

88% match

Loading thumbnail…

Fork of Activity6_Task1

This example demonstrates how to load D3 via a CDN and use ES6 module imports to structure a simple D3 project. It renders a static text message inside a div, selected and updated using `d3.select`. The visualization also includes a local ES6 module (`myMessage.js`) that exports the message string, and imports the `select` function directly from D3 v5. The code uses D3’s UNPKG distribution and modifies the DOM’s text content without any data binding or complex rendering.

Ppradeepgubbala2001@gmail.com

86% match

Loading thumbnail…

Activity6_

This example presents a minimal D3.js application that demonstrates how to load the library via UNPKG and utilize its `select` API to set the text content of an HTML division. The visualization relies on local ES6 modules, including `myMessage.js`, which exports a simple greeting string rendered through the `d3.select` method. The static text output is styled using a CSS file, showcasing a straightforward integration of D3 with external styling and module imports.

PPothuguntla Pranitha

86% match

Loading thumbnail…

activity8_task1

This example demonstrates how D3.js can integrate with modern JavaScript modules to create a basic interactive web page. It loads D3 v5 from a CDN and uses ES6 imports to bring in both the `select` function from D3 and a custom message from a local module. The code sets the text of a div element to display a greeting, and also defines a numeric constant and a regular expression to showcase additional JavaScript syntax. The example serves as a minimal template for combining D3 with modular code structure.

Aanusharamana0@gmail.com

86% match

Loading thumbnail…

ACTIVITY 6_Task 1

This example demonstrates how to import and use D3.js v5 alongside local ES6 modules within a VizHub project. It loads D3 from a CDN via UNPKG and uses the `select` API to target a DOM element, setting its text content to a custom message defined in a separate module. The page displays a large, centered greeting by applying CSS styling to the message div. The visualization serves as a minimal template for integrating external libraries and modular JavaScript code.

PPavanKumarRacharla@my.unt.edu

86% match