Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
TTrustPaul
Last edited May 9, 2021
Created on May 9, 2021

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.

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 Fork of Let's make a face with D3.js!

A yellow smiley face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The face consists of a large yellow circle for the head and two smaller black circles for eyes, all positioned using D3’s `select` and `append` methods with explicit `attr` calls for coordinates and styling. The code imports only `select` from D3’s module API, computes dimensions from the SVG element, and hardcodes eye spacing and offsets. No interactive or animated behavior is present, focusing purely on static shape construction.

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

This example creates a yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth centered within an SVG canvas. D3.js selections append SVG shapes and apply a two-second `transition` that moves the eyebrow group upward by 50 pixels and then back down, producing a repetitive animation. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition.attr` calls to alter the `transform` attribute, demonstrating fundamental DOM manipulation with version 5 of the library.

Ccharliemok
94% 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
94% 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, two eyes, a mouth drawn using the `d3.arc` function, and rectangular eyebrows are all appended to an SVG container. The eyebrows animate by moving up and down through a chained `transition` with `attr` changes, using a two-second duration for each movement. The code uses D3 v5’s `select` and `arc` methods, with the animation running once on load.

Llerik03
94% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face with yellow circular head, black-outlined eyes, and an arc-based mouth. Animation brings the face to life as the eyebrows, drawn as rectangles, move upward and downward through chained `transition().duration(2000)` calls on the group element containing them. The visualization uses D3 v7 with SVG output, constructing the face within a centered `<g>` group and positioning features relative to the viewport dimensions. The code explicitly imports `select` and `arc` from the D3 library, with the mouth path generated using `d3.arc()` with specified inner and outer radii and angle bounds.

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