Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Vvunturi
Last edited Sep 24, 2019
Created on Sep 24, 2019

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from basic SVG shapes, including a red circle head, eyes, and a mouth. The visualization showcases animated eyebrows that move up and down using D3 transitions, with the `select` and `append` APIs building the SVG hierarchy. The code uses `d3.select` to target the SVG element, `attr` to set properties like coordinates and dimensions, and `arc` to generate the mouth path. The animation runs through chained `transition()` calls with specified durations, highlighting D3's ability to animate SVG attributes over time.

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

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation and animation with D3.js by building a smiley face from SVG shapes. A red circle forms the head, with appended circles for eyes and rectangles for eyebrows, while a mouth is drawn using the `arc` generator. The code uses `selection.append` and `transition.attr` to move the eyebrow group up and down over two seconds. All elements are positioned relative to a centered `g` container, using D3 v5’s modular `select` and `arc` imports, with the SVG defined statically in HTML.

Jjons288
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a circle head, rectangular eyes, and an arc-based mouth. The face’s eyebrows animate vertically in a looping transition, moving up and then returning to their original position over four seconds. The code uses D3 v5 selections and the `arc` helper to generate the mouth path, while `transition().duration()` drives the eyebrow movement. The entire figure is centered within a 960×500 SVG canvas, with styling applied via an external stylesheet.

Vveagy
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face in an SVG. The code uses `d3.select` to append circles for the eyes, rectangles for the eyebrows, and an `arc()` generator for the mouth. A chained `transition()` with a 2000-millisecond duration moves the eyebrows up and down repeatedly, showcasing simple animation. The face is centered with a `g` element, and all shapes are drawn using D3’s SVG helper methods.

JJun Yi | Dylan
96% 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 from SVG primitives, including circles, rectangles, and an arc-based mouth. The face’s eyebrows animate upward and downward using chained `transition().duration()` calls on a group element’s `attr('transform')`. Code imports `select` and `arc` from the D3 v5 module, explicitly setting the SVG’s background color to red. All elements are positioned relative to a centered group, illustrating coordinate transforms and append/attr operations without external data.

AAlan Thompson
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to construct a smiley face from basic SVG shapes, including circles for the eyes, rectangles for the eyebrows, and arc-generated paths for the mouth and nose. The code demonstrates fundamental DOM manipulation by selecting an SVG element and appending grouped elements with explicit coordinate transforms. Animated behavior is implemented through chained `transition` calls, moving the eyebrow group upward and back down over two one-second intervals. The visualization relies on D3’s `select`, `arc`, and transition APIs to show how static shape creation and simple attribute animation work together.

MMEHMETHAN YAGCI
96% 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 up and down. The code uses `d3.select` to target an SVG element, `svg.append` to construct geometric shapes like rectangles and arcs, and `transition().duration()` to create a looping eyebrow movement over two seconds. The face is rendered as a static SVG with a semi-transparent green rectangle, red-stroked eyes, and a mouth drawn via the `d3.arc` shape generator, all centered using SVG group transforms.

NNikkor
96% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face is drawn with SVG shapes, including pink circles for the head and eyes, rectangles for eyebrows, and an arc for the mouth. The eyebrows animate by moving downward and upward repeatedly using chained `transition()` calls with `duration(1000)`. The example demonstrates basic DOM manipulation with `d3.select`, shape generation via `d3.arc`, and attribute setting on SVG elements.

Ggrandbleu916
95% match