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)

63f5115833cd45d381fb1180290da486

Let's make a face with D3.js

0 stars0🌍 Public
Jjeffko18
Last edited Oct 19, 2019
Created on Oct 19, 2019

This example constructs a cartoon face out of basic SVG shapes, including a yellow circle for the head, two eyes, eyebrows, and an arc-based mouth. It demonstrates how to build and position SVG elements using D3.js v5, selecting the `<svg>` element and appending groups and shapes with transformation attributes. The code uses the `arc` generator from D3 to create the mouth path, while circles and rectangles are placed manually via coordinate offsets. The dataset is a static, hardcoded set of shape definitions rather than external data, emphasizing SVG drawing techniques over data binding.

AI-generated description

An example including some commonly used features of SVG.