Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
MMd Hugo Lidero
Last edited Aug 1, 2020
Created on Aug 1, 2020

A yellow smiley face is drawn using SVG circles and a path, with D3's `arc` generator creating the mouth. The face's eyebrows, rectangular SVG elements, animate upward and back down over two seconds using chained `transition` calls with `attr` updates. The example demonstrates fundamental D3.js v5 DOM manipulation, including `select`, `append`, and `attr`, to build and transform SVG elements within a fixed 960×500 viewport.

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 yellow smiley face rendered in SVG demonstrates fundamental D3.js DOM manipulation. The face uses D3 v5's `select` and `arc` to append a circle, eyes, and a mouth, with the mouth created via the `arc()` generator. Eyebrows, drawn as rectangles, animate upward and downward through chained `transition().duration()` calls, while the mouth also shifts position over two seconds. All elements are positioned within a centered `<g>` group, showing basic SVG construction and data-driven updates.

AAniket
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js using SVG circles and a path for the mouth, generated with the `arc` helper. The face's eyebrows, rendered as rectangles, animate upward and back down via chained `transition` calls with a 2000-millisecond duration. The code demonstrates fundamental DOM manipulation through D3 selections, appending elements to an SVG group, and using attribute setters with numeric values derived from the viewport dimensions.

DDuyun Tan
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered with SVG demonstrates D3.js DOM manipulation. The code uses `d3.select` to build circles for eyes and a face, a `d3.arc` path for the mouth, and `transition().attr()` to animate rectangular eyebrows moving up and down over two seconds. The example highlights chained transitions and attribute updates on a fixed SVG canvas.

Wwindwardpassage
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG circles, rectangles, and a path, centered on a 960-by-500 canvas. The face’s eyebrows animate upward and back down using chained `transition` calls with 2-second durations. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending grouped elements, and using the `arc` generator to shape the mouth. D3 v5 is loaded via a CDN, with `select` and `arc` imported from the library.

Mmoonstorm86
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas, with two eyes, eyebrows, and a mouth created from circles, rectangles, and an arc path. The eyebrows animate upward and back down over repeated two-second transitions, demonstrating D3's `transition` and `attr` methods for DOM manipulation and animation. The example uses D3 v5's `select`, `arc`, and chained transitions to build and move SVG elements dynamically.

Sstestedletbd
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, using circles for the eyes and an arc-generated path for the mouth. The eyebrows are rectangles that animate upward and back down via chained `transition().duration()` calls. The example demonstrates fundamental DOM manipulation with `d3.select`, `d3.arc`, and SVG attribute binding, with all geometry positioned relative to the viewport center.

Ppxdu
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG demonstrates fundamental D3.js DOM manipulation and transitions. The code selects the SVG element, appends groups, and builds the face from circles, rectangles, and an arc-generated mouth using `d3.arc`. Two eyebrow rectangles animate upward and back via chained `transition().duration(2000)` calls, shifting their parent group's transform attribute. The example uses D3 v5 and relies on `select` and `arc` from the d3 module.

JJepyagg
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face, rendered with SVG shapes, demonstrates fundamental DOM manipulation and animated transitions in D3.js. The example builds the face using appended `circle`, `rect`, and `path` elements, with the mouth generated via the `d3.arc` generator. Both eyebrows, created as rectangles, move up and down through chained `transition()` calls on their containing group, each lasting two seconds and alternating between two vertical offsets. The code uses D3 v5 selection methods and `attr` to position elements, with no external data source, purely illustrating programmatic shape creation and animation.

JJordan Chiu
96% match