Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Viewing a saved revision (read-only)

7873187cbaeb4cda9b68d3c7f2cb08b8

Let's make a face with D3.js!

0 stars2🌍 Public
GGarrisonC
Last edited Apr 26, 2020
Created on Apr 26, 2020

This example builds a smiling face from basic SVG shapes using D3.js v5. It shows a yellow circle as the head, two black circles for eyes, and a mouth created as a path. The code uses D3’s `select` to target the SVG element and the `arc` generator to define the mouth’s curved shape. Eye positions are set with explicit spacing offsets, while the mouth is transformed into place with a group translation. Rendering is entirely SVG-based, with styling applied via an external CSS file.

AI-generated description

An example including some commonly used features of SVG.