Skip to main content
SimilarExport ZIP
100%

D3 Face

✓ Published1🌍 Public
NNicolas MacFlanigan
Last edited Nov 15, 2020
Created on Nov 15, 2020
Forked from HTML Starter

This example shows a stylized, animated face built as an SVG graphic. A yellow circle forms the head, with black circles for eyes, rectangular eyebrows, a nose, and an arc-based mouth. The right eyebrow repeatedly moves up and down using chained `transition.attr` calls. The visualization is constructed with D3 v6 selection methods and the `arc` generator, drawing all shapes in a coordinate system centered via an SVG group transform.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Face

This example uses D3 v5 to draw a stylized yellow face, including a circular head, two eyes, and eyebrows, within an SVG. The eyebrows are animated using a chained `transition` to move down and back up. The mouth is created using D3's `arc` generator, and all elements are positioned relative to the SVG's center using a `g` element and transformations. The code applies shapes like `circle` and `rect`.

Kkkwyoung
95% match
Loading thumbnail…

D3 Face

This example uses D3 v5 to draw a stylized yellow face, including a circular head, two eyes, and eyebrows, within an SVG. The eyebrows are animated using a chained `transition` to move down and back up. The mouth is created using D3's `arc` generator, and all elements are positioned relative to the SVG's center using a `g` element and transformations. The code applies shapes like `circle` and `rect`.

Kkkwyoung
95% match
Loading thumbnail…

D3 Face

A cartoon face rendered in SVG uses D3 v5 to build a yellow circle head with black eyes and an arc-based mouth. Eyebrows, drawn as rectangles, animate vertically through chained `transition` calls on a group element. The code leverages D3’s `select` and `arc` APIs, with static attributes for positioning and a repeated eyebrow movement lasting two seconds per phase, demonstrating basic SVG construction and timed animation.

Ttenghaoman
94% match
Loading thumbnail…

D3 Face

A yellow circle with black outlines forms a face, featuring two eyes, rectangular eyebrows, and a half-circle mouth. The eyebrows animate by moving upward over two seconds and then returning to their original position. The visualization is built with D3 v7, using SVG shapes within a root group, and the mouth is drawn with the `d3.arc` path generator. The animation relies on chained `transition().duration()` calls, offering a simple, playful demonstration of D3's selection and transition methods.

Hhenryspradlin
94% match
Loading thumbnail…

D3 face

A yellow circle with black outlines forms a face, featuring two eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows continuously bounce up and down through repeated `transition().duration()` calls, creating a simple animation. Built with D3 v7, the visualization uses `select`, `append`, and the `arc` generator to construct SVG elements, with all facial features positioned relative to the center of an SVG canvas.

Wwieswies
94% match
Loading thumbnail…

D3 Face

A yellow circle with black strokes forms a face, featuring two eyes and eyebrows that animate in a blinking motion, while a mouth is drawn as an arc. The eyes scale vertically to simulate blinking, and the eyebrows shift upward twice before returning. Built with D3 v3, the visualization uses SVG elements and transitions, leveraging `select`, `arc`, and chained `transition` calls to orchestrate the timed animations.

JJonah Meijers
93% match
Loading thumbnail…

D3-Face

This example creates a simple, animated face using the D3.js library (version 7) with SVG rendering. It draws a yellow circular head, two red eyes, and a mouth using an arc shape, all positioned with transform translations. The code uses D3's `select`, `append`, and `attr` to build the SVG elements, and a chained `transition().duration(2000)` to animate the eyebrows moving up and down. The visual is generated entirely from geometric primitives, with no external data source, and runs in a loop based on the declared transitions.

MMahaveer Jain
93% match
Loading thumbnail…

D3 Face

A stylized face is drawn using SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path for a mouth. The face is centered and built with D3’s `select` and `append` methods. Eyebrows animate via chained `transition().duration(2000)` calls, shifting their position twice. The mouth is created with `d3.arc()` using specified inner and outer radii and angles, demonstrating a simple, declarative approach to constructing and animating geometric compositions in a React context.

Ssheafallick
93% match