Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Apr 26, 2020

Created on Apr 26, 2020

Forked from 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.

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 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!

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

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 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!

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 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

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: a yellow circle for the head, black circles for eyes, and a mouth drawn with the `d3.arc` path generator. The eyebrows are rectangles that animate their vertical position using chained `transition` calls with `attr` tweens, giving the face a blinking or winking effect over time. The code selects the SVG element and appends shapes with explicit `attr` settings for coordinates, sizes, and fill colors, while the `<script>` tag loads D3 from a CDN. The rendering approach is purely declarative SVG construction with animated transitions.

Ookleinlux

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