Fork of Fork of Fork of d3js

100%

Fork of Fork of Fork of d3js

✓ Published0🌍 Public

Last edited Nov 20, 2022

Created on Nov 20, 2022

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

A D3.js visualization renders a yellow smiley face in SVG, centered within a 960 by 500 canvas. The face features a black-outlined circle, two eyes, and an arc-shaped mouth created using D3’s `arc()` generator. The code demonstrates fundamental DOM manipulation by using `d3.select` to target the existing SVG element, then appending groups and shapes with `append` and setting attributes like `r`, `cx`, and `transform`. The eyes are positioned via translation offsets, while the mouth’s path uses an inner and outer radius, with angles specified in radians to define the arc’s sweep.

Llizard1111

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

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

92% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth. The eyebrows animate by moving upward and then returning to their original position using chained `transition().duration(2000)` calls on a group element. The code uses D3 v5’s `select`, `append`, `attr`, and `transition` methods, along with the `arc` generator for the mouth path. All rendering occurs in an SVG canvas, with dimensions set to 960 by 500 pixels.

Cczhang746

92% match

Loading thumbnail…

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

A yellow smiley face, built from SVG shapes, demonstrates D3.js v5’s DOM manipulation and transition methods. The code appends a circle for the head, two for the eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The eyebrows animate by moving up and down via sequential `transition().duration()` calls on a group element. This example shows basic data-joins and attribute updates, with a static yellow face rendered in an SVG canvas.

SSANEEM MOHAMMAD

92% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face from SVG shapes, including two eyes, movable eyebrows, and an arc-based mouth. The face is centered within an 960×500 SVG canvas, with all elements grouped and positioned using D3’s `select`, `append`, and `attr` methods. The code uses D3’s `arc` generator to draw the mouth and manually sets coordinates for circles and rectangles to form the eyes and eyebrows. Static SVG rendering emphasizes programmatic shape creation rather than data binding or interaction.

AAbdouEnsaj

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

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

This example shows a friendly yellow smiley face rendered as an SVG, with eyes and a mouth drawn using D3 shapes. The face’s eyebrows animate by moving upward and then returning to their original position over two two-second transitions. Using d3.select and d3.arc, the code builds the circle, eye, eyebrow rectangles, and mouth path, then applies chained transition() calls to shift the eyebrow group’s transform attribute. The visualization runs in a 960×500 SVG canvas with no external data, relying entirely on hardcoded dimensions.

AAsmitha-Sa

92% match