Fork of Sad smiley face with D3.js

100%

Fork of Sad smiley face with D3.js

✓ Published0🌍 Public

Last edited Sep 22, 2023

Created on Sep 22, 2023

A fork of the Sad smiley face with D3.js example renders a yellow circle face with two eyes and a sad, downward-curved mouth as an SVG. The code uses D3 v5's `select` and `arc` APIs to build the shapes, positioning the face elements relative to the center of an 960×500 SVG canvas. The mouth is drawn as an arc path with specified inner and outer radii and angles, while the eyes and face are simple circles with fixed offsets. All styling is handled via inline attributes and a minimal external stylesheet.

AI-generated description

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

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Fork of Fork of Fork of d3js

This example renders a simple yellow smiley face using SVG elements created with D3 v5. The visualization shows a large circle for the face, two smaller black circles for eyes, and an arc path for the mouth, all positioned within an 960×500 SVG canvas. The code uses D3’s `select` and `arc` APIs, along with standard SVG attributes like `attr("r")`, `attr("cx")`, and `attr("cy")`, to construct the shapes. The mouth is generated via the `arc()` generator with specified inner and outer radii and angular extents.

Ssgm202

91% match

Loading thumbnail…

Fork of Create a face with d3.js!

A yellow smiley face is drawn in SVG with circular eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows animate up and down via chained `transition` calls on a `g` element. Built with D3 v7, the visualization uses `select`, `attr`, and `arc` from the D3 library, with coordinates computed relative to the SVG’s center. The face is rendered on a 960×500 canvas using hard-coded dimensions and no external data source.

LLohieth R

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

89% match

Loading thumbnail…

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

This example shows a yellow smiley face with two eyes, eyebrows, and a curved mouth, all rendered as SVG elements. The face is centered and drawn using D3 v5’s `select`, `arc`, and geometric shape methods. A transition animates the eyebrows by shifting them upward on load before returning them to their original position. The design mirrors a classic smiley icon, with the mouth created from an arc path and the eyes and head as circles.

RRayed12

89% match

Loading thumbnail…

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

This example shows a yellow smiley face drawn as SVG, with black eyes and an arc-shaped mouth, while the eyebrows are not yet implemented. The code uses D3.js v5 selections to append and position the face elements, including `circle` for the head and eyes and a `path` generated with the `d3.arc` shape generator. The SVG canvas is 960 by 500 pixels, and the layout centers the face using fixed pixel offsets for the eyes and mouth. The example demonstrates fundamental DOM manipulation through D3’s declarative chaining of `.attr()` calls.

GGuilherme Caeiro

89% match

Loading thumbnail…

Fork of D3-1: Making a face

This example uses D3.js v7 to draw a simple sad face as an SVG graphic. It renders a yellow circle for the face, two blue circles for the eyes, a black quadratic curve for the mouth, and two smaller blue dots for tears, all positioned relative to the SVG’s width and height. The code uses `d3.select` to target the SVG element and chain `.append`, `.attr`, and method calls to construct the shapes. No external data is loaded; all geometric values are computed from the hardcoded dimensions.

Gganesha2208

89% match

Loading thumbnail…

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

This example uses D3.js v5 to construct a static smiley face from SVG primitives. It draws a yellow circle for the head, two smaller circles for eyes, rectangular eyebrows, and a path-based mouth arc. The visualization demonstrates fundamental DOM manipulation by appending and positioning graphical elements with methods like `select`, `append`, and `attr` on an SVG canvas. The eyebrows are positioned but do not animate in the provided code.

RRadha246

89% match