Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Jun 30, 2020

Created on Jun 30, 2020

A yellow smiley face is drawn in SVG using D3 selections, with a circular head, two eyes, eyebrows, and a mouth created from an arc path. The face demonstrates D3 transitions by animating the eyebrow group upward and then back down over repeated 2-second intervals. The code uses `d3.select` and `d3.arc` from D3 v5, with SVG elements appended and styled via attributes for positioning and fill.

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 is drawn with SVG shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental D3.js DOM manipulation and selection, using `d3.select` to append elements and `d3.arc` for the mouth path. Animated eyebrows move up and down via chained `transition()` calls with `attr` tweening over two-second durations, showcasing D3’s built-in animation capabilities without external data.

Aagongwpi

97% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with two eyes, eyebrows, and a mouth created via basic shapes and an arc path. The entire face is centered with a group translation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls. The code imports `select` and `arc` from D3 v5, sets circle, rectangle, and path attributes programmatically, and relies on SVG for rendering.

Ddbidwai

97% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring circular eyes, a mouth created using the `d3.arc` shape generator, and animated rectangular eyebrows. The eyebrows transition vertically over two seconds up and then back down using D3’s `.transition().duration()`. The code demonstrates basic DOM manipulation by selecting the SVG element, appending groups and shapes, and setting attributes like radius, position, and fill. All rendering is SVG-based, with no external data source.

DD0no

97% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using SVG elements, with two eyes, eyebrows, and a mouth created via D3.js shape generators. The eyebrows animate upward and back down in a repeating loop using chained `transition` calls with a 2000-millisecond duration. Built with D3 v5, the code uses `select`, `arc`, and attribute setters like `attr` to construct the face from circles and a path.

Mmmustafau

96% match

Loading thumbnail…

Let's make a face with D3.js!

A simple yellow smiley face is drawn with SVG shapes, featuring circular eyes, rectangular eyebrows, and a mouth created using the `arc` generator. The eyebrows animate upward and back down via chained `transition` calls over two-second durations. The code builds the face with D3 v5 selections, using `select`, `attr`, and `append` to position elements relative to a centered group, with coordinates calculated from the SVG’s width and height.

Pphongbui81062

96% 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 appears in an SVG, built entirely through D3.js v5 selections and DOM manipulation. The face includes a head, two eyes, and a mouth drawn with the `d3.arc()` path generator. The eyebrows, rendered as rectangles, animate continuously via chained `transition` calls, moving up and then back over 2-second intervals. The example demonstrates fundamental SVG element creation, coordinate transforms, and data-driven attribute updates using D3's `select`, `append`, and `attr` methods.

Ssdilbaz

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with two circular eyes, a mouth shaped by a D3 arc path, and rectangular eyebrows that animate by moving upward and back down. The code uses D3.js v5’s `select`, `arc`, and `transition` APIs to construct and manipulate the SVG elements, applying transforms to position face features and trigger the eyebrow movement over timed transitions.

WWesley Yuen

96% match