Skip to main content
SimilarExport ZIP
100%

Using Figma

✓ Published0🌍 Public
WWRCIECH
Last edited Dec 21, 2022
Created on Dec 21, 2022
Forked from Hello VizHub

This example shows how VizHub projects can combine static SVG markup with D3.js and local ES6 modules. It displays three overlapping ellipses and a rounded rectangle rendered in gray, alongside a large text message. The code loads D3 via UNPKG, references a local stylesheet, and demonstrates basic SVG shape primitives like ellipse and rect. While it imports D3, it does not use any D3-specific functions for drawing, relying instead on manual SVG elements in the HTML file.

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 displays two large SVG circles and a text message reading "Hello VizHub!" It demonstrates how to set up a VizHub project using D3 v5, loaded from UNPKG. The code imports the `select` function from D3 to update the text of an HTML div, and also imports a local ES6 module to supply the message string. It shows a basic SVG rendering approach with static shapes.

Ggaryz1997
81% match
Loading thumbnail…

d3

This example demonstrates the basic structure of a VizHub project, showing how D3.js can be imported and used to set the text of an HTML element. It loads D3 version 5 from UNPKG and uses the `select` API to update a message, alongside a local ES6 module for the message string. The visualization itself renders simple SVG shapes—a circle, rectangle, and line—with styling provided in CSS.

Ssimon-onebright
81% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub projects combine D3.js with local ES6 modules and external CDN resources. The page renders an SVG container with a single static circle element, while D3’s `select` function from the `d3` package is imported to manipulate the DOM. The code loads D3 v5 via UNPKG, links a local stylesheet, and references a custom `myMessage.js` module, illustrating modular project structure. The visualization itself is minimal, showing only the circle shape without data mapping or interactive behavior.

Kkishan-97
80% 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
80% 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
80% match
Loading thumbnail…

Hello VizHub

A static SVG scene demonstrates basic shapes and styling with D3 v5. The visualization renders circles, rectangles, lines, and a path inside a scaled group, using CSS classes to apply stroke properties. The HTML file includes D3 from a CDN, while separate JavaScript modules export a text message and select a DOM element to display it. The example highlights fundamental SVG rendering and ES6 module integration through D3’s select function.

Oowenizedd
80% match
Loading thumbnail…

Hello VizHub!

A minimal example introduces the VizHub environment with a static SVG circle on a dark background. It demonstrates an ES6 module exporting a text message, which D3.js selects and applies to a page element using the `select` function. The SVG markup is hand-authored in the HTML file, and the styling uses external Google Fonts. This example showcases basic project structure and integration of D3 v5 with custom JavaScript modules for simple visualization output.

KKexin Yu
80% 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
80% match