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

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

A yellow cartoon face rendered with SVG shapes animates its eyebrows up and down. The code builds the face from concentric circles for the head, eyes, and mouth using D3 selections and an arc generator. D3 transitions with a two-second duration repeatedly move the eyebrow group vertically, creating a looping expression. The example is implemented with D3 v5, drawing directly to an SVG canvas within a 960 by 500 pixel viewport.

AAmrit Adhikari

Fork of Lets make a face with D3 js!

This example animates a simple cartoon face made of SVG shapes, including a yellow circle head, eyes, eyebrows, and a mouth drawn with an arc. The eyebrows move up and down repeatedly using chained D3 transitions that modify their transform attribute over two-second intervals. The visualization uses D3 v6 selection methods like `select` and `append`, along with the `arc` generator for the mouth path, all rendered inside a React project on a 960×500 SVG canvas.

KK V VINITHA

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

This visualization builds a smiling face from basic SVG shapes using D3.js v5. The code appends a yellow circle for the face, two eyes, and a mouth path generated with the `d3.arc` function, all centered via a group transformation. It demonstrates animated DOM manipulation by applying a looping `transition` with a 2-second duration to the eyebrows group, moving it up and down. The example uses `d3.select`, `d3.append`, and attribute setters like `.attr` to construct the scene, with styles handled in an external stylesheet.

Rrohitchavan007

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

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

A yellow circle with black outlines becomes a cartoon face, complete with eyes, eyebrows, and a curved mouth. The eyebrows animate downward and back upward over two seconds each, repeating the motion. Built with D3 v5, the SVG is rendered using `select`, `arc`, and `transition` calls, with circles for eyes and a path generated by `d3.arc` for the mouth.

Ddr_nareshvet@yahoo.in

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

Ddr_nareshvet@yahoo.in

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

This example builds a smiling yellow face using D3.js v5, drawing the head, eyes, and mouth as SVG shapes positioned with a centered group transform. The code uses `d3.select`, `d3.arc` for the mouth path, and property setters like `attr` for circles and rectangles. A chained `transition` with a 2-second duration animates the eyebrows upward and back down, creating a repeated eyebrow-raising motion. The face is rendered entirely with SVG elements, with no external data source, and uses a fixed 960×500 viewport.

VVishakha Routra

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

This example builds a smiling face from basic SVG shapes using D3.js v5, with a yellow circle for the head, black circles for eyes, a curved path for the mouth, and rectangular eyebrows. The eyebrows animate by transitioning the eyebrow group’s translate attribute in two successive two-second intervals, moving them upward and then back down. The code uses D3’s `select`, `arc`, and `transition` APIs, and renders everything to SVG within a fixed 960×500 viewport. No external data is loaded; all geometry is defined directly in the script.

Ssandeepss2020