Fork of Fork of d3js

Fork of Fork of Fork of d3js

A smiling yellow face with blue eyes and eyebrows sits centered in an SVG canvas, built using D3 v5 selections and the `arc` helper. The eyebrows animate upward and back down over two seconds via chained `transition` calls, while the mouth is drawn as a half-circle arc. The example demonstrates basic SVG shape composition, coordinate transforms, and timed animations using D3’s selection framework.

Mmuslimaaliyeva

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

This animated SVG face shows a yellow circle with two eyes, eyebrows, and a mouth, and the eyebrows move up and down over time. The code uses D3 v5 to manipulate the DOM, appending SVG shapes and applying a chained `transition().duration(2000).attr('transform', ...)` to animate the eyebrow group’s vertical position. It imports `select` and `arc` from D3 to select the SVG element and generate the mouth’s path with an annular arc geometry.

Nnsatyaprakash22

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

Nnsatyaprakash22

Fork of Fork of d3js

A cheerful yellow face with black-outlined features is rendered as an SVG in D3 v5. The animation lifts the rectangular eyebrows upward and then returns them to their original position over a four-second cycle, using chained `transition()` calls on a grouped element. The face is composed of circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered within a fixed 960x500 SVG viewport.

HHeisenberg

Fork of Fork of Fork of Fork of d3js

This example renders an animated face built from SVG primitives, including a yellow circular head with eyes, eyebrows, and an arc-based mouth. The eyebrows move up and down via chained `transition().duration()` calls, creating a subtle blinking or surprised expression. The code imports `select` and `arc` from D3 v5, uses `d3.arc()` to define the mouth’s path, and positions all elements relative to a centered `<g>` group. The SVG canvas is 960 by 500 pixels, with a blue stroke on the head and no external data source.

Mmuslimaaliyeva

Ppriyankabpally@gmail.com

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

A yellow face with black-outlined eyes and brows animates its eyebrows upward and back downward over four seconds. The figure is drawn with D3 selections, using SVG `circle` elements for the face and eyes, `rect` elements for the brows, and a `path` generated by the `d3.arc()` helper for the mouth. The brow motion relies on chained `transition.attr` calls targeting a transformed group, all rendered in a single SVG canvas.

Fork face with d3.js!

This example uses D3 v7 to draw a yellow circle face with eyebrows, eyes, and an arc-based mouth on an SVG canvas. The code demonstrates local module imports, including `select` and `arc` from D3, and animates the eyebrows with chained `transition` calls that move them up and down over two-second intervals.

Kkiruthiga1304

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

A cheerful yellow face is drawn in SVG and animated with D3.js v7. The face features a circular head, two eyes, and rectangular eyebrows that move up and down over two seconds. The mouth is rendered as an arc path using the `arc()` method, which defines its inner and outer radii and angular range. The code uses `select` to target the SVG element, `append` to build the grouped shapes, and `transition().duration()` to animate the eyebrow group’s transform, demonstrating basic D3 animation and SVG construction.

FFarhodXoliyarov