Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
AAISWARYAMARAPATLA1999
Last edited Feb 23, 2023
Created on Feb 23, 2023

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.

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!

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
98% 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
97% 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
97% 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
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!

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

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.

Mmanasanimmagadda13
96% match