Skip to main content
SimilarExport ZIP
100%

preetham

✓ Published0🌍 Public
VVenkata Sai Preetham
Last edited Jun 17, 2022
Created on Jun 17, 2022

A smiling face rendered with SVG shapes in D3.js animates its eyebrows in a looping motion. The face consists of a pink circle, two black eyes, and an arc-based mouth drawn with the `arc` generator. Using chained `transition` calls with two-second durations, the eyebrows repeatedly shift upward and return to their original position. The code constructs all elements via D3 selections and attribute manipulation, while the animation relies on D3's built-in transition system, visible in the JavaScript bundle.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

preetham

A face assembled from D3 arc paths and React SVG elements sits on a pink circular head with a wide black stroke. Blue elliptical hats, partially overlapping, crown the figure, while green nose arcs, wheat pupils, and dark red eye circles define the expression. The code uses `d3.arc` for the brows, nose, and mouth, rendered through React components that apply transforms for positioning. A steel-blue page background surrounds the face, which is built from a mixture of D3 shape generators and custom React component functions.

VVenkata Sai Preetham
85% match
Loading thumbnail…

Face with D3.js!

A smiling face drawn with SVG shapes animates its eyebrows and mouth in a looping transition. The code builds the face using D3.js v5 selection and append methods to create circles, rectangles, lines, and an arc-based path, all positioned with hardcoded coordinates. The eyebrows shift upward and the mouth changes thickness through chained `transition().duration(3000)` calls, demonstrating basic DOM manipulation and attribute updating without data binding.

Nnikeshkv
84% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered as SVG animates its eyebrows through a repeating two-second cycle. The code uses D3 v5 selections and transitions to manipulate SVG elements, building the face from circles, rectangles, and an arc-generated path for the mouth. The `transition().duration()` calls sequentially shift the eyebrow group up and down, demonstrating fundamental DOM manipulation with D3's data-binding and animation APIs.

Hhsrashmi
84% match
Loading thumbnail…

Let'd make a face with D3.js!

A smiling face is drawn with SVG shapes, including a yellow circle, eyes, and a mouth created using `d3.arc()` with a custom inner and outer radius. The eyebrows are animated with `transition().duration(2000)`, moving up and down over two seconds using chained transitions on their `transform` attribute. Built with D3 v5 in a React framework, the visualization uses `select` and `arc` imports from the D3 library, with all elements appended to a centered `<g>` group within an SVG canvas of 960 by 500 pixels.

Ppreetham
84% match
Loading thumbnail…

Face with D3

A smiling face drawn with SVG shapes animates its eyebrows up and down in a looping transition. The example uses D3 v4 selections to append circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` API for the mouth. All elements are centered within an SVG using a group transform, and the eyebrow motion is driven by chained `transition.attr()` calls on the group’s transform attribute.

Nngannie
83% match
Loading thumbnail…

Let's make a face ith D3.js!

This example builds a smiling face out of basic SVG shapes, then animates its eyebrows with a looping transition. D3 v7 selects the SVG and uses the `arc` generator to draw the mouth as a half-ring path, while circles and rectangles form the eyes and brows. The animation runs for two seconds per eyebrow movement, creating a repeated up-and-down motion. The code demonstrates D3 selections, transitions, and the `arc` API, all rendered directly to SVG.

AAuliaAmirullah15
83% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG elements animates as its eyebrows repeatedly move up and down. Built with D3.js v5, the example uses selection methods like `append` and `attr` to construct circles, rectangles, and an arc-based path for the mouth. A chained `transition` with a two-second duration shifts the eyebrow group's transform, creating the looping motion.

Hhsrashmi
83% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG elements animates as its eyebrows repeatedly move up and down. Built with D3.js v5, the example uses selection methods like `append` and `attr` to construct circles, rectangles, and an arc-based path for the mouth. A chained `transition` with a two-second duration shifts the eyebrow group's transform, creating the looping motion.

Hhsrashmi
83% match