Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
PPriya Tiwari
Last edited Oct 3, 2023
Created on Oct 3, 2023

A smiling face made of SVG shapes is centered on a yellow background. The face's eyebrows perform a repetitive up-and-down motion, creating a brief animation. Constructed with D3.js v5, the code uses `select`, `append`, and `attr` to build the SVG elements, while chained `transition().duration(2000)` calls animate the eyebrow group's vertical position. The mouth is drawn using `d3.arc()` with specified inner and outer radii and angular ranges.

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

A smiling face drawn with SVG shapes animates its eyebrows up and down repeatedly. The D3.js v5 code uses `select` to target the SVG element, `append` to add circles for the face and eyes, and rectangles for eyebrows. A `path` with `d3.arc` creates the mouth. A chained `transition().duration(2000).attr(...)` call moves the eyebrow group between two vertical positions, creating the looping movement.

PPriya Tiwari
97% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face is drawn using SVG elements, including circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth. Eyebrows animate upward and downward through chained `transition()` calls with a two-second duration each. The code uses D3 v5 and imports `select` and `arc` directly. All elements are centered within an SVG via a translate transform.

PPriya Tiwari
97% match
Loading thumbnail…

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

A yellow smiley face is drawn in SVG, with circular eyes and rectangular eyebrows that animate vertically. The eyebrows move up and down in a repeating loop using D3’s `transition()` method, while the mouth is created with the `d3.arc` shape generator. The code selects SVG elements with `d3.select`, uses `d3.arc` for the path, and animates attributes via chained transitions. Drawing is done over two seconds per movement, with the face centered in a 960×500 viewport.

PPriya Tiwari
96% match
Loading thumbnail…

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

A smiling face rendered in SVG animates as its eyebrows repeatedly rise and lower, demonstrating basic shape construction and timed transitions with D3.js v5. The code builds the face from geometric primitives—circles for the eyes, rectangles for brows, and a path generated with the `arc` helper for the mouth—all positioned via SVG transforms. A chained `transition().duration()` sequence moves the eyebrow group up and down in a two-second loop, showing how to animate attributes without external data.

PPriya Tiwari
96% match
Loading thumbnail…

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

A smiley face drawn with D3.js animates its eyebrows in a continuous up-and-down motion, using a yellow circle for the face, two circles for eyes, and an arc for the mouth. The code selects the SVG element, appends groups and shapes with `select` and `append`, and drives the eyebrow movement with chained `transition` calls that alternate between two vertical positions over two-second durations. The face is centered via a transform, and all dimensions are computed from the SVG's width and height attributes.

MManideepChakilam
96% 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
95% match
Loading thumbnail…

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

A smiley face drawn with SVG elements animates its eyebrows upward and downward in a repeating two-second cycle. The code builds the face by appending circles for the eyes, rectangles for the eyebrows, and a D3 arc path for the mouth using D3.js v5. Eyebrow motion is achieved by chaining `transition().duration(2000)` calls on a group element, which alternately shifts its `transform` attribute. The example demonstrates fundamental DOM manipulation and selection with `d3.select` and `d3.append`.

PPriya Tiwari
95% 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
95% match