Forking

100%

✓ Published0🌍 Public

Last edited Feb 22, 2023

Created on Feb 22, 2023

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

A smiling face rendered in SVG continuously raises and lowers its rectangular eyebrows through chained D3 transitions. The example demonstrates fundamental DOM manipulation with D3 v5, using selection methods like `append` and `attr` to build the face from basic shapes—a circle for the head, arcs for the mouth, and rectangles for the brows. The code explicitly uses `d3.arc` and `d3.select` to construct the mouth path and animate the eyebrow group’s `transform` attribute over timed durations.

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

92% match

Loading thumbnail…

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

A smiling face built with D3.js animates its eyebrows in a looping motion. The SVG face is assembled from simple shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. D3 selections and the `arc()` generator position these elements, while chained `transition().duration()` calls alternately shift the eyebrow group up and down. The example demonstrates fundamental DOM manipulation and transitions using D3 v5.

Ssrinivasaraosankula

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

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

91% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face whose eyebrows animate upward and downward. The SVG face is constructed from circles, rectangles, and an arc path, using D3 selections to append elements and set attributes. Eyebrow movement is achieved through chained `transition` calls with a 2000-millisecond duration, translating the eyebrow group along the Y-axis. The code leverages D3 v5 modules like `select` and `arc`, with inline SVG coordinates defining the face’s layout.

Rradhadevarapu

91% match

Loading thumbnail…

Fork

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—demonstrating DOM selection and manipulation via `d3.select` and `d3.append`. The eyebrows repeatedly shift vertically using a chained `transition().duration(2000)` sequence. All positioning relies on fixed numeric coordinates and transforms, with no external data source.

Nnsatyaprakash22

91% match

Loading thumbnail…

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

A smiling face rendered with SVG shapes uses D3.js to animate its eyebrows. The code builds the face from circles, rectangles, and an arc path, then applies chained transitions with `transition.attr` to move the eyebrows up and down. The example demonstrates fundamental DOM manipulation with D3's selection and arc methods, showing how to construct and animate a basic graphic using d3.v5.

PPrathyusha Jampala

91% match

Loading thumbnail…

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

A smiling face built with D3.js shows animated eyebrows that move down and back up in a looping transition. The SVG elements—circles for the eyes, rectangles for the eyebrows, and a path created with `d3.arc` for the mouth—are positioned relative to a central group. Using `d3.select` to manage DOM nodes, the code applies chained `transition().duration()` calls to animate the eyebrow group’s transform attribute. No external data is used; the visualization demonstrates fundamental D3 DOM manipulation and SVG rendering.

Kkirangithub23

91% match