Fork of Create a face with d3.js!

Fork of Create a face with d3.js!

A yellow circle forms a smiling face with two eyes, eyebrows, and an arc-shaped mouth built from SVG shapes. The eyebrows animate upward and back down over two seconds using chained D3 transitions. The example imports `select` and `arc` from the D3 v7 library, loads the script from UNPKG, and renders to an SVG canvas with a static data-less design.

SSahil Sayyad

Fork of Create a face with d3.js!

This example draws a yellow cartoon face with two eyes and an open mouth using D3 v7. The code selects the SVG element, applies a centered group transform, and builds the face with circle and path shapes. It uses `d3.select` to choose elements, the `d3.arc` generator to compute the mouth’s curved path, and inline `attr` calls to set positions and radii based on the SVG’s width and height. The face is rendered entirely in SVG.

Tthatsbipasha

Fork of Create a face with d3.js!

This example shows a cartoon face constructed with D3.js v7, featuring a yellow head, eyes, eyebrows, and an arc-based mouth. The face is centered in a 960x500 SVG canvas using data-driven attributes for positioning. D3 transitions animate the eyebrows 50 pixels upward for two seconds, then back down. The code imports `select` and `arc` from the D3 library, loads D3 via UNPKG, and builds the shape using SVG circles, rectangles, and a path with `d3.arc()`.

HHarish.G

Fork of Create a face with d3.js!

This example builds a cartoon face out of basic SVG shapes—a yellow circle for the head, circles for eyes, rectangles for eyebrows, and a d3.arc-generated path for the mouth. The code uses d3-selection to append elements and d3-transition to animate the eyebrows upward and back down over a two-second cycle. The face is centered within a 960×500 SVG canvas, with the d3 library loaded via UNPKG.

LLavinaThorat

Fork of Create a face with d3.js!

This example builds a simple cartoon face using D3.js, rendering a yellow circle with eyes, eyebrows, and a mouth in SVG. The face is drawn with basic shapes like circles, rectangles, and an arc path, all positioned relative to the center of the SVG. The eyebrows animate up and down using chained `transition()` calls with `duration(2000)`, moving the eyebrow group via its `transform` attribute. The code imports `select` and `arc` from D3 v7 and loads the library via UNPKG.

LLavinaThorat

Fork of Lets make a face with D3.js!

This example draws a simple face using D3.js, with a large yellow circle for the head, two black eyes, and an orange mouth. The rendering renders directly to an SVG canvas, with the face elements positioned relative to the center of the 960 by 500 viewport. The code uses `d3.select` and `d3.arc` from the D3 v6 library, along with `d3.line` to define the mouth’s path, applying fills and strokes to the shapes.

Ppangaotata

Fork of Create a face with d3.js!

A smiling yellow face drawn with SVG circles and arcs is centered in a 960x500 viewport. The face is assembled using D3 selections, with `circle` elements for the eyes and a `path` generated by the `d3.arc` function for the mouth. A group containing the rectangular eyebrows animates upward and downward via chained `transition` calls, each lasting two seconds. The example demonstrates importing `select` and `arc` from the D3 v7 library loaded via UNPKG.

PPranjali-Mohurle

Fork of Create a face with d3.js!

This example uses D3.js (v7) to draw a stylized face inside an SVG element. It constructs concentric shapes: a red circle for the head, two eyes with black circles, and a mouth created using the `arc` generator from D3’s `d3` module. The code imports the `select` and `arc` functions, appends elements to an SVG group, and applies translations to position facial features relative to the viewport center.

TTanmay Nagepatil