Sad smiley face with D3.js

100%

Sad smiley face with D3.js

✓ Published2🌍 Public

Last edited Feb 20, 2022

Created on Feb 20, 2022

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.

AI-generated description

ICE - 4 Introduction to VizHub and make a face in D3.js

MIT Licensed

Similar vizzes

Loading thumbnail…

Sad smiley face with D3.js

Aabdulmoin9624

100% 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

95% 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

94% match

Loading thumbnail…

Sad smiley face with D3.js

Aabdulmoin9624

94% 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

92% 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

90% match

Loading thumbnail…

smile sad

This example renders a yellow, black-outlined smiley face using D3.js version 7, loaded via UNPKG. The face is composed of circles for the eyes and a path built with the `arc` function for the mouth. An animated sequence uses chained `transition()` calls with a 2-second duration to move the eyebrows down and then back up, creating a toggle between a sad and happy expression. The SVG output is centered within a 960 by 500 canvas.

LLogeshwaran104

89% match

Loading thumbnail…

smiley face with D3.js

This example draws a smiley face entirely with SVG shapes using D3.js v7. It creates a yellow circle for the head, two black circles for the eyes, and a mouth generated with the `d3.arc` shape generator. The arc uses `innerRadius`, `outerRadius`, and angular start/end values to form a crescent-like smile. All shapes are positioned relative to the SVG's width and height attributes, with the mouth translated to the center of the canvas.

GGreatGayatri

89% match