Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
JJorrr2
Last edited Feb 8, 2021
Created on Feb 8, 2021

A stylized yellow SVG face, built with D3.js, animates its eyebrows in a looping up-and-down motion. The face is constructed from basic shapes: a circle for the head, two circles for the eyes, rectangles for the eyebrows, and a D3 arc path for the mouth. The eyebrows move repeatedly via chained `transition().duration()` calls that translate their containing group. All elements are centered using SVG transforms, with dimensions derived from the SVG element’s height and width attributes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

A smiling face built from yellow and black SVG shapes animates its eyebrows upward and downward in a looping motion. The example constructs the face with D3 v6 selections, positioning eyes as circles, eyebrows as rectangles, and a mouth as a path generated by the `arc` generator. Transitions chain two 2-second `transition` calls on the eyebrow group to move it vertically, creating the expressive blink-like effect within the fixed 960×500 viewport.

JJorrr2
96% match
Loading thumbnail…

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

A yellow SVG face is drawn with D3.js v5, featuring two large eyes and an open mouth rendered as an arc path. The face uses `d3.select` and `d3.arc` to construct the shapes on an SVG canvas. The code includes a commented-out animated eyebrow section that would use `transition` to move eyebrows up and down, though the active version shows only static features. All elements are positioned using SVG transform attributes, with the face centered on a 960×500 viewport.

Jjlspangl
95% match
Loading thumbnail…

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

A yellow circle with black facial features animates its eyebrows in a looping motion. The face is drawn with SVG elements in D3.js v3, using a `circle` for the head and eyes, `rect` elements for the eyebrows, and an `arc` path for the mouth. The eyebrows move vertically via chained `transition` calls with a 2000-millisecond duration, shifting down then returning to their original offset.

SSerena Fang
95% match
Loading thumbnail…

Fork of Let's make a face with d3.js

A cheerful yellow face is drawn in SVG and animated with D3.js v7. The face features a circular head, two eyes, and rectangular eyebrows that move up and down over two seconds. The mouth is rendered as an arc path using the `arc()` method, which defines its inner and outer radii and angular range. The code uses `select` to target the SVG element, `append` to build the grouped shapes, and `transition().duration()` to animate the eyebrow group’s transform, demonstrating basic D3 animation and SVG construction.

FFarhodXoliyarov
95% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The face is drawn using SVG circles for the eyes, rectangles for the eyebrows, and a d3.arc() path for the mouth, all centered within an SVG canvas. The eyebrows move up and down repeatedly through chained transition().duration() calls that change their transform attribute. The example uses d3.select and d3.arc from the d3 v5 library to construct and animate the static SVG elements.

JJorrr2
95% match
Loading thumbnail…

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

A smiling yellow face with black features animates its eyebrows, which move upward and then settle back down in a continuous loop. Built with D3.js v5, the visualization uses SVG shapes—circles for the head and eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. The eyebrow motion is achieved through chained `transition()` calls that alter the group’s translate transform over two-second durations.

DDhiyan-jay
94% match
Loading thumbnail…

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

A D3.js animation displays a yellow smiley face whose eyebrows move up and down in a repeating loop. The face is constructed from SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path for the mouth—positioned within a group. The animation uses the `transition` API to smoothly interpolate the eyebrow group's `transform` attribute over two-second intervals between two vertical offsets. The code demonstrates fundamental DOM manipulation, importing `select` and `arc` from the D3 library to build and style the elements.

Jjacychu
94% match
Loading thumbnail…

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

A D3.js animation displays a yellow smiley face whose eyebrows move up and down in a repeating loop. The face is constructed from SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path for the mouth—positioned within a group. The animation uses the `transition` API to smoothly interpolate the eyebrow group's `transform` attribute over two-second intervals between two vertical offsets. The code demonstrates fundamental DOM manipulation, importing `select` and `arc` from the D3 library to build and style the elements.

Jjacychu
94% match