Fork of Fork of Fork of Fork of Let's make a face with D3.js! By Niharika Reddy Amanaganti

100%

Fork of Fork of Fork of Fork of Let's make a face with D3.js! By Niharika Reddy Amanaganti

✓ Published1🌍 Public

Last edited Feb 24, 2023

Created on Feb 24, 2023

A smiling face drawn with SVG shapes is centered on a pink background, with animated eyebrows that repeatedly move upward and downward. The code creates the face using D3 selections and shape generators, appending circles for the eyes and head, rectangles for the eyebrows, and a `d3.arc` path for the mouth. Eyebrow motion is driven by chained `transition().duration()` calls in D3 v5, manipulating a group element’s transform attribute.

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 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 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

95% match

Loading thumbnail…

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

A smiling face built from SVG shapes animates its eyebrows in a loop. The visualization uses D3.js (v5) to construct and manipulate the face: circles form the head, eyes, and mouth, while rectangles form the eyebrows. The code joins transitions on the eyebrow group to create a repeating up-and-down motion. The rendering is pure SVG, with no external data source, focusing on fundamental DOM manipulation with D3's selection and transition APIs.

AAISWARYAMARAPATLA1999

94% match

Loading thumbnail…

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

This visualization presents a smiling face constructed from SVG shapes: a circular head, two eyes, animated eyebrows, and a curved mouth. The eyebrows move up and down repeatedly in a continuous cycle, demonstrating basic DOM manipulation through D3.js’s selection and transition APIs. The code relies on D3 v5, using `select`, `append`, and `transition` to animate rectangle eyebrow elements, while a static path built with `arc()` forms the smile. The example runs as a self-contained HTML page with an embedded SVG canvas.

AAISWARYAMARAPATLA1999

94% match

Loading thumbnail…

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

An animated smiley face with moving eyebrows, rendered as SVG via D3.js, demonstrates fundamental DOM manipulation. The face is built using basic D3 shapes—circles, rectangles, and an arc-generated mouth—positioned within a centered group. The eyebrows transition vertically through chained `transition().duration()` calls, creating a repeating bobbing effect. Additional elements include ears, hair, and teeth, all styled with simple fill and stroke attributes. The code imports `select` and `arc` from D3 v5 to construct the geometric components and drive the animation.

CChandrashekharRamamuthi

94% match

Loading thumbnail…

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

A smiling face made of SVG shapes animates its eyebrows up and down. The example demonstrates DOM manipulation with D3.js v5, using `d3.select` to target the SVG element and appending circles, rectangles, and a path for the mouth. Eyebrow movement is achieved with chained `transition().duration(2000)` calls that alternate the `transform` attribute, while the mouth uses the `d3.arc` generator to define its curved shape. The face is centered via a `g` element with a translated transform.

Rradhadevarapu

94% match

Loading thumbnail…

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

This example shows an animated smiley face with moving eyebrows, created entirely in SVG using D3.js v5. It demonstrates fundamental DOM manipulation by appending and styling circles, rectangles, and paths for facial features, with eyebrow transitions that repeat via chained `transition` calls. The face is centered in a 960x500 SVG canvas, and the code relies on D3's `select`, `arc`, and transition APIs to build the static features and animate the eyebrows over four-second cycles.

TTejaswicmandava

94% match

Loading thumbnail…

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 in a looping motion. The example demonstrates fundamental DOM manipulation with D3.js v5, using `d3.select` to append SVG circle, rectangle, and path elements for the face, eyes, eyebrows, and mouth. Animated eyebrows are implemented with chained `transition.attr` calls that alternate the vertical position of a group containing two rectangles. The mouth is generated using the `d3.arc` helper with specified inner and outer radii and angle ranges.

MMadan05101998

94% match