Let's make a face with D3.js!

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

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring circular eyes, a curved mouth, and rectangular eyebrows that animate upward and back in a looping motion. The example demonstrates fundamental SVG DOM manipulation by selecting an `<svg>` element and appending grouped shapes with `d3.select` and `append`. It uses D3's `arc` generator to create the mouth path and `transition().duration()` to move the eyebrows and mouth, with attributes like `attr` and `translate` transforms controlling position and animation.

Mmirna981

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

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5, with circular eyes, rectangular eyebrows, and an arc-based mouth. The face’s eyebrows and mouth animate over two-second transitions, moving upward and downward repeatedly. The code selects the SVG element, appends groups for positioning, and uses D3’s `arc()` generator to shape the mouth, while `transition().duration()` drives the timed movements.

AAbhijeet Panda

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn entirely in SVG using D3.js v5. The code demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups, and building the face from basic shapes like circles and rectangles. D3 transitions move a shared eyebrow group up and down over two one-second intervals, while a mouth path is created using the `d3.arc` generator with specified inner and outer radii and smile angles.

Mmoha0902

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring two eyes, a curved mouth, and animated eyebrows that move up and down in a looping transition. The visualization demonstrates fundamental DOM manipulation by appending and transforming SVG shapes (`circle`, `rect`, `path`) within grouped elements (`g`), using D3 v5’s selection and transition APIs. The face is centered via a translated group, and the mouth is generated with D3’s `arc` shape helper, while the eyebrow motion relies on chained `.transition().duration()` calls.

Ccollv004

Let's make a face with D3.js!

A yellow smiley face is drawn as an SVG using D3.js v5, with circular eyes, a path-based mouth built via the `d3.arc` API, and rectangular eyebrows. The eyebrows animate upward and back down using chained `transition` and `attr` calls over two 2-second intervals. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups and shapes, and setting attributes with transforms, all in an empty HTML body.

AAnkit

Let's make a face with D3.js!

A smiley face with yellow circular head, black eyes, and a curved mouth is rendered in SVG using D3.js v5 and ES6 modules. The eyebrows are rectangular shapes that animate vertically via chained `transition()` calls, moving up and then returning to their original position over repeated 2-second intervals. D3's `select` and `arc` APIs construct the SVG elements, with layout driven by hardcoded dimensions from the parent `<svg>`.

SShantanu Tripathi