Skip to main content
SimilarExport ZIP
100%

Pavani

✓ Published1🌍 Public
PPavaniMangugari
Last edited Jun 18, 2022
Created on Jun 18, 2022

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.

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 M

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.

PPavaniMangugari
92% 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
88% match
Loading thumbnail…

Make a face - Pavani Mangungari

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face out of SVG shapes. The code builds a face from basic elements: a large orange circle for the head, two eyes, eyebrows drawn with D3’s `arc()` function, a nose, and a mouth. Using D3’s `select` and `append` APIs, each feature is positioned relative to a central group, with the eyebrows placed atop the eyes to showcase how SVG paths can be crafted with parametric arc geometry. The rendering is pure SVG, with styling managed through a separate stylesheet.

PPavaniMangugari
85% match
Loading thumbnail…

face

A smiley face rendered in SVG slowly raises and lowers its blue eyebrows. The animation is created with D3.js v5 transitions, which adjust the vertical transform of an eyebrow group over two one-second durations. The static face parts—pink head, green eyes, and a mouth arc—are built using D3's `select`, `append`, and `arc` APIs on the SVG canvas.

PPallaviManupati
82% match
Loading thumbnail…

face

A smiley face drawn with D3.js animates its eyebrows up and down in a looping transition. The SVG face uses a yellow circle, two eye circles, and an arc-generated mouth, while the eyebrows are rectangles that move via chained `transition.attr` calls over two-second intervals. D3 v5’s `select` and `arc` APIs build the static elements, with the animation driven by D3’s transition system.

Ssatishnarne99@gmail.com
82% match
Loading thumbnail…

Let's make a face

A smiley face, drawn with SVG circles and an arc path, animates its eyebrows in a looping sequence in a D3.js visualization. The code builds the face by manipulating SVG groups and shapes, using D3's `select` and `append`. A `transition` with a 2000-millisecond duration shifts the eyebrow group up and down, creating the expression change. The face's construction relies on explicit pixel coordinates and D3's `arc` generator for the mouth, with a yellow circle serving as the head.

Mmoha0902
82% match
Loading thumbnail…

Untitled

A smiley face rendered with D3.js animates its eyebrows by moving them up and down in a looping transition. The face is built from SVG shapes, including a yellow circle for the head, two circular eyes, rectangular eyebrows, and a mouth created using the `d3.arc` path generator. Eyebrow movement is driven by chained `transition().duration(2000)` calls that alter the group’s translate transform, demonstrating fundamental DOM manipulation and animation sequencing in D3.

VVidhuS
81% match