Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
VVarun Nangia
Last edited May 27, 2020
Created on May 27, 2020

A smiling face built with D3.js demonstrates basic SVG manipulation and animation. The code uses `d3.select` and `d3.append` to construct circles for the eyes, rectangles for the eyebrows, and a path created with `d3.arc` for the mouth. A chained `transition().duration(2000)` moves the eyebrow group up and down repeatedly. The example renders entirely in SVG, centered within a 960×500 viewport, with static yellow fill and black stroke styling. No external data is loaded; the face is generated purely from hard-coded dimensions and offsets.

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 built with D3.js demonstrates fundamental DOM manipulation and animation. The code uses `d3.select` to append SVG circle and rectangle elements for the face, eyes, and eyebrows, while a D3 arc path creates the mouth. Eyebrow movement is shown through chained `transition` calls that animate the group's transform attribute over two-second durations. The yellow face with black outlines highlights basic SVG rendering and D3's data-driven approach to styling and positioning.

Ccyanea1
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with D3.js demonstrates fundamental DOM manipulation through SVG shapes. The code appends a yellow circle for the head, two dark circles for eyes, and a semi-circular mouth created with the `arc` generator. Eyebrows are rectangles that animate vertically using chained `transition` calls with a 2000-millisecond duration, moving up and down repeatedly. The example relies on D3 v5’s selection methods like `append` and `attr`, with all elements centered via a translated group.

Lliunaiming
95% match
Loading thumbnail…

Let's make a face with D3.js!

A face is drawn as a smiley with yellow fill, black stroke, circular eyes, and an arc-shaped mouth on an SVG canvas. The code demonstrates fundamental D3.js DOM manipulation by appending shapes to a group element, using `d3.select`, `d3.arc`, and chained `transition` calls to animate the eyebrows, which move up and down over two-second intervals. The rendering is entirely SVG with a simple animation loop.

VVipul Gaurav
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG uses D3.js to build its geometry, including a yellow circle, two eyes, a mouth via `d3.arc`, and rectangular eyebrows. A `transition` on the eyebrow group animates their vertical position over two seconds, moving them up and down repeatedly. The code employs `d3.select`, `d3.scaleLinear`, and attribute setters to construct the scene, with a fixed SVG canvas sized 960 by 500 pixels.

Ppanmenghan
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with SVG elements animates its eyebrows upward and back down in a loop. The example demonstrates fundamental D3.js DOM manipulation, using `d3.select` to append a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth constructed with the `d3.arc` helper. Two sequential `transition` calls with a 2000-millisecond duration move the eyebrow group via its `transform` attribute, showing basic chained animation without data binding. The face is centered on an empty 960×500 SVG canvas, with styling handled by an external stylesheet.

Ggarrettriha
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG shapes animates as its rectangular eyebrows rise and fall in a looping two-second cycle. The example demonstrates core D3.js v5 DOM manipulation, using d3-selection methods like `select`, `append`, and `attr` to construct the face, and `transition` with a duration to move the eyebrow group. Rendered at 960 by 500 pixels, the face centers itself and draws a yellow circle, eyes, and an arc-based mouth using d3-shape's `arc`.

Ssunilkrishnav
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG demonstrates basic D3.js DOM manipulation and animation. Drawn with a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, the face animates by moving the eyebrows upward and back down using chained `transition().duration()` calls. The example uses D3 v5’s `select`, `arc`, and `attr` methods to construct and style elements, with the eyebrow displacement triggered automatically on load.

RRoyCsuka
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates its eyebrows up and down in a looping transition. The example constructs the face from basic geometric elements—a yellow circle for the head, two small circles for eyes, rectangles for brows, and an arc path for the mouth—centered via a translated group. Using D3 v5, the code applies chained `transition()` and `.attr()` calls to move the eyebrow group repeatedly, while the `d3.arc()` helper generates the mouth’s curved outline. The rendering relies on SVG appended directly to the page’s `<svg>` element.

Mmaber77
95% match