Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
AAdam Majkowski
Last edited Apr 3, 2020
Created on Mar 31, 2020

This example demonstrates fundamental D3.js DOM manipulation by creating an interactive smiley face with moving eyebrows. The face is rendered as SVG elements, and the eyebrows animate using D3’s `transition` and `attrTween` methods. The code leverages `d3.select` and `.append` to build the shape, while a YouTube video embedded in the README explains the process. The visualization uses `d3.v5` and is styled with external CSS, showing how D3 can handle simple, non-data-driven graphics.

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 demonstrates fundamental DOM manipulation with D3.js by building an interactive smiley face whose eyebrows move in response to a data-driven simulation. It renders the face as SVG elements using `d3.select` and chained attribute setters, while the eyebrow motion relies on D3’s `transition.attrTween` to interpolate positions. The code loads D3 v5 from a CDN and integrates a JSON dataset containing vertices and edges, though the visible visualization focuses solely on the SVG face rather than the network data. The page uses a full-screen SVG canvas with a stylesheet that hides overflow.

Hhhhheeee
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an interactive smiley face whose eyebrows move in response to a data-driven simulation. It renders the face as SVG elements using `d3.select` and chained attribute setters, while the eyebrow motion relies on D3’s `transition.attrTween` to interpolate positions. The code loads D3 v5 from a CDN and integrates a JSON dataset containing vertices and edges, though the visible visualization focuses solely on the SVG face rather than the network data. The page uses a full-screen SVG canvas with a stylesheet that hides overflow.

Hhhhheeee
95% 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
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate upward and downward. It uses D3 selections and the `arc` generator to construct the face’s circular head, eyes, rectangular eyebrows, and mouth as SVG elements. The eyebrows move via chained `transition().duration()` calls, shifting their group’s transform attribute over two seconds in each direction. The code explicitly leverages `select`, `attr`, and `append` from d3.v5, with no external data source, relying entirely on hardcoded geometric values.

Llystran
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate upward and downward. It uses D3 selections and the `arc` generator to construct the face’s circular head, eyes, rectangular eyebrows, and mouth as SVG elements. The eyebrows move via chained `transition().duration()` calls, shifting their group’s transform attribute over two seconds in each direction. The code explicitly leverages `select`, `attr`, and `append` from d3.v5, with no external data source, relying entirely on hardcoded geometric values.

Llystran
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face out of SVG shapes. The code uses `d3.select` to append a circle for the head, two circles for eyes, rectangles for eyebrows, and an `d3.arc()` path for the mouth. D3 transitions animate the eyebrows upward and back over four seconds. The example uses D3 v5 and relies on simple attribute setters like `.attr()` to position each element.

Ssethips
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates basic D3.js DOM manipulation by building a smiley face with animated eyebrows. The SVG circle face, eyes, and rectangular eyebrows are appended to a centered group element, while the mouth is drawn using the `d3.arc` path generator. Eyebrow movement is achieved through chained `transition` and `.attr` calls that shift the group’s transform over two-second intervals. The code relies on D3 v5 selections and transitions, rendering entirely as animated SVG without external data sources.

FFelipe Menegossi
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built from SVG shapes, with eyebrows that animate in response to the viewer’s actions. The code demonstrates fundamental DOM manipulation with D3.js v5, using `d3.select` and `d3.append` to create the face’s elements. It relies on the `d3.arc` generator for the mouth and applies simple transitions to move the eyebrows. The page reads the client’s viewport dimensions to size the SVG canvas, and styling is handled via an external stylesheet.

DDifan Gu
94% match