My face with D3

100%

My face with D3

✓ Published0🌍 Public

Last edited Oct 30, 2020

Created on Oct 26, 2020

A smiling cartoon face built entirely from D3 v5 SVG shapes. The example uses d3-selection to append and position circles, rectangles, and arc-generated paths for the head, eyes, nose, mouth, ears, hair, and neck, with a yellow face, red mouth interior, and orange ears. The d3-arc API draws the curved eyebrows, mouth, ears, and hair with explicit inner and outer radii and angular ranges. Static, hard-coded coordinates and radii define the layout, with commented-out eyebrow rectangles showing an alternative design.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3

A smiling face is drawn entirely with SVG shapes, rendered as a yellow circle with a black stroke, two eyes, and an arc-based mouth. The code uses D3 v5 selections to append elements to an SVG canvas, importing `select` and `arc` from the D3 module. The `arc` generator creates the mouth with specified inner and outer radii and start/end angles. All shapes are centered using a group translation, with eye positions calculated from fixed offsets.

Hhairibung

90% match

Loading thumbnail…

Lets make a face with D3

A cheerful cartoon face rendered in SVG uses D3 v5 selections to build a yellow circle head, two eyes, and an arc-shaped mouth. The eyebrows animate upward and back down via chained `transition().duration()` calls, creating a surprised expression. Code imports `select` and `arc` from the D3 module, positioning elements with a centered `g` group and SVG attributes. The example demonstrates basic D3 data-joining-free shape construction and timed transitions.

Mmandelmech

89% match

Loading thumbnail…

Lets make a face with D3

This example demonstrates how to build a simple cartoon face using D3 version 6’s selection and shape APIs. The SVG output shows a yellow circle for the head, two eyes, eyebrows as rectangles, and a mouth drawn with the `d3.arc` shape generator. The code uses `select` and `attr` to position elements relative to the SVG center, while the arc’s inner and outer radii define the smile. No external data is loaded; all shapes are hardcoded in JavaScript.

IiXilef

89% match

Loading thumbnail…

D3 Face

This example draws a cartoon face from SVG shapes. A yellow circle forms the head, two black circles serve as eyes, and a mouth is rendered as a dark arc using the `d3.arc()` helper. The coordinate positions and radii for the face, eyes, and mouth are calculated from the SVG’s width and height attributes. The code imports `select` and `arc` from D3 v7 and appends all elements to an SVG with an orange background.

YYoung Song

89% match

Loading thumbnail…

Let's make a face with D3 new

This example displays a cheerful cartoon face constructed from SVG primitives: a yellow circle for the head, two smaller circles for eyes, a rectangle for an eyebrow, and an arc-based path for the mouth. Built with D3 v5, the code uses `select` to target the SVG element and `attr` to position shapes, while the `arc` generator computes the mouth’s path geometry. The face is centered via a translated group, and all elements are drawn directly to the SVG canvas with fixed dimensions.

Mmirna981

89% match

Loading thumbnail…

Lets make a face with D3.js!

A cheerful cartoon face is rendered as SVG using D3.js, composed of layered geometric shapes: a yellow circle head with black-outlined stroke, eyes, irises, cheeks, a nose line, and two mouth arcs built with d3.arc. The code uses d3.select to manipulate the SVG canvas and attributes like `attr` for positioning and styling. All facial features are positioned relative to the viewport dimensions (960x500). The mouth paths are generated via the `arc` function with specified inner and outer radii and angular ranges, demonstrating D3's utility for constructing complex shapes from simple primitives.

Ssslee8778960

89% match

Loading thumbnail…

Making a face with D3.js

A cheerful cartoon face drawn in SVG appears centered on a yellow circle, with two eyes, eyebrows, and a smile created from an arc path. D3.js v6 constructs the shapes using selections and the `arc` generator, while a chained `transition` on the eyebrow group animates it bouncing upward and back down. The face is built from SVG primitives—circles, rectangles, and a path—positioned relative to the viewport’s center, demonstrating common D3 data-joining and transformation techniques without external data.

Aalhdezg

89% match

Loading thumbnail…

Let's make a face with D3

This example shows a simple cartoon face constructed entirely from SVG shapes. D3 v5’s `select` and `arc` functions create a blue circular head, two eyes, a small rectangular brow, and a curved mouth path centered within a 960×500 viewport. The face parts are positioned using explicit coordinate offsets and transformations rather than data binding, with the mouth’s arc defined by inner/outer radii and angular start/end values.

GGary Smith

89% match