Fork of Smily to Sad Face

100%

Fork of Smily to Sad Face

✓ Published0🌍 Public

Ppursho1999

Last edited Oct 9, 2023

Created on Oct 9, 2023

A yellow smiley face with black facial features animates its eyebrows up and down, shifting between a smiling and sad expression. The example demonstrates fundamental SVG manipulation with D3.js, using `d3.select` and `d3.arc` to construct the head and mouth. Eyebrow movement is achieved through chained `transition` calls with a 2000-millisecond duration, while circles and rectangles form the eyes and brows within nested groups. The rendering relies on an SVG container and D3 v5.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Smily to Sad Face

A yellow smiley face rendered in SVG with D3 v5 animates its eyebrows to shift between smiling and sad expressions. The face is built from circles for the eyes, rectangles for the eyebrows, and a path generated with the d3 `arc` helper for the mouth. A chained `transition().duration(2000)` moves the eyebrow group vertically over two seconds, then returns it, creating a looping mood change. The code uses `select`, `attr`, and `append` utilities for DOM manipulation.

Ppursho1999

93% match

Loading thumbnail…

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

91% match

Loading thumbnail…

Fork of Sad smiley face with D3.js

This example shows a simple sad smiley face rendered as a yellow circle with black stroke, two eyes, and a downward-curving mouth created using an SVG arc path. The face is centered in a 960×500 SVG canvas using a group translation. The code uses D3 v5’s `select` and `arc` APIs to build the shapes, with static numeric constants controlling eye offsets, radii, and mouth angles. All elements are drawn directly as SVG nodes, with styling handled by an external stylesheet. The visualization is purely declarative with no data binding or interaction.

Tthatsbipasha

91% match

Loading thumbnail…

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

This example shows a yellow smiley face rendered in SVG, with its eyebrows animating up and down repeatedly. The face is drawn using D3.js v5, building circles, rectangles, and a mouth path through basic DOM selection and appending. Eyebrow movement is achieved with chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports `select` and `arc` from D3, computes layout from the SVG’s dimensions, and uses inline attribute settings for styling and positioning.

117761A04F1

90% match

Loading thumbnail…

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

A yellow smiley face built with SVG and animated with D3 v5 demonstrates fundamental DOM manipulation. The code uses `d3.select`, `append`, and `attr` to construct circles for the face and eyes, rectangles for the eyebrows, and a `d3.arc` path for the mouth. A chained `transition().duration(2000)` moves the eyebrow group up and down in a looping motion, while the iris and additional features remain static. The example relies on SVG attributes and D3’s enter/update/exit-free imperative style, with no external data source.

SSANEEM MOHAMMAD

90% match

Loading thumbnail…

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

This visualization demonstrates a yellow smiley face built with D3.js, featuring two eyes and a curved mouth created using an SVG path with the d3.arc() API. The face’s eyebrows, rendered as rectangles, move vertically through a chained transition that animates their transform attribute up and down over two-second intervals. The code uses d3.select and d3.arc from the D3 v5 library to construct the SVG elements, with eyebrows shifting smoothly via transition.duration, while the static face parts remain fixed on a 960×500 canvas.

SSadafNaseem

90% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in SVG using D3.js v5. The code uses `d3.select` and `d3.append` to build circles for the eyes, rectangles for the eyebrows, and a path generated with `d3.arc` for the mouth. Eyebrow movement is achieved through chained `transition().duration()` calls that shift the group’s transform. The example demonstrates fundamental DOM manipulation and transition sequencing with D3.

Ssugunagar

90% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in SVG using D3 v5. The code builds the face from primitive shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—all positioned relative to a centered group. D3's `transition()` and `duration()` methods repeatedly shift the eyebrow group up and down over two-second intervals, creating a continuous bobbing motion. The example demonstrates core D3 selections and DOM manipulation without external data, relying solely on hardcoded dimensions and the `arc()` helper for the mouth shape.

SSnapika

90% match