Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Mmanasanimmagadda13
Last edited Feb 16, 2022
Created on Feb 16, 2022

A smiling face built with SVG shapes animates as its rectangular eyebrows rise and fall, creating a playful expression. The example demonstrates fundamental D3.js DOM manipulation by using `select` and `append` to construct circles for the face and eyes, `rect` elements for eyebrows, and an `arc` generator for the mouth. Eyebrow motion is achieved through chained `transition` calls on a group element, shifting its vertical position over two-second intervals. The code uses D3 v5 and relies on SVG attributes for positioning and styling.

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 fundamental DOM manipulation with D3.js by building a smiling face whose eyebrows animate up and down. It shows how to select an SVG element, append grouped shapes—circles for the face and eyes, rectangles for eyebrows, and a path for the mouth—and position them using translation transforms. D3’s `transition().duration()` chains move the eyebrows vertically over two seconds, while the mouth uses `d3.arc()` to create a curved smile. The code imports `select` and `arc` from D3 v5 and renders entirely in SVG.

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

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

A smiling face, rendered entirely with SVG shapes, animates as its rectangular eyebrows repeatedly lower and raise over a two-second cycle. Built with D3.js v5, the visualization demonstrates fundamental DOM manipulation by using `select` and `append` to construct the face from circles, rectangles, and an `arc`-generated path for the mouth. Eyebrow motion is driven by chained `transition().duration(2000)` calls that tween the rectangles' `transform` attributes, shifting them vertically within the SVG canvas.

SSuresh John Wesly
96% match
Loading thumbnail…

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

This example builds a smiley face with D3.js v5, animating its eyebrows in a repeating up-and-down motion. The face is constructed entirely from SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` API for the mouth—all grouped and positioned via `transform` attributes. The animation uses chained `transition().duration()` calls on the eyebrow group, while static styling is applied directly to attributes like `fill` and `stroke`. The code imports `select` and `arc` from D3 and renders to a fixed 960×500 SVG canvas.

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

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

A smiley face composed of SVG shapes animates its eyebrows in a looping sequence. The code builds the face using D3 selections, appending circles for the head and eyes, rectangles for brows, and a path from `d3.arc` for the mouth. Eyebrow movement is driven by chained `transition().duration(2000)` calls that shift the group’s `transform` attribute between two positions. The example demonstrates fundamental DOM manipulation and animation with D3 v5.

SSai Kaushik
96% 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
96% match