Skip to main content
SimilarExport ZIP
100%

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

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

This example shows a yellow smiley face built with SVG shapes whose eyebrows animate up and down. The face is constructed using D3.js v5 selections to append a circle for the head, two circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. The eyebrows move via chained `transition().duration(2000)` calls on a group element, shifting its `transform` translation between two vertical offsets. All shapes are centered using a group translated to the middle of a 960-by-500 SVG canvas.

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!

This example demonstrates a yellow smiley face drawn from basic SVG shapes, with animated eyebrows that move up and down. The face is constructed using D3.js v5 primitives including `circle`, `rect`, and `path` elements, positioned through SVG `transform` attributes. The eyebrows animate via chained `transition().duration()` calls, which shift the group's vertical translation. The mouth is created using the `d3.arc` generator to produce an arc path. All elements are centered within an SVG canvas using a single `g` group and coordinate offsets.

DDharanitharan-J
97% match
Loading thumbnail…

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

This example shows a yellow smiley face drawn with SVG, whose eyebrows animate up and down in a repeating loop. The code uses D3.js v5 selection methods to append circles for the eyes and face, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. Two chained `transition` calls, each lasting 2000 milliseconds, shift the eyebrow group’s transform attribute to create the movement. The face is centered using a group translated to the middle of a 960-by-500 SVG canvas.

Ssalim.mir@outlook.com
97% match
Loading thumbnail…

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

This example shows a yellow smiley face built from basic D3.js shapes, with animated eyebrows that move upward and then return to their original position. The face is constructed using SVG circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The code uses D3 v5 selections, attribute manipulation, and chained `transition` calls with explicit durations to drive the eyebrow animation on a fixed 960×500 canvas.

Nnamesh singh
97% match
Loading thumbnail…

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

This example shows a friendly yellow smiley face rendered as an SVG, with eyes and a mouth drawn using D3 shapes. The face’s eyebrows animate by moving upward and then returning to their original position over two two-second transitions. Using d3.select and d3.arc, the code builds the circle, eye, eyebrow rectangles, and mouth path, then applies chained transition() calls to shift the eyebrow group’s transform attribute. The visualization runs in a 960×500 SVG canvas with no external data, relying entirely on hardcoded dimensions.

AAsmitha-Sa
97% match
Loading thumbnail…

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

This example shows a yellow smiley face with eyes and eyebrows that animate in a continuous up-and-down motion. The face is drawn entirely with SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path built with the `d3.arc` generator for the mouth. D3.js v5 is used for DOM selection and manipulation, while chained `transition().duration()` calls alternately raise and lower the eyebrow group. The code imports `select` and `arc` directly from the `d3` module, and positions elements relative to the SVG’s computed width and height.

Nnofferdahl
97% 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
97% match
Loading thumbnail…

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

This example shows a yellow smiley face built entirely from SVG shapes using D3.js v5, with animated eyebrows that move up and down in a repeating two-step transition. The face is composed of a circle, two eye circles, and a mouth drawn as an arc path via the `d3.arc` helper, all centered within an SVG canvas. The code demonstrates fundamental DOM manipulation by appending groups and elements with `select`, `append`, and `attr`, while the eyebrow motion relies on chained `transition().duration().attr()` calls to repeatedly shift their vertical position. No external data source is used; the visualization is purely programmatic.

DDavit Avetikyan
97% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in SVG using D3 v5. The code builds the face from primitive shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—all positioned relative to a centered group. D3's `transition()` and `duration()` methods repeatedly shift the eyebrow group up and down over two-second intervals, creating a continuous bobbing motion. The example demonstrates core D3 selections and DOM manipulation without external data, relying solely on hardcoded dimensions and the `arc()` helper for the mouth shape.

SSnapika
97% match