Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
AAravind Subramaniam
Last edited Jan 19, 2020
Created on Jan 17, 2020

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow cartoon face from basic SVG shapes, including circles for eyes and a mouth, rectangles for eyebrows, and an arc for the smile. The face is centered within a red background, and the eyebrows animate upward and then back down using chained `transition.duration` calls. The code uses D3 v5’s `select`, `arc`, and transition methods to construct and animate the SVG.

AAbhijit Roy
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a cartoon face from basic SVG shapes, including a yellow circle for the head, black circles for eyes, and an arc-based path for the mouth. The animation shows the eyebrows moving up and down repeatedly through chained `transition()` calls, each lasting 2000 milliseconds. The code uses D3's `select` and `arc` APIs, with coordinates centered via an SVG group transformation. The face is built programmatically in JavaScript, positioning shapes relative to the center of a 960 by 500 viewport.

Mmuxiaofan
96% match
Loading thumbnail…

Let's Make a Face with D3.js!

This example demonstrates how to construct a simple cartoon face using SVG primitives created with D3.js v5. A yellow circle forms the head, with two smaller circles for eyes, rectangular eyebrows, and a path generated by the `arc` function for the mouth. The code leverages D3’s selection and creation API, including `select`, `append`, and attribute setting, while a chained `transition().duration(2000)` animation repeatedly moves the eyebrows up and down. The face is centered within an SVG canvas, with styling provided by an external CSS file.

Iimmanentdomain
96% match
Loading thumbnail…

Let's make a face with D3.js!

Using D3.js v5, this example builds a simple cartoon face from SVG shapes: a yellow circle head, two dark eyes, rectangular eyebrows, and an arc-based smile. The code employs D3 selections to append elements and `d3.arc` to generate the mouth path. Animated eyebrows move via chained `transition().duration()` calls, shifting vertically and returning, creating a blinking-like effect. The rendering uses SVG with a centered group transform, and all visual components are defined programmatically with fixed numeric constants for spacing and size.

Nnkohdatavis
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a cartoon face from SVG primitives. A large yellow circle forms the head, with two black circles for eyes placed at fixed offsets and a yellow arc path generated via the `arc()` function for the mouth. Rectangular eyebrows are animated with chained `.transition()` calls, moving downward and back over two seconds each. The SVG canvas is set to 960 by 500 pixels with a red background, and all shapes are positioned relative to the center using D3's selection and attribute methods.

Sstelson
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows how to build a cartoon face using D3.js v5 with SVG shapes and animation. It draws a yellow circular head, two eyes, eyebrows, and a mouth using `select`, `circle`, `rect`, and `path` elements with an `arc` generator. The eyebrows animate up and down via chained `transition().duration(2000)` calls. The code uses static values for positioning and renders entirely in an SVG element, with no external data source.

Mmjoaquim12
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a cartoon face from basic SVG shapes, including a yellow circle for the head, two eyes, and a mouth drawn with the `arc` function. Eyebrows are animated using chained `transition` calls, moving them down and back over two seconds each. The code arranges all parts within an SVG, using React for scaffolding and numeric attributes for positioning.

DDavid Trye
95% match