Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
KKishore22cs072
Last edited Sep 22, 2023
Created on Sep 22, 2023

This example animates a smiling face drawn with D3.js, showing a looped sequence where the eyebrows rise and fall. It demonstrates core SVG manipulation by selecting the root `<svg>` element and appending groups and shapes, including circles for the face and eyes, rectangles for the eyebrows, and a path for the mouth, which is generated using the `d3.arc()` function. The animation is driven by a chain of `.transition().duration(2000)` calls that move the eyebrow group’s `transform` attribute between two vertical positions, using D3 v5’s built-in transition API. The face is centered via a `translate` transform, and the SVG canvas is a fixed 960×500 pixel space.

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

A smiley face built with D3.js animates by repeatedly moving its eyebrows up and down. The SVG canvas contains a red circle for the head, two smaller circles for eyes, and a path drawn with the `d3.arc()` function for the mouth. The animation uses chained `transition()` calls with a 2000-millisecond duration to shift the eyebrow group’s `transform` attribute. All shapes are appended and styled programmatically via D3’s selection methods, with dimensions derived from the SVG’s width and height attributes.

KKishoreKumar
96% match
Loading thumbnail…

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

A smiling face rendered in SVG animates its eyebrows upward and downward in a looping two-second cycle. The face is constructed entirely through D3.js v5 DOM manipulation, using `select` to target the root `svg` element, then appending and positioning circles for the eyes, rectangles for the eyebrows, and a path built from `arc` for the mouth. The eyebrow animation is driven by chained `transition().duration(2000)` calls that alternately shift the parent group’s `transform` attribute, demonstrating basic tweened state changes on SVG attributes. The composition is centered via a translated group, with hardcoded spacing values for facial features.

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

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

A smiley face rendered with SVG animates its eyebrows upward and downward in a looping transition. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG element, appending groups, circles, rectangles, and a path for the mouth using `d3.select` and `d3.arc()`. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group’s `transform` attribute. The code uses D3 v6, with dimensions defined by the SVG’s width and height attributes.

Kkosakase
95% match
Loading thumbnail…

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

This example animates a stylized smiley face drawn with D3.js, showing its eyebrows moving up and down in a looping motion. The face is composed of SVG shapes: a yellow circle for the head, two small circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The code uses D3’s `select` to access the SVG, `arc` to define the mouth, and chained `transition().duration()` calls to animate the eyebrow group’s vertical position. All elements are centered using a translated `<g>` group.

Kkamleshkr01
95% match