Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
Jjuanandressr97
Last edited May 24, 2019
Created on May 24, 2019

This example demonstrates how to create an animated smiley face with moving eyebrows using D3.js. The visualization uses SVG rendering within an HTML page, with D3’s selection methods to build and manipulate facial elements. It relies on `d3.scaleLinear` and `d3.scaleBand` to map data from a hardcoded array of telescope observations, drawing bars and axes, then repurposes the same SVG canvas for the face. The face itself is constructed from basic shapes, with eyebrows animated through D3 transitions, showing fundamental DOM manipulation and data-binding techniques.

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!

This example creates an animated smiley face using D3.js, with eyebrows that move to demonstrate fundamental DOM manipulation. The visualization builds the face from SVG elements, including eyes, a mouth, and interactive eyebrows. The code imports specific D3 modules such as `select`, `arc`, and `scaleLinear` to construct the face and manage its components. While the primary focus is the face, the code also includes a bar chart with telescope data, mapped using `scaleBand` and `axisBottom`, though this chart is not the main visual output. The face itself is rendered entirely through SVG.

LLonwabo11
95% match
Loading thumbnail…

Let's make a face with D3.js!

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.

MMukund Khandelwal
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face with animated eyebrows demonstrates basic DOM manipulation with D3.js. The visualization renders SVG shapes—a yellow circle, eyes, rectangular eyebrows, and an arc-based mouth—centered on a 960×500 canvas. Using `d3.select` and `d3.arc`, the code constructs each facial feature programmatically. A chained `transition` with 2000-millisecond durations moves the eyebrow group upward and back, creating a blinking-like motion. The example showcases fundamental D3 v5 selections, attribute setting, and animation without external data, relying purely on geometric constants for positioning.

TThiago Ramos
94% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js tutorial demonstrates fundamental DOM manipulation by building a smiley face with animated eyebrows. The example shows an SVG face whose eyebrows move dynamically, illustrating how D3 selects and modifies elements. The code uses `d3.select`, `append`, and `attr` to construct the face from SVG circles and paths, then applies transitions to adjust eyebrow positions. It relies on D3 v5, rendering everything as SVG within a 960x500 viewport, with accompanying CSS for styling and layout. The dataset is implicit—the face geometry is hardcoded rather than loaded from external data.

Wwen787
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can manipulate SVG elements to create an animated smiley face with moving eyebrows. The code selects an `<svg>` element and uses D3’s data-binding and attribute methods to position facial features, while the eyebrow movement relies on D3 transitions. It renders entirely in-browser using D3 v5, with no external data source—the face is built from static shapes defined in `index.js`. The visual result is a playful, interactive-looking illustration of core D3 DOM manipulation techniques.

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

Let's make a face with D3.js!

This example shows a simple, animated smiley face built entirely with D3.js, where the eyebrows move up and down. It demonstrates fundamental DOM manipulation by selecting an SVG element and using D3’s data join and transition methods to update attributes over time. The code uses `d3.select` and `d3.transition` to animate the eyebrows, while the face itself is drawn with basic SVG shapes. The rendering is SVG-based within a 960×500 viewport, with styles defined in a separate CSS file. No external data source is used; the entire visual is generated programmatically.

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