Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3_Nithish.js!

✓ Published3🌍 Public
GGroup 17
Last edited Feb 23, 2023
Created on Feb 23, 2023

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face. The face consists of SVG shapes—a green circle head, two eyes, eyebrows, and a mouth created with the `d3.arc` path generator. The code uses `d3.select` and `d3.append` to construct the elements, and `transition` with a 2000-millisecond duration to make the eyebrows move up and down repeatedly. The rendering approach relies on D3 v5’s selection and transition methods on SVG elements, with the face centered using an SVG `transform` translate.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3_Nithish.js!

A static smiley face built with SVG elements moves its rectangular eyebrows up and down as a looping animation. The code constructs the face using D3 v5 selections, appending a green circle for the head, two small circles for eyes, and an arc-generated path for the mouth. A two-stage `transition().duration(2000)` chain animates the eyebrow group's vertical position, translating it upward and then back to its original offset. The example demonstrates fundamental D3 DOM manipulation and chained transitions without external data.

GGroup 17
93% 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 creates the face using SVG primitives—a yellow circle, two eyes, and rectangular eyebrows—all grouped and positioned through chained `.attr()` calls and transform translations. The animation is achieved by chaining two `.transition().duration(2000)` methods on the eyebrow group, which alternately shifts its vertical offset. Using D3 v5 and the `select`, `arc`, and `transition` APIs, the example shows how to construct and animate simple shapes directly in an SVG canvas.

NNathan Neelis
93% 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
93% 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
93% 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
93% 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, with animated eyebrows that move upward and downward. The face is drawn entirely through D3 selections and attribute assignments, using `d3.select` to target the SVG element and chain methods like `.append` and `.attr` to build the circles and lines. The eyebrows animate via a recurring `setInterval` that toggles their vertical position, showcasing how D3 can update existing elements. Rendering is purely SVG-based, with styling handled by an external stylesheet that hides overflow for a clean presentation.

Ssathesujit
93% match
Loading thumbnail…

Fork of Let's make a face with D3_Nithish.js!

A green SVG smiley face is drawn using D3.js v5, with a circular head, two eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows continuously move up and down via chained `transition()` calls with a 2000-millisecond duration. The face is centered using an SVG `<g>` element transformed by the width and height of the `<svg>` container. The code uses D3's `select` and `arc` functions to construct the shapes and animate them.

GGroup 17
93% match
Loading thumbnail…

Fork of Let's make a face with D3_Nithish.js!

A green SVG smiley face is drawn using D3.js v5, with a circular head, two eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows continuously move up and down via chained `transition()` calls with a 2000-millisecond duration. The face is centered using an SVG `<g>` element transformed by the width and height of the `<svg>` container. The code uses D3's `select` and `arc` functions to construct the shapes and animate them.

GGroup 17
93% match