Skip to main content
SimilarExport ZIP
100%

sad

✓ Published0🌍 Public
Ddharmithila2002@gmail.com
Last edited Sep 22, 2023
Created on Sep 22, 2023

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.

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
94% 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
92% match
Loading thumbnail…

sad.js

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.

Ddharmithila2002@gmail.com
91% 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
90% match
Loading thumbnail…

Sad smiley face with D3.js

This example shows a simple, static sad smiley face rendered as a yellow circle with black eyes and a downward-curving arc for a mouth, all drawn in SVG. The face is centered in a 960×500 viewport, with the eyes and mouth positioned using translate transforms. Built with D3 v5, the code uses `d3.select` to target the SVG and `d3.arc` to generate the mouth path, while circle elements are appended directly for the head and eyes. No animation or interaction occurs; the visual is purely geometric.

Aabdulmoin9624
90% 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
89% match
Loading thumbnail…

Sad smiley face with D3.js

A yellow circle with black outlines forms a sad smiley face, its mouth rendered as an inverted arc and eyes positioned with a fixed offset. The example demonstrates basic D3.js v5 shape generation and SVG manipulation, using `d3.select` to target the SVG element and `d3.arc` to construct the downward-curved mouth path. All facial features are centered via group transformations, with dimensions derived from the SVG's width and height attributes.

Aabdulmoin9624
88% match
Loading thumbnail…

Sad smiley face with D3.js

A yellow circle with black outlines forms a sad smiley face, its mouth rendered as an inverted arc and eyes positioned with a fixed offset. The example demonstrates basic D3.js v5 shape generation and SVG manipulation, using `d3.select` to target the SVG element and `d3.arc` to construct the downward-curved mouth path. All facial features are centered via group transformations, with dimensions derived from the SVG's width and height attributes.

Aabdulmoin9624
88% match