Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
MMarco-test
Last edited Mar 30, 2020
Created on Mar 29, 2020
Forked from HTML Starter

A smiling face drawn with SVG paths animates its smile into view. The example builds the face using D3.js v5, constructing a circle for the head and a path for the mouth. Using the `getTotalLength()` method, the code sets a stroke-dasharray and transitions the dashoffset from the full path length to zero, creating a drawing effect over 200 milliseconds. The SVG elements are styled with CSS and rendered within a React-based example.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

This example builds a smiling face out of basic SVG shapes using D3.js. The code creates circles for the face and eyes, rectangles for eyebrows, and an arc-generated path for the mouth, all positioned within a centered group. It uses D3’s `select`, `attr`, `append`, and `transition` with `duration` to animate the eyebrows moving up and down. The rendering relies on an SVG element defined in HTML, and the fixed dimensions (960 by 500) are read via `parseFloat(svg.attr(...))`. The face is composed entirely from hardcoded values, with no external data.

Rrandy554
92% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates through D3.js v5, using circles for the eyes and face, rectangles for eyebrows, and a path with the d3.arc generator for the mouth. The code demonstrates SVG element construction, attribute binding, and a chained transition that moves the eyebrows up and down over two seconds. A decorative bindhi path and sparkle circle add detail, with all elements grouped and translated relative to the SVG canvas center.

EEllen Cubbin
92% match
Loading thumbnail…

Let's make a face with D3.js

A smiling face rendered in SVG is drawn with D3.js, using geometric shapes for the head, eyes, eyebrows, and a mouth created with the `d3.arc` path generator. The example demonstrates a looping animation where the eyebrows repeatedly move downward and back upward via chained `transition.attrTween` calls, while the static face elements remain fixed. The code relies on D3 selections and attribute manipulation, with the SVG canvas set to 960 by 500 pixels and centered via a transformed group.

Ffedericojv
91% match
Loading thumbnail…

Let's make a face with D3.js

A smiling face built from SVG shapes animates in D3.js v5. A yellow circle forms the head, with eyes, animated eyebrows that move up and down via chained `transition` calls, and a mouth drawn as an arc path using `d3.arc()`. The code positions elements within a group translated to the canvas center, using fixed pixel dimensions for features.

Ppkcesar
91% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG, drawn with D3.js v5 shapes including circles for the face and eyes, rectangles for the eyebrows, and a path for the mouth. The code uses `select` and `append` to build the DOM, while `transition` animates the eyebrows upward and back downward over two-second intervals. The example demonstrates fundamental D3.js DOM manipulation and animation, with the face centered via an SVG `g` transform.

EEtupino
91% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation and animation. The code builds the face from primitive shapes—a yellow circle for the head, black circles for the eyes, a path for the mouth—and positions them via group transforms. Two animated eyebrows, implemented as rectangles, shift vertically using chained `transition() .duration(2000)` calls. The example reads SVG dimensions with `parseFloat`, uses helper methods like `select`, `append`, and `attr`, and draws the mouth with the `arc()` shape generator from D3's shape module.

Sssd4
91% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn on a yellow circular head using SVG elements. The face’s eyebrows and mouth animate, moving up and down and scaling to create an expressive motion. The example uses d3.select to build the SVG structure and d3.arc to construct the mouth path. Eyebrow and mouth animations are driven by chained d3.transition calls with specified durations. The code uses a React setup and a bare HTML page, with all D3 functions applied directly to the SVG.

JJoachimSchaeffer
91% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with SVG shapes, with its eyebrows animating up and down in a repeating loop. The example demonstrates fundamental DOM manipulation in D3.js v5, using `select` and `append` to build circles, rectangles, and a path. The mouth is created with the `d3.arc` API, and the eyebrow motion relies on chained `transition().duration()` calls to alternate the transform attribute, creating a simple, continuous facial animation.

PParminder Singh
91% match