Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
HHarshinireddyy19
Last edited Jun 18, 2022
Created on Jun 18, 2022

A fork of "Let's make a face with D3.js!" draws a smiley face with ears, eyes, eyebrows, a nose, whiskers, and a mouth using SVG shapes. The eyebrows animate upward and then back down via chained `transition` calls over two seconds each. The code uses d3-select, d3-arc for the mouth path, and SVG circle, rect, and path elements. A green background is applied to the page body.

AI-generated description

Smiley face implementation with d3.js.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This example shows a simple animated smiley face with eyebrows that move up and down. Built with D3.js v5, it renders an SVG face using basic shapes like circles, rectangles, and an arc for the mouth. The eyebrows animate through chained `transition()` calls that repeatedly adjust their vertical position. All elements are positioned relative to the SVG center using a group transform, and the code imports specific utilities such as `select` and `arc` from the D3 library.

HHarshinireddyy19
95% match
Loading thumbnail…

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

This example shows a simple animated smiley face with eyebrows that move up and down. Built with D3.js v5, it renders an SVG face using basic shapes like circles, rectangles, and an arc for the mouth. The eyebrows animate through chained `transition()` calls that repeatedly adjust their vertical position. All elements are positioned relative to the SVG center using a group transform, and the code imports specific utilities such as `select` and `arc` from the D3 library.

HHarshinireddyy19
95% match
Loading thumbnail…

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

A D3.js smiley face animates by moving its eyebrows up and down on an SVG canvas. The code uses `d3.select` to append SVG elements including circles for the eyes and mouth, and rectangles for the eyebrows. A `transition` with a 2000-millisecond duration moves the eyebrow group vertically, then back, creating a repeating animation. The face is centered using SVG transforms, with dimensions read from the SVG attributes. The mouth is drawn using the `d3.arc` path generator.

Hharika-1929
94% match
Loading thumbnail…

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

A smiley face rendered in SVG uses D3.js v5 to animate its eyebrows in a repeating up-and-down motion. The face is built by appending SVG circles for the head and eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. D3 transitions move the entire eyebrow group by changing its `transform` attribute over two-second intervals. The code imports `select` and `arc` from D3, and the animation runs automatically on page load.

Jjohncoder21
94% match
Loading thumbnail…

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

This fork animates a D3.js smiley face by moving its eyebrows up and down in a repeating sequence. The code demonstrates fundamental DOM manipulation, building the face with SVG shapes including a blue circle head, two eyes, eyebrow rectangles, and an arc-generated mouth. The animation uses D3’s `transition().duration()` chained calls to shift the eyebrows’ transform attribute between two vertical positions over two-second intervals. The example uses d3-selection and d3-shape APIs, with the SVG appended to a 960×500 canvas and coordinates centered via a translation.

Rradhadevarapu
94% match
Loading thumbnail…

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

A smiley face, rendered as SVG elements, demonstrates fundamental DOM manipulation with D3.js. The face's eyebrows animate by repeatedly shifting their vertical position via chained `transition()` calls, each lasting two seconds. The code uses D3's `select`, `append`, and `attr` methods to build the circle, eyes, and rectangular eyebrows, while an `arc()` path creates the mouth. The animation loops the eyebrows up and down continuously.

MMaurice Huang
94% match
Loading thumbnail…

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

This example demonstrates a smiley face drawn with D3.js, featuring animated eyebrows that move up and down in a looping transition. The face is constructed using SVG primitives, with a yellow circle for the head, two eye circles, and a mouth path generated with the `arc` function. The code imports `select` and `arc` from D3 v5, explicitly setting dimensions from the SVG attributes and centering a group element. The eyebrows are rectangular shapes within a nested group, animated via chained `transition` calls that adjust their vertical position over two-second intervals.

HHarshavardhan
94% match
Loading thumbnail…

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

A smiley face drawn with D3.js animates its eyebrows in a repeated rise-and-fall motion. The example demonstrates fundamental DOM manipulation by building the face from SVG elements—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` helper for the mouth. Eyebrow movement uses chained `transition().duration()` calls to shift the group’s `transform` attribute, alternating between raised and lowered positions. The code imports `select` and `arc` from D3 v5 and renders entirely in SVG on a 960×500 canvas.

Ppavakpatel
94% match