A face with d3.js!

100%

A face with d3.js!

✓ Published1🌍 Public

Last edited May 5, 2020

Created on May 5, 2020

Forked from Minauce

This example draws a cartoon face using D3 v5. A yellow circle forms the head, with white eye circles and blue pupils that animate vertically using chained `transition()` calls. The pupils repeatedly shift up and down over three seconds. A mouth is rendered as an arc path using D3’s `arc()` generator. The SVG is centered and positioned using translation transforms, with all shapes created via `select` and `append` on an SVG canvas.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

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

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

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

92% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with a smiling mouth and two eyes forms a cartoon face, rendered as an animated SVG. The code builds the face using D3.js v5 selections, `arc` for the mouth path, and chained `transition().duration()` calls to animate the eyebrows moving in a sequence of positions. The face is centered within a 960×500 SVG canvas, with circles, rectangles, and a path grouped together.

Ccathykan

92% 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, centered within a 960x500 canvas. A yellow circle forms the head, with eyes, eyebrows, and a mouth built from circles, rectangles, and a path generated via `d3.arc`. The animation shows the eyebrows moving down and up using chained `transition` calls with a 600ms duration, creating a subtle expressive blink. The code leverages `d3.select`, `append`, and attribute methods to assemble the scene, targeting React as the framework while rendering directly to SVG.

BBat-Erdene

92% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face out of SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and back down over two seconds via chained `transition()` calls. All elements are centered using an SVG `<g>` group with a translation transform, and the code imports `select` and `arc` from D3 to manipulate the DOM and generate the mouth path. The face is static except for the looping eyebrow movement.

IIan Perry

92% match