Skip to main content
SimilarExport ZIP
100%

Fork of D3 Face2

✓ Published2🌍 Public
YYoung Song
Last edited Jun 23, 2022
Created on Jun 16, 2022
Forked from D3 Face

A smiling cartoon face, drawn with yellow circles and black features on an orange background, animates its eyebrows upward and back down. The face is built using SVG elements positioned with a D3 selection, including circles for the eyes, rectangles for the eyebrows and nose, and a path generated with the `d3.arc()` function for the mouth. Animated via chained `transition()` calls that set the eyebrow group’s `transform`, the example demonstrates declarative attribute updates over a two-second rise and three-second fall.

AI-generated description
  • Loading d3.js
  • Importing d3 function using ES6
  • Creating a face using SVG and d3
  • Animation with transitions
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
92% match
Loading thumbnail…

Fork of D3 Face Making

A smiling yellow face is drawn in SVG with D3 v5, featuring circular eyes and a curved mouth built from an arc path. Brows animate by moving downward and upward over two successive two-second transitions, each triggered via `transition.duration` on a group. The code constructs the face using `d3.select`, `d3.arc`, and positioned groups, with coordinates calculated from the SVG’s height and width. A static yellow background circle with a black stroke forms the head, while all shapes are appended directly to the SVG.

SShishiraRudrabhatla
91% match
Loading thumbnail…

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

This example shows a yellow smiley face with animated eyebrows, which shift upward and then return to their resting position in a looping motion. The face is constructed entirely from SVG primitives—circles for the eyes and head, rectangles for the brows, and a path for the mouth—all centered within a 960×500 viewport. Using D3 v5, the code demonstrates DOM manipulation through chained `select`, `append`, and `attr` calls, while the eyebrow animation relies on the `transition` API to tween the `transform` attribute over 1500 milliseconds.

DDeeraj Thakkilapati
91% match
Loading thumbnail…

Fork of D3-1: Making a face

A yellow circle with blue eyes, animated eyebrows, and a curved mouth forms a stylized face rendered in SVG. The code uses D3 v7 selections to append SVG primitives, and a D3 arc path generator to create the mouth based on specified inner and outer radii and angles. Two rectangles represent eyebrows and use chained `transition().duration()` calls to move them vertically over two seconds before returning. The example demonstrates basic D3 shape generation, SVG group elements for shared eye styling, and timed attribute transitions.

AAsmitha-Sa
91% match
Loading thumbnail…

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

This example shows a yellow smiley face rendered in SVG, with its eyebrows animating up and down repeatedly. The face is drawn using D3.js v5, building circles, rectangles, and a mouth path through basic DOM selection and appending. Eyebrow movement is achieved with chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports `select` and `arc` from D3, computes layout from the SVG’s dimensions, and uses inline attribute settings for styling and positioning.

117761A04F1
91% match
Loading thumbnail…

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

A yellow circle with black strokes forms a smiley face’s head, featuring two circular eyes, a curved mouth, and rectangular eyebrows. The eyebrows shift downward by 50 units over two seconds and then return to their original position, creating a subtle animated movement. Built with D3 v5, the example uses DOM selection, SVG element creation, and chained `transition().duration()` calls to animate the eyebrow group’s transform. The code also employs `d3.arc` to generate the mouth’s path and `d3.select` for initial setup, rendering entirely in SVG within a 960×500 viewport.

DDrollayemi
91% match
Loading thumbnail…

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

This example animates a cartoon smiley face, with its eyebrows repeatedly moving up and down over a two-second cycle. Built using D3.js version 7, it draws the face with SVG shapes, including a yellow circle for the head, black circles for the eyes, and a path for the mouth. The animation relies on D3's `.transition().duration()` method to tween the eyebrow group's `transform` attribute, while the mouth is generated using D3's `arc()` generator. The code demonstrates fundamental DOM manipulation and selection via D3's `select` and `append` functions.

PPrathyusha Jampala
91% match
Loading thumbnail…

Fork of D3-1: Making a face

A yellow circle face with blue eyes, black eyebrows, and a mouth formed by an arc sits centered in an SVG canvas. Two rectangular eyebrows animate upward simultaneously over two seconds, then return to their original positions. The code uses D3 v7 selections, including `d3.select` and `d3.append`, with SVG elements like `circle`, `rect`, and `path`, plus the `d3.arc` API for the mouth shape. Transitions are applied via `.transition().duration()` to animate the eyebrow movement.

AAbishekprabakaran
91% match