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

100%

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

✓ Published0🌍 Public

Last edited Feb 23, 2023

Created on Feb 22, 2023

Forked from Let's make a face with D3.js!

A smiley face built with SVG shapes demonstrates D3.js v5 selection and appending methods, including circles, rects, paths, and polygons for facial features. The eyebrows move up and down repeatedly via chained `transition()` calls with `d3.easeSinInOut`, while sweat drops loop through a recursive `animate` function using data binding. The code uses `d3.select`, `d3.arc` for the mouth and tears, and explicit SVG attributes to compose the face on a gray background.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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 Let's make a face with D3.js!

A smiley face composed of SVG shapes animates its eyebrows in a looping sequence. The code builds the face using D3 selections, appending circles for the head and eyes, rectangles for brows, and a path from `d3.arc` for the mouth. Eyebrow movement is driven by chained `transition().duration(2000)` calls that shift the group’s `transform` attribute between two positions. The example demonstrates fundamental DOM manipulation and animation with D3 v5.

SSai Kaushik

94% match

Loading thumbnail…

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

This example uses D3.js to construct a simple, animated smiley face entirely from SVG shapes. A circle forms the face, with smaller circles for eyes and cheeks, rectangles for eyebrows, nose, and mouth, all positioned relative to the center. The code demonstrates fundamental DOM manipulation with `d3.select` and `append`, while `setInterval` triggers D3 transitions that move the eyebrows and enlarge the cheeks in a looping animation.

Ssatishnarne99@gmail.com

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

Loading thumbnail…

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

A smiley face built with D3.js displays animated eyebrows that shift upward and downward in a looping two-second transition. The code selects an SVG element and constructs the face using D3 selections, appending circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `d3.arc` API for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group's transform offset. The example uses D3 v5 with SVG rendering and demonstrates basic DOM manipulation and animation for static, predefined geometry without external data.

Ssrinivasaraosankula

94% match

Loading thumbnail…

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

An animated smiley face rendered in SVG demonstrates core DOM manipulation with D3.js v5. The face, built from circles, rectangles, and a path, features eyebrows that animate by chaining `transition().duration()` calls to shift their vertical position over time. The code constructs the facial features using D3’s `select` and `append` methods, with the mouth drawn via the `arc` function to generate a curved path. The example highlights basic D3 transitions and coordinate transformations within a fixed 960×500 SVG canvas.

Mmomopng

94% match

Loading thumbnail…

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

A smiley face rendered with SVG animates its eyebrows upward and downward in a looping transition. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG element, appending groups, circles, rectangles, and a path for the mouth using `d3.select` and `d3.arc()`. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group’s `transform` attribute. The code uses D3 v6, with dimensions defined by the SVG’s width and height attributes.

Kkosakase

93% match

Loading thumbnail…

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

Built with D3 v5, this example demonstrates fundamental DOM manipulation and animation by constructing a smiley face from SVG shapes. The code uses `d3.select` to append a circle, eyes, rectangular eyebrows, and an arc-based mouth. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down in a looping motion. All elements are centered within an SVG using a translated group, with dimensions pulled from the SVG attributes. The example highlights basic selections, attribute setting, and transition tweening without external data.

VVenu

93% match