Pavani M

100%

✓ Published0🌍 Public

Last edited Jun 17, 2022

Created on Jun 17, 2022

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

A yellow smiley face with black outlines, eyes, and eyebrows is drawn in SVG, and its rectangular eyebrows animate upward and back down over two seconds each way. The example demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending a centered group, and building the face with circles and rectangles. The eyebrows’ motion uses chained `transition` calls to tween the group’s `transform` attribute, while the mouth is created with the `d3.arc` path generator.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pavani

This visualization shows a smiley face drawn with basic D3.js shapes, featuring animated eyebrows that move up and down in a looping transition. The code uses D3 v5 to manipulate SVG elements directly, creating a yellow circle for the face, two smaller circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrow animation chains two `transition().duration(2000)` calls to move them up and then back down, demonstrating fundamental DOM manipulation and SVG rendering with D3.

PPavaniMangugari

94% match

Loading thumbnail…

Pavani

A smiley face drawn with orange fill and black stroke animates its rectangular eyebrows upward and back down in a looping two-second transition. Built with D3.js v5, the code uses `select`, `arc`, and chained `transition()` calls to shift the eyebrow group’s transform. The face is composed of SVG circles, a path mouth created with the arc generator, and rects for eyebrows, all centered in a 960×500 viewport.

PPavaniMangugari

92% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn in SVG shows animated eyebrows that rise and fall over repeated two-second transitions. The example demonstrates fundamental DOM manipulation with D3.js v5, using selections to append circles for the face and eyes, rectangles for the eyebrows, and a path generated with the `arc()` helper for the mouth. Eyebrow motion relies on chained `transition().duration()` calls that alternate the transform attribute.

SSaket Anand

88% match

Loading thumbnail…

face

A yellow smiley face is centered in an SVG canvas, with two eyes, a mouth drawn using a D3 arc path, and rectangular eyebrows that animate upward and back down in a looping transition. Built with D3 v5, the example demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups and shapes, and using chained `transition().duration()` calls to move the eyebrows via transform attributes.

EEbenizerR

87% match

Loading thumbnail…

face

A yellow smiley face with animated eyebrows demonstrates basic SVG manipulation in D3.js. The code uses d3-selection to append circles and rectangles for the face, eyes, and brows, while a d3-shape arc creates the mouth. A chained transition moves the entire eyebrow group up and down in a continuous loop, altering its transform attribute over two-second intervals. The example relies on D3 v5 and SVG rendering.

SShantiHahn

87% match

Loading thumbnail…

Pavani

This visualization shows a stylized smiley face built with SVG shapes in React, using a large yellow circle as the head, two eyes with green pupils and purple irises, and a curved mouth formed by a D3 arc path. The face is centered on a 960×500 canvas, with black stroke outlines defining each element. The code uses React 17 for component rendering, D3 v7’s `arc` function for the mouth geometry, and hardcoded coordinates for the eyes, eyebrows, and decorative lines that suggest hair or accessories.

PPavaniMangugari

87% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js, with circular eyes, rectangular eyebrows, and an arc-based mouth. The face demonstrates fundamental DOM manipulation and animation through D3's `select`, `append`, and `transition` methods. The eyebrows move up and down repeatedly via chained `transition().duration(2000)` calls, translating the eyebrow group vertically while the rest of the face remains static. The example uses `d3.arc` to generate the mouth path and positions all elements relative to the SVG's center.

MMithun Ghosh

87% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black outlines is drawn in an SVG canvas, then its eyebrows animate upward and back down in a repeating motion. The example demonstrates basic D3.js v5 DOM manipulation by using `d3.select`, `append`, `attr`, and chained `transition().duration()` calls to move the rectangular eyebrows. The face is constructed from circles for the eyes and an `arc()`-generated path for the mouth, positioned relative to the SVG center. All rendering uses SVG elements with D3 applying attributes directly, and the eyebrows’ movement is the only animated behavior shown.

JJeet Jain

87% match