Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
GGuilherme Caeiro
Last edited Jan 5, 2021
Created on Jan 5, 2021

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This example creates a smiley face with movable eyebrows using D3.js, demonstrating fundamental DOM manipulation with SVG. The face is drawn with a yellow circle for the head, black eyes, and a mouth shaped as an arc via the `arc` generator. The code uses D3 selections and attribute setters to position elements relative to the center of the SVG canvas, with dimensions defined in the HTML. The visualization shows a static face without interaction, as the code only sets initial positions and styles, relying on D3 v5’s `select` and `arc` APIs to construct the SVG structure.

YYashwanth0311
95% match
Loading thumbnail…

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

This example shows a simple smiley face drawn on an SVG canvas, with yellow circular head and black outline. The code demonstrates fundamental DOM manipulation with D3.js by appending a circle element to an existing SVG. Using d3.select and append, the example sets the circle’s radius, center coordinates, fill, and stroke attributes. The face is static; the title mentions moving eyebrows, but the JavaScript only renders the circle, leaving facial features absent. The implementation relies on D3 v5 and SVG rendering, with no data binding or animation.

SShengHao-Shi
95% match
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
95% match
Loading thumbnail…

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

A yellow smiley face rendered in SVG demonstrates fundamental D3.js DOM manipulation, with black circular eyes positioned via `d3.select` and SVG attributes. The mouth is drawn using the `d3.arc` shape generator, which creates a crescent path based on inner and outer radii and start/end angles. The example loads D3 v5 from a CDN and uses plain attribute setters like `.attr` to construct the face dynamically. Though the README mentions animated eyebrows, the code shown in `index.js` does not implement any movement or interaction, focusing solely on static shape creation.

Ccelesteleclezio
95% match
Loading thumbnail…

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

This example shows a yellow smiley face built entirely with D3.js v5, featuring two eyes and a curved mouth drawn with an arc path. The face’s eyebrows, rendered as rectangles, animate up and down repeatedly over two-second intervals using chained `transition().duration()` calls. The code uses D3 selections to append SVG elements, `d3.arc` for the mouth, and attribute manipulation to position the facial features relative to the SVG's center. All rendering occurs in an inline SVG with CSS hiding page overflow.

JJenifer Vivar
95% match
Loading thumbnail…

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. A yellow circle forms the head, with two eyes and a mouth drawn using an arc path. The eyebrows, rendered as rectangles, animate upward and then back down through chained `transition().duration()` calls. The code imports `select` and `arc` from D3 v5, uses SVG elements for rendering, and relies on data-driven attributes to position features relative to the viewport dimensions.

RRadhika Ganapathy
95% match
Loading thumbnail…

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

This example demonstrates how to construct a simple smiley face using D3.js, starting with a yellow circle for the head and two smaller black circles for the eyes. A quadratic Bézier path, defined using the `d` attribute with values like `M70,120 Q100,145 130,120`, draws the mouth. The code relies on D3’s `select` and `append` methods to manipulate the SVG elements directly, setting attributes for position, radius, fill, and stroke. It shows fundamental DOM manipulation with D3’s v5 API, using a blank SVG canvas with 960 by 500 pixels as the rendering surface.

Nnpk2001
95% match
Loading thumbnail…

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

This example creates a yellow smiley face by drawing circles with D3.js onto an SVG canvas. The face features two black eyes and a mouth formed using D3's `arc` shape generator, which defines the path as a semi-circular stroke. It demonstrates fundamental DOM manipulation by selecting the SVG element with `d3.select` and appending shapes with chained `.attr` methods. The code also uses a `g` group element with a translate transform to position the facial features relative to the canvas center.

TTrustPaul
95% match