Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published0🌍 Public

Last edited Feb 23, 2023

Created on Feb 23, 2023

This fork of the Hello VizHub example combines static SVG shapes and paths to create a playful geometric composition. It renders a red rectangle with a thick black stroke that transitions to green on hover, alongside a series of cubic Bézier curves forming abstract patterns and a yellow filled path. The code imports D3’s `select` API from `d3` v5 to set text content from a local ES6 module, while styling is handled through embedded CSS and an external stylesheet. No external data is used; the visualization relies entirely on hardcoded SVG markup.

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 a simple SVG path rendered as a blue-filled, red-stroked shape, repositioned with a CSS transform. It demonstrates VizHub’s core workflow: loading D3 v5 via UNPKG, using the `select` function from D3 to set text content, and importing a local ES6 module for a greeting message. The SVG markup is static, with styling applied through an external stylesheet.

PPiotr Paszek

90% match

Loading thumbnail…

Fork of Hello VizHub

This example showcases a minimal SVG scene composed of circles and rectangles in both black and red, rendered within an 960x500 viewport. The page demonstrates VizHub’s module system by importing D3 v5 via UNPKG for DOM selection, specifically using `select` to set the text of a message div. A local ES6 module supplies the greeting text, while CSS styles the message with large, centered typography.

AadbSalam

86% match

Loading thumbnail…

Fork of Hello VizHub

The example displays a simple, animated face made of SVG shapes: a yellow circle for the head, two eyes, and a mouth drawn with an arc path. The eyebrows animate by smoothly translating up and down over a few seconds. It demonstrates how to load D3 v5 from a CDN and use its `select` and `arc` API functions, alongside importing a local ES6 module. The text "Hello VizHub!" appears below the graphic, styled via an external CSS file.

HHalvorte

86% match

Loading thumbnail…

Fork of Hello VizHub

This example shows a static SVG visualization with a large yellow circle centered on a canvas, accompanied by a brief text message. The visualization renders a simple geometric shape with a black outline, while the page also displays "hello where are you" as paragraph text. The code demonstrates importing D3 functions via UNPKG, specifically using `select` from `d3` to set text content, and imports a local ES6 module to define the string "Hello VizHub!". The SVG is defined directly in the HTML, with the circle's position and dimensions specified through SVG attributes.

Ttestingwithaws

86% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a hand-coded collection of SVG shapes, including circles, rectangles, lines, and paths, arranged in groups with transforms and styling. It shows both static elements and a grouping of shapes with explicit fill and stroke attributes, as well as a second group using a CSS class to apply stroke styling. The code uses plain SVG within an HTML document, applying D3 only via the page title and structure; actual visualization is achieved through direct SVG markup and CSS, with no JavaScript-driven data binding or D3 API calls in the visible source.

YYanxxx447

86% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that draws two thick lines on an SVG canvas—a black line from (100,100) to (200,200) and a blue path from (200,200) to (400,450). It also displays the text “Hello VizHub!” centered in a div using D3’s `select` function. The code imports D3 v5 from UNPKG and a local ES6 module, showcasing modular JavaScript and basic SVG shape rendering.

SStolasIn

86% match

Loading thumbnail…

Fork of Hello VizHub

This example shows a simple smiling face rendered as SVG, demonstrating basic D3 shape generation and element manipulation. The code uses D3 v5 via UNPKG, importing `select` and `arc` from the local module system. It constructs a yellow circle for the face, black circles for eyes, and a mouth path built with the `arc` generator on a 960×500 SVG canvas. The visualization also includes a background color style and serves as a minimal illustration of importing both D3 and local ES6 modules.

ZZeeshan

85% match

Loading thumbnail…

Fork of Hello VizHub

This example combines React with SVG shapes and D3.js to demonstrate a basic visualization setup. It renders a static yellow circle with a black border and two smaller circles using inline SVG markup. The React component logs a message to the console and renders a simple heading, while the D3 `select` API is imported but not actively used. The page also includes a CSS rule targeting a message element that is not present in the markup.

VVishal Kumar

85% match