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

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

A stylized, animated face rendered in SVG with D3.js v5. The face is built from primitive shapes—a yellow circle for the head, black circles for eyes, and an orange arc for a mouth—all centered within a 960x500 canvas. The animation is driven by D3's transition system, which moves the eyebrows upward and back over two seconds each. The code demonstrates modular imports from `d3`, including `select` and `arc`, and uses `arc()` to generate the mouth path with specified inner and outer radii and angular extents.

Jjlspangl

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

A D3.js animation builds a smiling face from SVG primitives, with eyebrows that repeatedly shift up and down over two-second intervals. The code uses `d3.select` and `d3.append` to construct the face, and the `d3.arc()` API generates the mouth as an annular sector. The eyebrows animate via chained `transition().duration(2000)` calls on an SVG group, demonstrating fundamental DOM manipulation and animated attribute updates within an SVG canvas.

HHarishma Nallala

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

A yellow circle face with black eyes, eyebrows, and a mouth is drawn in SVG using D3 v6. The mouth is generated with the `arc` generator, while the eyes and eyebrows are circles and rectangles. Eyebrows animate vertically via chained `transition().duration()` calls, moving down and then back up, using D3's selection and transition methods.

SSerena Fang

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

A yellow SVG face is drawn with D3.js v5, featuring two large eyes and an open mouth rendered as an arc path. The face uses `d3.select` and `d3.arc` to construct the shapes on an SVG canvas. The code includes a commented-out animated eyebrow section that would use `transition` to move eyebrows up and down, though the active version shows only static features. All elements are positioned using SVG transform attributes, with the face centered on a 960×500 viewport.

Jjlspangl

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

A smiling cartoon face is drawn with SVG shapes, including a yellow circle for the head, black circles for eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate upward and back downward over four seconds using chained D3 transitions. The code uses d3-selection to append elements to an SVG canvas and d3-shape’s `arc()` function to generate the mouth path. The face is centered via a group transformation, with eye spacing and offsets defined as constants.

AAdam Usmani

Kkshravyak.2001@gmail.com

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

A simple SVG face built with D3.js v5 animates its eyebrows in a looping transition. The face comprises circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth, all centered via a translated group. D3's `select`, `arc`, and chained `transition` methods drive the rendering and the two-second eyebrow raise-and-lower cycle. The example demonstrates basic SVG shape construction and declarative animation without external data.

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

This example draws a cartoon face in SVG using D3 version 5. It builds the head, eyes, eyebrows, and mouth from primitive shapes, positioning them with coordinate math and an SVG transform. The code uses D3’s `select` to target the element, `arc` to generate the mouth path, and a chained `transition()` call to animate the eyebrows up and down over two seconds. A yellow circle, black eye circles, and gray eyebrow rectangles are styled via attributes.

Jjlspangl

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

A friendly face built from SVG shapes—yellow circle head, black eyes, eyebrows, and an arc mouth—is centered in a 960×500 viewport. Using D3 v6, the visualization animates the eyebrows downward and back upward over two seconds via chained `transition()` calls on a `<g>` group. The code constructs shapes with primitive SVG elements and a D3 arc generator for the mouth, demonstrating basic selection, attribute binding, and transform animation without external data.

Yyingzhe-z