Skip to main content
SimilarExport ZIP
100%

Karthik Rachamalli Smiley Viz

✓ Published1🌍 Public
KkarthikRachamalli1995
Last edited Feb 19, 2023
Created on Feb 17, 2023

This example shows a cartoon smiley face with hair, ears, shoulders, a neck chain, and a hat, rendered in SVG with an animated bouncing motion on the hat. It demonstrates fundamental DOM manipulation by building the face from basic shapes like circles, ellipses, and arcs, using D3.js selection and the `arc` API. The hat transitions smoothly using `transition().duration()`, while other static elements are styled with fill colors and strokes. The code explicitly creates each shape via `svg.append()` and sets attributes such as `cx`, `cy`, `r`, and `d`, relying on d3.v5.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose shades and hat are moved along with a wishing text coming out of the mouth.

MIT Licensed

Similar vizzes

Loading thumbnail…

11506566 - Smiley face

A cartoon smiley face with animated eyebrows and a mustache, beard, ears, teeth, and hair is rendered in SVG. The face is constructed using D3 selections and shape generators, including `arc` for the mouth and `line` with `d3.curveBasisClosed` for the mustache and beard. Eyebrows animate via chained `transition().duration(2000)` calls that move them up and down. The example demonstrates fundamental DOM manipulation with D3 v5, building all elements from hardcoded coordinates and attributes rather than external data.

EEshwarreddyt
82% 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
80% match
Loading thumbnail…

Smiley

This example renders a smiley face in SVG using D3.v5. Two black circles form the eyes, and a yellow circle with a black stroke is the face. The mouth is drawn with a D3 `arc` generator, creating a partial ring path. The code relies on D3's `select` and `arc` functions, and the SVG dimensions come from the `width` and `height` attributes. All shapes are appended directly to the SVG canvas.

KKrishu
80% match
Loading thumbnail…

Smiley

This example renders a smiley face in SVG using D3.v5. Two black circles form the eyes, and a yellow circle with a black stroke is the face. The mouth is drawn with a D3 `arc` generator, creating a partial ring path. The code relies on D3's `select` and `arc` functions, and the SVG dimensions come from the `width` and `height` attributes. All shapes are appended directly to the SVG canvas.

KKrishu
80% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black circular eyes, rectangular eyebrows, and an arc-based mouth is rendered entirely in SVG. The example demonstrates fundamental DOM manipulation and animation with D3 v5, using `d3.select`, `d3.append`, and `d3.arc` to generate the facial features. Eyebrows animate via chained `transition` calls that move their group vertically over two seconds, then return. The face is centered using an SVG `<g>` element with a computed translation, and all geometric values are defined as named constants for clarity.

KKarthik Kunala Venu
80% match
Loading thumbnail…

Let's make a face with D3_Nithish.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face. The face consists of SVG shapes—a green circle head, two eyes, eyebrows, and a mouth created with the `d3.arc` path generator. The code uses `d3.select` and `d3.append` to construct the elements, and `transition` with a 2000-millisecond duration to make the eyebrows move up and down repeatedly. The rendering approach relies on D3 v5’s selection and transition methods on SVG elements, with the face centered using an SVG `transform` translate.

GGroup 17
80% match
Loading thumbnail…

smile face emoji

A smiley face emoji rendered with SVG elements—circles for the face and eyes, rectangles for the eyebrows, and a path for the mouth—drawn using D3.js select and append operations on a centered group. The eyebrows animate upward via a two-second `transition` on the group's transform attribute, while the mouth is created using the `d3.arc` function with an inner and outer radius. This example demonstrates fundamental DOM manipulation and basic shape construction with D3 v5.

TTharun Reddy
80% match
Loading thumbnail…

Let's make a smiley

This example demonstrates fundamental DOM manipulation by constructing an animated smiley face. A circle forms the head, with smaller circles for eyes and rectangles for eyebrows, while an arc path creates the mouth. The eyebrows animate vertically using chained `transition().duration()` calls on a group element. Built with D3 v5, it uses `select`, `append`, and `attr` to position SVG shapes relative to a centered group, with a static background color set via inline styles.

SSrishti2398
79% match