Fork of Lets Make a Face

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

This example displays a simple cartoon face composed of SVG shapes, centered on a yellow circle with two eyes and an arc-based mouth. The face group is positioned using a transform, and the right eye animates downward over two seconds via a D3 transition. The code uses d3.arc to generate the mouth path and d3 selection/transition methods (transition.attr) to modify attributes, with the SVG drawn directly in the browser. It forks an existing "Let's make a face" example, adapting it for D3 v5.

Hhuizrh

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 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!

This example demonstrates how to construct an animated face using SVG elements and D3.js v5. The visualization builds a face from basic geometric shapes, applying custom styling through CSS classes that define stroke colors and line properties. The code initializes an SVG canvas with fixed dimensions and relies on D3’s selection and data-binding methods to render the face components. The design emphasizes round line joins and caps for a smooth, illustrated appearance, with a compact layout that avoids page scrolling.

CChromosin13

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

This example shows a simple animated face built with SVG, featuring yellow circular head, white eyes with black pupils, and a mouth drawn as an arc path. The code uses d3-selection to append elements and d3-shape’s `arc` generator to create the mouth. Eyebrows are rectangles that animate by chaining `transition().duration(2000)` calls, moving their group up and down via `attr('transform')`. The face is centered using a `g` element translated to the SVG’s midpoint, with coordinates derived from the SVG’s height and width attributes.

TTejaswicmandava

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

This example renders a cartoon face built from SVG shapes, including a pink circle for the head, two eyes, rectangular eyebrows, and a mouth created with a d3.arc path. The eyebrows animate upward and back down over four seconds using chained d3.transition calls with a two-second duration each. The code uses D3 v5 selection methods like `select`, `append`, and `attr`, with layout driven by hardcoded values for spacing and radius, and all shapes are centered within a 960 by 500 SVG using a group translation.

AArruSkywalker

Fork of Lets make a face

This example shows a simple yellow cartoon face with eyes, eyebrows, and a mouth, built entirely with D3.js v6 and rendered as SVG. The eyebrows animate by moving up and down repeatedly over two-second transitions. The face is centered using a group translation, and the mouth is drawn with the `d3.arc` path generator. The code uses `select` and `arc` from the D3 library, with hardcoded dimensions for spacing and radius, displaying a looping motion without any external data source.

EEsteLima

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

A D3.js face is drawn with SVG shapes, featuring black circular eyes, a red mouth created with an arc generator, and eyebrows rendered as rectangles. The animated eyebrows shift downward and return via chained `transition()...duration()` calls, demonstrating movement within the SVG canvas. Built with D3 v6 selections, the code uses `d3.arc()` for the mouth path and manipulates SVG attributes like `cx`, `r`, and `transform` to position elements relative to the viewport center.

AAvonlea Fisher