Skip to main content
SimilarExport ZIP
100%

sad.js

✓ Published0🌍 Public
Ddharmithila2002@gmail.com
Last edited Oct 1, 2023
Created on Oct 1, 2023

A sad-faced emoticon rendered in SVG animates its eyebrows in a repeating cycle. D3 v7 selects the SVG element and constructs the face from circles, rectangles, and an arc-generated mouth. The code loads D3 via UNPKG and uses `select` and `arc` from the library. A `transition` with a two-second duration moves the eyebrows down and back up, creating the emotional expression.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

sad.js!

A sad yellow SVG face with black eyes and a frowning arc mouth animates its rectangular eyebrows up and down on a blank canvas. Built with D3 v7, the example loads the library via UNPKG and demonstrates importing `select` and `arc` from the `"d3"` module. The code creates circles, rectangles, and a path using SVG attributes, then applies chained `transition().duration(2000)` calls to move the eyebrow group’s transform.

Ddharmithila2002@gmail.com
93% match
Loading thumbnail…

sad emoji.js!

This example draws a sad emoji face using SVG primitives in D3 v7. A yellow circle forms the face, while circles, rectangles, and an arc path construct the eyes, eyebrows, and mouth. The eyebrows repeatedly animate upward and downward via chained `transition().duration(2000)` calls, creating an expressive, looping motion. The code imports `select` and `arc` from the D3 module and loads the library via UNPKG.

Ddharmithila2002@gmail.com
93% match
Loading thumbnail…

sad

This example draws a simple sad face in SVG using D3.js v7, depicting a yellow circle with eyes, eyebrows, and a frown-shaped arc mouth. The animation shows the eyebrows moving up and down repeatedly via chained `transition()` calls with duration and `.attr()` updates. The geometry is built with D3’s `arc` generator for the mouth and basic SVG shapes like `circle` and `rect`, all centered within a 960×500 viewport.

Ddharmithila2002@gmail.com
91% match
Loading thumbnail…

sad smile

A sad smiley face rendered in SVG shows a yellow circle with a frowning mouth and animated eyebrows. The eyebrows move down and back up repeatedly using chained D3 transitions over two seconds each. Built with React and D3 v7, the code uses D3’s `select`, `arc` for the mouth path, and geometric constants for eye and eyebrow placement. The animation runs on page load.

AAakash Santhosh Kumar
88% match
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
87% match
Loading thumbnail…

sad face

A yellow smiley face with animated eyebrows is displayed on a black background. Built with D3.js v5, the SVG face’s eyes and mouth are static, while the eyebrows alternate between two vertical positions over two seconds using chained `transition().attr()`. The rendering relies on SVG primitives like `circle`, `rect`, and `path` created via `d3.select` and `d3.arc`.

Iiamsrihari28
87% match
Loading thumbnail…

Sad Face

A stylized sad face rendered with D3 v5 draws a large orange circle for the head, adds elliptical eyes with white highlights, and forms a nose using the `d3.arc` path generator. The shape includes a small mouth ellipse, and the eyes animate through a chained `transition` with specified delays and durations, shifting positions before returning. The SVG elements are grouped and positioned within a 900x700 canvas, with the entire face translated upward. This example demonstrates basic SVG shape creation and declarative animation sequencing in D3.

NNita
86% match
Loading thumbnail…

Sad smiley face with D3.js

A sad smiley face is drawn in an SVG canvas using D3.js v5. The code builds the face from primitives: a blue circle for the head, two black circles for the eyes, and an arc path for the mouth. The `arc()` API generates the mouth’s path with specified inner and outer radii and angle ranges, while transforms position the eyes and mouth relative to the canvas center. The SVG is selected via `d3.select`, and attributes like coordinates and radii are set with `.attr`.

Aabdulmoin9624
86% match