Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Let's make a face with D3.js!

0 stars0🌍 Public
MMichael
Last edited Jul 21, 2020
Created on Jul 21, 2020

This example draws a cheerful yellow face using D3.js v5, with two eyes, raised eyebrows, and a wide arc-based mouth composed entirely of SVG shapes. It shows how basic geometric primitives—circles, rectangles, and a path created with `d3.arc`—are positioned and transformed to form a recognizable character. The code uses `d3.select` to target the SVG element, sets up a central coordinate system via `g.attr('transform', ...)`, and relies on hardcoded numeric constants for facial feature placement. The rendering is purely SVG, with no external data source, and the face is centered based on the SVG's width and height attributes.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed