Skip to main content
SimilarExport ZIP
100%

Naveen Angry

✓ Published0🌍 Public
Nnishanthh19
Last edited Sep 22, 2023
Created on Sep 22, 2023
Forked from Angry Emoji

A black SVG face with red fill and thick black outlines displays a shifting expression. D3.js functions such as `select`, `append`, and `attr` construct the circular head, eyes, and mouth. An animated transition, using `.transition()`, repeatedly moves the eyebrows up and down, creating an angry, frowning effect. The face is centered via SVG transforms, with all elements drawn directly using D3's DOM manipulation.

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 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.

NNaveenaS12
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
78% match
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
78% 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
77% 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
77% match
Loading thumbnail…

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

A green SVG smiley face is drawn using D3.js v5, with a circular head, two eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows continuously move up and down via chained `transition()` calls with a 2000-millisecond duration. The face is centered using an SVG `<g>` element transformed by the width and height of the `<svg>` container. The code uses D3's `select` and `arc` functions to construct the shapes and animate them.

GGroup 17
77% match
Loading thumbnail…

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

A green SVG smiley face is drawn using D3.js v5, with a circular head, two eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows continuously move up and down via chained `transition()` calls with a 2000-millisecond duration. The face is centered using an SVG `<g>` element transformed by the width and height of the `<svg>` container. The code uses D3's `select` and `arc` functions to construct the shapes and animate them.

GGroup 17
77% 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
77% match