Lesson1

100%

✓ Published0🌍 Public

Last edited Mar 6, 2022

Created on Mar 6, 2022

This example demonstrates basic SVG shapes and text manipulation using D3.js. It renders a large yellow circle with a black stroke and a smaller unfilled circle on a 960×500 SVG canvas. The code imports `select` from D3 via UNPKG to set the text content of a message element to “Hello VizHub!”. It also imports a local ES6 module, `myMessage`, to provide the message string. The static SVG markup defines the circles directly in `index.html`, while the D3 selection targets a `#message` div, highlighting both DOM-based rendering and module imports.

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…

Hello VizHub

This example demonstrates basic SVG shape rendering and styling within a static HTML page, using D3.js as the sole imported library but leveraging standard SVG elements for the visualization. It shows circles, rectangles, lines, and a path, with groups applying stroke and fill properties to coordinate multiple shapes. The code imports a message from a local ES6 module, `myMessage.js`, and uses `d3.select` to update the page text. The `styles.css` file imports the Ubuntu font and defines classes for line and path styling, while the SVG is rendered client-side with no external data source.

KKhalid

84% match

Loading thumbnail…

Creating SVG

This example demonstrates how to create and manipulate SVG shapes directly in HTML while also integrating D3.js for DOM selection and updates. It includes a static red circle rendered inside an SVG element and uses D3's `select` function to target the `#message` div, though the text-setting functionality is currently commented out. The code loads D3 v5 from UNPKG and shows basic project structure with local ES6 modules, CSS styling, and a bundled script, highlighting the foundational workflow for building interactive visualizations in VizHub.

WWilliam Ofosu Agyapong

83% match

Loading thumbnail…

vizhub

This example demonstrates the fundamental building blocks of SVG graphics and D3.js integration within the VizHub environment. It displays basic geometric shapes—circles, rectangles, and a line—positioned on a 960×500 canvas, with some shapes colored explicitly and others inheriting styles from parent groups via the `transform` attribute. The code imports D3’s `select` function from the D3 v5 library loaded via UNPKG, alongside a local ES6 module, `myMessage.js`, which provides a greeting string. A separate script uses `select` to set the text of a `#message` div element, showing how D3 can manipulate DOM content beyond SVG. The rendering is done entirely through inline SVG markup in `index.html`, with styles defined in `styles.css`.

PPhilipe Allan Almeida

83% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG rendering by drawing a single circle element with specified coordinates and radius. It shows how VizHub supports modern JavaScript workflows, including importing D3’s `select` function via UNPKG and loading local ES6 modules. The code uses `select` from D3 to set the text content of a message div, sourcing the string from a separate `myMessage.js` module. The visualization is rendered as inline SVG within the HTML, with styling applied through an external CSS file.

GGonzaloGV

83% match

Loading thumbnail…

RK-SVG Fundamentals

This example demonstrates basic SVG rendering with a red circle, while showcasing VizHub’s module-loading workflow. The code imports D3’s `select` function via UNPKG and a local ES6 module `myMessage.js` to update a `#message` div with the text “Hello VizHub!”. A static SVG circle is defined directly in `index.html`, and accompanying CSS styles the message text. The example illustrates how to combine D3 selection, named exports, and plain HTML structure in a minimal D3 v5 project.

Kkrehan1

82% match

Loading thumbnail…

learning

This example displays a simple D3.js visualization inside an SVG: a single red circle centered within a message div. It demonstrates core VizHub workflows, including loading D3 from UNPKG via a script tag, importing D3 functions like `select` in ES6 modules, and importing a local `message` constant from `myMessage.js`. The code uses D3 v5 and renders static SVG markup without data binding or interactive behavior.

Bbhattrahul007

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

82% match

Loading thumbnail…

Hello HTML

This example demonstrates VizHub’s ability to combine static HTML structure with dynamic D3.js operations. It renders a single yellow circle with a black stroke on a 960 by 500 SVG canvas, while a D3 `select` API call updates a div’s text content to "Hello VizHub!" using a local ES6 module. The page loads D3 from UNPKG and imports a custom `message` function from `./myMessage`. The visualization relies entirely on inline SVG markup and CSS styling, with no external data source.

IIdo Koubi

82% match