Skip to main content
SimilarExport ZIP
100%

Sri ram reddy koteru

✓ Published0🌍 Public
SSRI RAM REDDY KOTERU
Last edited Feb 21, 2022
Created on Feb 21, 2022

A smiley face built with D3.js animates its eyebrows in a looping motion. The SVG face, centered on a red circle with black stroke, features two eyes, a mouth drawn with an arc path, and rectangular eyebrows. The code uses D3's `select`, `append`, and `attr` methods for DOM manipulation, with the eyebrow movement driven by chained `transition().duration()` calls that shift the group’s `transform` attribute. Rendering is entirely SVG-based, with no external data source.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Ram_ICE_4_Assignment_D3.js!

This example demonstrates a playful SVG smiley face constructed entirely through D3.js v5 DOM manipulation. The face features animated eyebrows that move up and down using chained `transition().duration()` calls, a mouth drawn with the `d3.arc()` path generator, and CSS-styled elements like ears, teeth, and a headband. The code uses `select`, `arc`, and `attr` to build the face on an SVG canvas, with HTML divs layered for additional facial features. The animation runs automatically in a loop, showing the eyebrows shifting repeatedly between raised and resting positions.

RRamch16
82% match
Loading thumbnail…

ICE4 HW_RAMAKANTH

This SVG smiley face, built with React and D3 v5, uses basic shapes to render a stylized portrait. The face features a brown circular head, two eyes with pupils, a purple nose, and a white mouth created using D3’s `arc` path generator. Rotated grey and blue eyebrow arcs, defined via `arc` and affected by `transform` rotations, sit above the eyes. A black path outlines simple hair. The code constructs the visualization using React's declarative JSX syntax within a ReactDOM-rendered SVG container.

RRamakanth771
80% match
Loading thumbnail…

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

A smiley face built with D3.js displays animated eyebrows that shift upward and downward in a looping two-second transition. The code selects an SVG element and constructs the face using D3 selections, appending circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `d3.arc` API for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group's transform offset. The example uses D3 v5 with SVG rendering and demonstrates basic DOM manipulation and animation for static, predefined geometry without external data.

Ssrinivasaraosankula
80% match
Loading thumbnail…

smile.js!

A smiley face with animated eyebrows demonstrates basic DOM manipulation and SVG rendering in D3.js v5. The visualization constructs a red circle with a blue stroke, two eyes, rectangular eyebrows, and an arc-based mouth using D3 selection and shape-generating functions. The eyebrows move up and down via chained `transition` calls over five-second durations, showcasing D3's ability to animate SVG attributes. The code directly selects the SVG element, appends groups, and applies transforms to position facial features.

AAbhinav-Mullapudi
79% match
Loading thumbnail…

D3 JS Face!

A smiley face rendered in SVG animates its eyebrows in a sequence of timed transitions. The face is drawn with D3.js primitives: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. The animation uses D3’s `.transition().duration()` to move the eyebrows up, hold, and return, demonstrating fundamental DOM manipulation with `d3.select` and element creation.

Ssushantkadam1
79% match
Loading thumbnail…

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

A smiley face built with D3.js animates by repeatedly moving its eyebrows up and down. The SVG canvas contains a red circle for the head, two smaller circles for eyes, and a path drawn with the `d3.arc()` function for the mouth. The animation uses chained `transition()` calls with a 2000-millisecond duration to shift the eyebrow group’s `transform` attribute. All shapes are appended and styled programmatically via D3’s selection methods, with dimensions derived from the SVG’s width and height attributes.

KKishoreKumar
79% match
Loading thumbnail…

Sharanya_11597311

This interactive smiley face visualization uses React to render a cartoon-like face composed of layered SVG shapes, including circles for the eyes, an arc-based mouth, and elliptical ears. The face is drawn using D3’s `arc()` generator for the mouth and eye/ear paths, while custom line elements create subtle facial details. The rendering relies on React 17, D3 v7, and SVG transforms to position each component around a central coordinate system. The design demonstrates how D3 geometry helpers can be combined with React’s declarative JSX markup to construct a playful, static illustration without external data.

SSharanyaSriram
79% match
Loading thumbnail…

Smiley face using D3

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation, with animated eyebrows that move up and down. The code draws yellow circles for the face and eyes, rectangles for eyebrows, and an arc-generated mouth, all positioned via D3 selections and transforms. A transition chain animates the eyebrow group’s vertical position over four one-second intervals, showcasing repeated attribute updates. The example relies on D3 v5’s `select`, `arc`, and `transition` APIs within a static SVG container.

AAyush Gupta
79% match