Crying Emoji with D3.js

Fork of crying face

This example renders a cartoon crying face entirely with SVG shapes, including a yellow head, eyes, eyebrows, and a frowning mouth. The animation makes the eyebrows move downward and back upward in a repeating cycle using D3’s `transition` API, creating a distressed or crying expression. The code uses `d3.select` to access the SVG, `d3.arc` to draw the mouth as a curved path, and leverages the React framework for structure. The face is built from basic geometric elements, with the tears represented as small blue circles.

PPatilShruti20

Fork of crying face

PPatilShruti20

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

A sad smiley face drawn entirely with SVG shapes demonstrates basic D3.js DOM manipulation and animation. The code uses `select` to target the SVG element and `append` to create a yellow circle, eyes, and rectangular eyebrows. A `transition().duration()` sequence moves the eyebrow group down and back, creating a repeated frowning motion. The mouth is generated using the `arc()` generator from D3's shape module with specified inner and outer radii and angle values.

UUpamanyu-ml

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

This example creates a smiley face in an SVG canvas, with animated eyebrows that move to express different emotions. It demonstrates fundamental DOM manipulation and data binding using D3.js v5, specifically leveraging the `select` method to target SVG elements and update their attributes. The face is constructed entirely in code rather than from external data, and the animation is achieved by repeatedly setting position attributes on the eyebrow shapes.

Ggabcee

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

This example demonstrates how to build an interactive smiley face with D3.js, featuring eyebrows that shift position. The face is rendered as SVG elements, including a green circle for the head, yellow stroke, eyes, and a mouth created using the `d3.arc()` path generator. The code uses `d3.select` to manipulate the DOM, appending groups and shapes with attributes like `cx`, `cy`, and `r`, while positioning elements via transforms. The animation of the eyebrows is implied through the use of adjustable constants like `eyebrowYOffset`.

Ssaisreearibandi

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

This example uses D3.js to construct an animated smiley face from basic SVG shapes—a yellow circle for the head, separate circles for the eyes, rectangles for eyebrows, and a curved arc for the mouth. The eyes and mouth are static, while the eyebrows perform a looping transition that moves them up and down over two seconds each way. The code demonstrates fundamental DOM manipulation with `d3.select` and `d3.append`, and uses `d3.arc` to generate the mouth’s path, with `transition().duration()` controlling the animation.

Aasowmyasri15@gmail.com

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

Aasowmyasri15@gmail.com

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

This example displays a stylized smiley face drawn on an SVG canvas, with eyebrows that animate in a repeating up-and-down motion. Built using D3.js v5, the code constructs the face by appending circle, rect, and path elements to an SVG group, and drives the animation with the `transition` API to move the eyebrow group’s `transform` attribute over two-second intervals. The mouth is rendered using the `arc` generator from d3, specifying inner and outer radii and angle parameters.

NNYCUBK201