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

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face is drawn using SVG elements, including circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth. Eyebrows animate upward and downward through chained `transition()` calls with a two-second duration each. The code uses D3 v5 and imports `select` and `arc` directly. All elements are centered within an SVG via a translate transform.

96% match

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

A smiley face is drawn with D3.js v5, using SVG circles for the eyes and face, a path for the mouth, and rectangles for the eyebrows. The face is centered in an SVG canvas using a group transform. The eyebrows animate vertically over two seconds via chained `transition` calls, moving up and then back down. The code uses D3's `select`, `attr`, `append`, and `arc` APIs, with dimensions and offsets defined as constants.

96% match

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

This example uses D3.js v5 to build a simple animated smiley face from basic SVG shapes—a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and downward through chained `transition` calls, each lasting 2 seconds. It demonstrates fundamental DOM manipulation with `select` and `append`, and uses SVG attributes like `cx`, `r`, and `transform` to position elements relative to a centered group.

Rradhadevarapu

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

A smiling face made of SVG shapes is centered on a yellow background. The face's eyebrows perform a repetitive up-and-down motion, creating a brief animation. Constructed with D3.js v5, the code uses `select`, `append`, and `attr` to build the SVG elements, while chained `transition().duration(2000)` calls animate the eyebrow group's vertical position. The mouth is drawn using `d3.arc()` with specified inner and outer radii and angular ranges.

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

This example uses D3.js to build a smiley face from basic SVG shapes—a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The animation shows the eyebrows moving down and back up through chained `transition` calls, each lasting two seconds. The code imports `select` and `arc` from D3, sets up the SVG canvas, and uses `attr('transform')` to position elements relative to the center. It demonstrates fundamental DOM manipulation and animation with D3 v5.

AAvinarasi

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

This fork of “Let's make a face with D3.js!” builds a yellow smiley face from SVG shapes, including eyes, eyebrows, a mouth, nose, ears, and hair. D3.js v5 selections append circles, rectangles, paths, and ellipses to an SVG canvas, while the `d3.arc` generator creates the curved mouth. A two-stage transition animates the eyebrow group’s vertical position, moving the eyebrows up and down over two seconds per cycle using `transition.attr`. The face is centered via a translated `<g>` element, and the code relies on D3’s `select` and `arc` imports.

Ssaiyogesh9911@gmail.com

Fork of 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, including a yellow circle head, eyes, a line nose, and an arc mouth. The code animates the eyebrows using chained `transition().duration()` calls, moving them upward and back down over two seconds. It uses D3 v5’s `select` to target the SVG element and `arc` to generate the mouth path, with all elements appended to a centered group. The rendering relies entirely on SVG and animation, with no external data source.

Mmivan000

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

A yellow smiley face is drawn in SVG, with circular eyes and rectangular eyebrows that animate vertically. The eyebrows move up and down in a repeating loop using D3’s `transition()` method, while the mouth is created with the `d3.arc` shape generator. The code selects SVG elements with `d3.select`, uses `d3.arc` for the path, and animates attributes via chained transitions. Drawing is done over two seconds per movement, with the face centered in a 960×500 viewport.