Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Lets make a face with d3.js

Public visualization

Viewing a saved revision (read-only)

2257cbfff1214e219d199664bfea6c32

Lets make a face with d3.js

0 stars0🌍 Public
MMonisha Gopinath
Last edited Sep 17, 2021
Created on Sep 17, 2021
Forked from Hello VizHub

This example shows a simple yellow face constructed entirely with SVG shapes, using D3.js to generate a circular head, two eyes, and an arc-based mouth centered on the canvas. The code imports `select` and `arc` from the d3 module, manipulates SVG attributes directly, and positions elements based on the viewport height and width. The mouth uses the `arc` generator with specified inner and outer radii and angular ranges, while circles are appended for the face and eyes. The example demonstrates basic D3 selection, attribute setting, and generator usage without any data binding.

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.