Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
NNavaneeth-Ragi
Last edited Feb 23, 2023
Created on Feb 21, 2023

A D3.js animation builds a simple face from SVG primitives, with two green and orange concentric circles for the head, two circles for the eyes, and two rectangles as eyebrows. The eyebrows bounce vertically over four seconds via chained `transition().attr()` calls, while a path created with the `arc` generator forms a static mouth. The example demonstrates fundamental DOM manipulation through `select` and `append`, using D3 v5 to target an SVG element defined in the HTML.

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 built with D3.js demonstrates fundamental DOM manipulation through SVG elements, including a circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate upward and back down using chained `transition` and `.duration()` calls, creating a subtle waggle effect. The example imports `select` and `arc` from D3 v5, reads the SVG's width and height attributes, and positions everything via a centered `g` group. All geometry, including eye spacing, eyebrow offsets, and the mouth's inner/outer radii and angles, is hardcoded.

NNavaneeth-Ragi
95% match
Loading thumbnail…

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

A smiling face, drawn with green and orange SVG shapes, demonstrates D3.js v5's DOM manipulation and animation capabilities. The face's eyebrows repeatedly shift upward and back down using chained `transition().duration()` calls, while the mouth is rendered using the `arc()` geometry function. The code builds the illustration by selecting an SVG element, appending grouped circles and rectangles, and positioning them relative to the viewport center.

NNavaneeth-Ragi
95% match
Loading thumbnail…

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

A D3.js smiley face, built from SVG primitives, demonstrates fundamental DOM manipulation and transitions. A green circle forms the head, with two dark circles for eyes and an orange arc for the mouth, all positioned using geometric constants. The animation shows both rectangular eyebrows moving up and down together via chained `transition().duration()` calls that modify their container's `transform` attribute. The code uses D3 v5 selections and the `arc` generator to construct the mouth path, with all elements grouped and translated to the SVG center for easy positioning.

NNavaneeth-Ragi
94% match
Loading thumbnail…

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

A playful SVG face built with D3.js v5 shows a green circle with movable eyebrows, red ears, white teeth, and a frowning mouth. The code demonstrates fundamental DOM manipulation using `d3.select` and `d3.append` to construct shapes, while `transition()` animates the eyebrows upward and back down over four seconds. An `arc()` generator creates the mouth path, and rectangular teeth are bound to data via `selectAll().data().enter()`.

Bbhanuprasadk19
94% match
Loading thumbnail…

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

A stylized, animated face rendered in SVG with D3.js v5. The face is built from primitive shapes—a yellow circle for the head, black circles for eyes, and an orange arc for a mouth—all centered within a 960x500 canvas. The animation is driven by D3's transition system, which moves the eyebrows upward and back over two seconds each. The code demonstrates modular imports from `d3`, including `select` and `arc`, and uses `arc()` to generate the mouth path with specified inner and outer radii and angular extents.

Jjlspangl
94% match
Loading thumbnail…

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

This animated SVG face uses D3.js v5 to demonstrate fundamental DOM manipulation. A yellow circle forms the head, with black-outlined eyes and a path drawn mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition()` calls with 2000-millisecond durations. The example shows how to build and move SVG elements dynamically, with a black page background set via D3’s selection style method, and relies on basic attribute setting for positioning.

SSANEEM MOHAMMAD
94% 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
94% match
Loading thumbnail…

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

A D3.js animation builds a smiling face from SVG primitives, with eyebrows that repeatedly shift up and down over two-second intervals. The code uses `d3.select` and `d3.append` to construct the face, and the `d3.arc()` API generates the mouth as an annular sector. The eyebrows animate via chained `transition().duration(2000)` calls on an SVG group, demonstrating fundamental DOM manipulation and animated attribute updates within an SVG canvas.

HHarishma Nallala
93% match