Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published10🌍 Public
MMukund Khandelwal
Last edited Sep 11, 2018
Created on Sep 11, 2018

This example demonstrates a smiley face built with D3.js, where its eyebrows move to create an animated expression. The visualization uses an SVG canvas of 960 by 500 pixels, populated through D3’s `select` and `arc` functions to draw the face’s components. HTML and CSS structure the page, while the core logic resides in `index.js`, which imports from D3 v5 and manipulates the SVG attributes directly. The animation is achieved through DOM manipulation, with the eyebrows’ positions updated dynamically, as visible in the included video walkthrough.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiley face is drawn with D3.js, composed of SVG shapes for the head, eyes, eyebrows, and mouth, with an animated eyebrow movement that raises and lowers them. The example uses D3 v5 selections to append and style elements, and `transition()` with a duration to create the eyebrow motion over time. An arc generator from D3's shape module renders the mouth path.

MMukund Khandelwal
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built entirely with D3.js that animates its eyebrows up and down. It demonstrates fundamental DOM manipulation by constructing SVG shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—all centered within an SVG canvas. The animation uses D3’s `transition()` method to move the eyebrow group between two vertical positions over two-second intervals. The code relies on D3 v5’s `select`, `arc`, and `transition` APIs to create the static face and its looping eyebrow motion.

BBraja Gopal Das
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build a smiley face whose eyebrows animate. The code selects an SVG element, sizes it to the full browser window, and appends a rounded rectangle as the background. It demonstrates fundamental DOM manipulation by chaining D3 methods like `select` and `append` to create the face’s parts, with the eyebrow movement driven by simple data-driven updates in the same SVG structure. The project relies on D3 v5 and renders entirely as SVG.

Ggcappadaniel
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build an interactive smiley face using D3.js, with eyebrows that animate based on user interaction. The visualization uses SVG elements created and manipulated through D3’s core DOM selection and data-binding methods. The code relies on D3 v5, loaded via a CDN, and includes a video tutorial explaining the process. Rendering occurs entirely in SVG, with styles defined in a separate CSS file. No external data source is used; the face is constructed programmatically.

Aaudreyfr
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example creates a smiley face whose eyebrows move, demonstrating fundamental DOM manipulation with D3.js. The face is drawn as SVG elements within a 960-by-500 canvas, and the animation cycles the eyebrows' positions through a looping interaction. The code uses D3’s selection and transformation methods to update the eyebrow elements’ attributes dynamically, relying on the `d3` library (v5.9.2) loaded from a CDN, with the page styling defined in a separate CSS file. The visual output is rendered entirely in vector graphics, and the movement is driven by JavaScript logic in the bundled script.

Zztawil
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can animate a smiley face by manipulating SVG shapes, specifically moving its eyebrows up and down over a four-second loop. The code builds the face using `d3.select` to append SVG elements like circles, rectangles, and a path for the mouth, with an arc generator defining the mouth’s curve. The eyebrows use chained `transition().duration(2000)` calls to shift their vertical position, creating the facial animation. The entire face is centered within an SVG canvas using a `<g>` element, with hardcoded layout constants for eye spacing and dimensions.

Vveagy
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example constructs a smiley face out of SVG shapes and animates its eyebrows. Using D3.js v5, the code selects the SVG canvas, appends groups and primitive shapes like circles, rectangles, and an arc-based mouth, and positions them with transform attributes. The eyebrows are rectangles that use chained `transition` calls to move up and down over 2-second intervals. This demonstrates fundamental DOM manipulation and basic animation, where the underlying data is the hardcoded positional values and dimensions for each facial feature.

KKoustubhK2618
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built with D3.js, featuring expressive eyebrows that animate up and down over a two-second cycle. The face is constructed by manipulating SVG elements, including circles for the eyes and a path for the mouth, all grouped and positioned via translation transforms. The animation is driven by a chained sequence of `transition().duration()` calls, which move the eyebrows group along the y-axis. The code imports `select` and `arc` from D3, using the latter to generate the mouth’s arc path geometry.

Jjesramyep1263
94% match