Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published5🌍 Public
YYanxxx447
Last edited Jan 8, 2021
Created on Jan 7, 2021
Forked from 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.

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 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.

Bbbroker
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
92% 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 Let's make a face with D3.js

This example builds a cheerful cartoon face from SVG shapes—a yellow circle for the head, eyes, eyebrows, and a mouth drawn with `d3.arc()`. The eyebrows animate upward and back down via chained `transition().duration(2000)` calls. The code imports `select` and `arc` from the D3 v7 module, loads the library from UNPKG, and uses local ES6 modules to demonstrate VizHub's project structure.

AAmol Tangade
89% 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
89% 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
89% 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
89% match