Skip to main content
SimilarExport ZIP
100%

Angry Emoji

✓ Published1🌍 Public
NNaveenaS12
Last edited Aug 5, 2020
Created on Aug 4, 2020

A red emoji face with black eyes, angled eyebrows, and a curved mouth demonstrates basic DOM manipulation in D3.js v5. The SVG elements are selected via `d3.select` and positioned using translation transforms. The eyebrows animate by chaining `transition().duration(2000)` calls, moving them down and up repeatedly. The code uses ES6 imports (`select`, `arc`) and raw SVG attributes like `attr('d')` for the mouth path. A solid blue background is set via inline CSS styling.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Angry Emoji

A smiley face drawn with D3.js shifts its expression to anger as its eyebrows animate downward, using a bouncing transition sequence. The SVG graphic features a red circle, two eyes, thick black eyebrow lines, and a curved mouth, all positioned with computed transforms. The code imports `select` and `arc` from D3 v5, though the mouth is actually a custom path, and animates the eyebrow group's vertical position with chained `transition().duration()` calls. The background is styled via inline SVG attributes and a separate CSS file.

0007ebey
94% match
Loading thumbnail…

Angry Face

A stylized angry face built with React and D3 v7 rendered as SVG. D3’s `arc` generator creates the frown-shaped mouth, while React elements define the red circular head, black stroke, angled eyebrows, and pink blush details. The face is centered using SVG groups and transforms, with all geometry computed from fixed constants rather than external data.

Bbenpedroscott
82% match
Loading thumbnail…

Angry Face

A pink angry face is drawn as an SVG graphic centered on a 960-by-500 canvas. The face uses a large circle for the head, ellipses for eyes, and an arc to create a frown, while red cubic Bézier paths form slanted eyebrows. The visualization is built with React, rendering SVG elements, and relies on the `arc` generator from D3 v5 to compute the mouth shape. Static, hardcoded coordinates define each facial feature.

Gguangxinhu
81% match
Loading thumbnail…

Angry Red Metal Face

This example shows a stylized angry face rendered as an SVG, with two eyes and a curved mouth on a red circular head. D3.js v5 manipulates the DOM by selecting the SVG element and appending grouped shapes, including circles for the face and eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` API for the mouth. The code uses explicit attribute setters like `.attr()` to position and style each element, creating a static, geometric portrait.

Ssyedhaliz
81% 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
80% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with D3.js demonstrates basic DOM manipulation. The SVG face has blue circular head, green eyes, and an arc-based mouth, with rectangular eyebrows that animate up and down using chained `transition` calls. The code uses d3.select to target the SVG, d3.arc to generate the mouth path, and attribute methods like `.attr` to position elements. Eyebrow movement is achieved through sequential `.transition().duration()` operations that translate the eyebrow group vertically.

DDaniel Piqué
80% match
Loading thumbnail…

Let's make a face with D3.js!

A red D3.js smiley face is rendered in an SVG, with animated eyebrows that move to change its expression. The example demonstrates fundamental DOM manipulation by using `d3.select` to style the SVG background and dynamically update facial features. Built with D3 v5, the code relies on standard selection and attribute methods to drive the interactive animation, showing how to bind data to visual elements and create a playful, state-based face.

TTheRoadSign
79% match
Loading thumbnail…

Angry Circles

Two colorful cartoon faces, one circular and one rectangular, animate through angry expressions on an SVG canvas. The circular blue face turns red while its eyes shrink, eyebrows rotate, and mouth expands; the yellow face becomes green with rotating eyebrows and flipping mouth. Built with D3 v5, the visualization uses chained transitions with varying durations to animate shapes, positions, and rotations. The code imports custom modules and relies on D3's selection and transition methods to coordinate the parallel animations across both faces.

Ffloresh
79% match