Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published2🌍 Public
Bbbroker
Last edited Jan 16, 2021
Created on Jan 16, 2021
Forked from Hello VizHub

This example shows a smiling face drawn with SVG shapes, including a yellow circle for the head, two eyes, animated eyebrows, and a mouth. The code uses D3 v5 to build and manipulate the SVG elements, importing `select` and `arc` from the D3 library. The eyebrows animate by tweening their transform attribute over two separate 2-second transitions. The face is centered using a translated group, and the mouth is created with D3’s `arc` path generator. A local ES6 module provides a text message displayed via D3’s selection API.

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

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

Fork of Hello VizHub

This example demonstrates a simple animated SVG face built with D3.js v5 and the VizHub framework. The code uses `d3.select`, `d3.arc`, and SVG shape elements like `circle`, `rect`, and `path` to construct a yellow face with red eyes, eyebrows, and a mouth. The `transition().duration(2000)` chain animates the right eyebrow's vertical position over two seconds. The visualization renders entirely in SVG, using a local ES6 module for a message and loading D3 from UNPKG.

YYanxxx447
93% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple, animated emoticon drawn with SVG shapes, including a yellow circle, eyes, and eyebrows. It shows how to use D3.js version 5 to select and append SVG elements, set their attributes, and apply basic transitions. The code uses `select`, `append`, `attr`, and the `arc` generator from D3, along with the `transition().duration()` API to animate the eyebrows' vertical position. The view consists of a static face with moving eyebrows, rendered directly in the browser.

SSaurabh Gupta
92% match
Loading thumbnail…

Fork of Hello VizHub

This example visualizes a smiley face rendered as an SVG, composed of a yellow circular background and a mouth arc drawn with D3’s `arc` generator. The React app uses `d3.select` to set a message and imports local modules, including `BackgroundCircle`, demonstrating ES6 module usage. D3 v5 and React are loaded via UNPKG, with the SVG centered using a `translate` transform.

TToonysg
91% match
Loading thumbnail…

Hello VizHub

A cheerful yellow smiley face is drawn in an SVG canvas using D3 v5, with black outlined eyes and a mouth. The example demonstrates basic SVG shape creation and manipulation through D3’s `select` and `append` methods. Two rectangular eyebrows animate vertically using `transition().duration()`, moving up and then back down over two seconds each. The code also utilizes D3’s `arc` path generator to construct the mouth, showing fundamental drawing and animation capabilities on a static 900x600 canvas.

Ffahmijaafar
90% match
Loading thumbnail…

Hello VizHub

This example renders a stylized smiling face in an SVG canvas using D3 v5. The visualization animates the eyebrows in a looping vertical motion via chained `transition().duration()` calls. The face is constructed with basic shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a D3 `arc()` path for the mouth. The code reads the SVG dimensions directly from the DOM attributes to position elements around a central group.

VVijay
90% match
Loading thumbnail…

Hello VizHub

This example renders a stylized smiling face in an SVG canvas using D3 v5. The visualization animates the eyebrows in a looping vertical motion via chained `transition().duration()` calls. The face is constructed with basic shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a D3 `arc()` path for the mouth. The code reads the SVG dimensions directly from the DOM attributes to position elements around a central group.

VVijay
90% match