Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Llizard1111
Last edited Aug 7, 2023
Created on Aug 7, 2023

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.

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!

A yellow smiley face is drawn in an SVG canvas, featuring two eyes and a mouth created with D3.js's `select` and `arc` functions. The face centers on a group, with circles for the eyes and a path for the smiling mouth. Eyebrows, rendered as rectangles, animate vertically over two seconds using chained `transition` calls, moving up and then back down. The SVG dimensions are read from the element, and all shapes are styled with fills and strokes.

Ggunasindhuja
96% 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
95% match
Loading thumbnail…

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

A smiley face built with SVG and animated with D3.js demonstrates fundamental DOM manipulation. Yellow circular head, two eyes, rectangular eyebrows, and a curved mouth are created using D3 selections and the `d3.arc` path generator. The eyebrows repeatedly move up and down via chained `transition` calls, each lasting two seconds. The code uses D3 v5, imports `select` and `arc` from the library, and renders entirely in SVG without external data.

Vvram80
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 yellow smiley face with black outlines is rendered in SVG, featuring two eyes, animated eyebrows, and a mouth. The eyebrows transition vertically between two positions over three seconds. D3 v5 selections, `arc` for the mouth path, and chained `transition` calls manage the animation. The face is centered within a 960×500 SVG canvas using a transform.

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

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

This example demonstrates fundamental D3.js DOM manipulation by constructing a yellow smiley face from SVG shapes. The code uses the `arc` generator for the mouth and appends circles for the eyes. Two rectangular eyebrows repeatedly animate upward and downward using chained `transition` calls, each lasting two seconds. The visualization renders entirely in SVG via D3 v5, with the face centered in a 960×500 viewport.

VVighnesh Gawad
95% match
Loading thumbnail…

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

A yellow smiley face is drawn with SVG shapes created using D3.js, featuring a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and animation through chained `transition().duration()` calls that move the eyebrows up and down in a repeating loop. Built with D3 v5, the example imports `select` and `arc` from the D3 module, positions elements using SVG attributes, and runs entirely in the browser with inline JavaScript.

Ssd2beatles
95% match