Skip to main content
SimilarExport ZIP
100%

vizhub

✓ Published0🌍 Public
PPhilipe Allan Almeida
Last edited Jun 15, 2022
Created on Jun 15, 2022
Forked from Hello 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`.

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…

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
89% 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
88% match
Loading thumbnail…

Hello VizHub

This example demonstrates basic D3.js and ES6 module usage in VizHub. It displays a large, centered greeting message and a static SVG circle on a dark blue background. The code uses `select` from D3 v5 to set the div’s text content, and imports a custom `message` from an ES6 module. The SVG renders a single circle without interaction, while CSS styling drives the visual layout and font.

Yyaohaobin
88% 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
87% match
Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental D3.js and ES6 module usage within a VizHub template. It shows how to load the D3 library via UNPKG and use the `select` function to update DOM content, while also importing a local module (`myMessage.js`) to display a text message. The page renders a large centered greeting using CSS styling, highlighting basic data-visualization project structure and module communication.

Aabdullahhsaleh8@gmail.com
87% match
Loading thumbnail…

Hello VizHub

This example demonstrates the basic setup of a VizHub visualization, showing a blank SVG canvas with a red background rendered using D3 v5. The code imports the D3 library via CDN and selects the SVG element using `d3.select` to apply styling. It also includes an ES6 module (`myMessage.js`) exporting a string, though the message is not displayed in the visualization. The page styling comes from an external CSS file that imports the Ubuntu font.

FFloridaPlates
87% match
Loading thumbnail…

Hello VizHub

This example demonstrates the basic setup of a VizHub visualization, showing a blank SVG canvas with a red background rendered using D3 v5. The code imports the D3 library via CDN and selects the SVG element using `d3.select` to apply styling. It also includes an ES6 module (`myMessage.js`) exporting a string, though the message is not displayed in the visualization. The page styling comes from an external CSS file that imports the Ubuntu font.

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