Creating SVG

100%

✓ Published0🌍 Public

Last edited Jun 4, 2022

Created on Jun 4, 2022

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.

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…

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

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

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

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

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

85% match

Loading thumbnail…

SVG 123

This example shows a simple webpage displaying the text "Hello VizHub!" centered on the screen. The visualization demonstrates the basic structure of a VizHub project, including how to import D3.js from a CDN and how to use local ES6 modules. The code uses D3's `select` API to target the HTML element with the ID `message` and set its text content. A separate `myMessage.js` module exports the string that is displayed, and basic CSS styling is applied through `styles.css`.

Eee-aa

84% match

Loading thumbnail…

Vizhub leson 1 TCB

This example demonstrates static SVG shapes—a brown rectangle and four nested concentric circles in red, yellow, purple, and blue—rendered inside a fixed 500×500 viewport. It also loads D3 via UNPKG and uses the `import { select } from 'd3'` statement to select a `#message` div, whose text is set to a string imported from a local ES6 module. The code highlights D3’s data binding and module integration without interactive behavior or external data sources.

Ttristancazorla

83% match

Loading thumbnail…

Lesson1

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.

PPharmaSofty

83% match