Skip to main content
SimilarExport ZIP
100%

Lets make a face with D3

✓ Published2🌍 Public
RRohit K Bharadwaj
Last edited Sep 21, 2019
Created on Sep 20, 2019
Forked from Hello VizHub

This example draws a cartoon face on an SVG canvas using D3 selections and shape generators. It shows a yellow circle head, two eyes, animated eyebrows that move up and down via chained `transition.attr` calls, and a mouth created with the `d3.arc` generator. Fixed pixel coordinates for eye spacing, eyebrow dimensions, and arc radii position each facial feature relative to the SVG’s center.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a face with D3.js

This example draws a simple cartoon face with a yellow circular head, two eyes, animated eyebrows, and a curved mouth. The face is centered in an SVG canvas, and the eyebrows move up and down repeatedly using chained `transition` calls. The code uses D3 v5 selections to build the shapes, including `arc()` for the mouth path, and relies on SVG primitives like `circle` and `rect` for rendering.

Jjblaskovich
96% match
Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js to draw a simple cartoon face with SVG shapes. A yellow circle forms the head, with two smaller circles for eyes and rectangles for eyebrows, all positioned relative to the center of the SVG canvas. A mouth is created using the `d3.arc` helper to generate a curved path. The eyebrows animate with `transition.duration`, moving down and back up over two seconds, demonstrating basic SVG rendering and animation capabilities in D3 v5.

TTikiWayne
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face as a yellow circle with eyes, eyebrows, and a mouth, all rendered in SVG. The eyes and eyebrows are positioned using D3 selections and attributes, while the mouth is drawn with the `d3.arc` shape generator. The eyebrows animate upward and back down over two 2-second transitions, demonstrating `transition.attr`. The face is centered via a translation and styled with CSS on the `body`.

Ffra-alaimo
94% match
Loading thumbnail…

Lets make a face with D3.js

This example draws a cartoon face using SVG shapes composed with D3 v5. A yellow circle forms the head, while two smaller circles create the eyes and rectangles serve as eyebrows, all positioned relative to a centered group. The mouth is a path generated with the `d3.arc` helper, using specific inner and outer radii and angle values. The code relies on D3’s `select` and `attr` methods to build and style the static SVG elements, with no data binding.

VVarun Khanna
94% match
Loading thumbnail…

Lets make a face with D3.js

This example draws a cartoon face using SVG shapes composed with D3 v5. A yellow circle forms the head, while two smaller circles create the eyes and rectangles serve as eyebrows, all positioned relative to a centered group. The mouth is a path generated with the `d3.arc` helper, using specific inner and outer radii and angle values. The code relies on D3’s `select` and `attr` methods to build and style the static SVG elements, with no data binding.

VVarun Khanna
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a cartoon face from SVG primitives. A yellow circle forms the head, with positioned circles for eyes and arcs for a mouth, all centered via a group transform. The code constructs these shapes using `select`, `arc`, and attribute setters, while a `transition().duration()` sequence animates the eyebrows upward and back down over several seconds, creating a simple facial expression.

AAravind Subramaniam
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a simple cartoon face as an SVG, comprising a yellow circle head, two eyes, rectangular eyebrows, and an arc-based mouth. The face is centered within a 960×500 viewport using an SVG group transform. The eyebrows animate upward and back down over two seconds each way using chained `transition().duration()` calls. The mouth is generated with D3’s `arc()` geometry, while static shapes are created via `select`, `append`, and attribute setters.

DD2552
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a cartoon face in an SVG canvas using D3.js v5. A yellow circle forms the head, with blue circles for eyes and a black-outlined path for a mouth, created via D3’s `arc` helper. The left eye animates downward over two seconds using the `.transition().duration(2000)` API. The face is centered by translating a group element, and the SVG dimensions are read dynamically from the markup.

Jjmeroth
94% match