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

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

A yellow smiley face is drawn in SVG, with circular eyes and rectangular eyebrows that animate vertically. The eyebrows move up and down in a repeating loop using D3’s `transition()` method, while the mouth is created with the `d3.arc` shape generator. The code selects SVG elements with `d3.select`, uses `d3.arc` for the path, and animates attributes via chained transitions. Drawing is done over two seconds per movement, with the face centered in a 960×500 viewport.

PPriya Tiwari

96% match

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

A yellow smiley face built with SVG and animated with D3 v5 demonstrates fundamental DOM manipulation. The code uses `d3.select`, `append`, and `attr` to construct circles for the face and eyes, rectangles for the eyebrows, and a `d3.arc` path for the mouth. A chained `transition().duration(2000)` moves the eyebrow group up and down in a looping motion, while the iris and additional features remain static. The example relies on SVG attributes and D3’s enter/update/exit-free imperative style, with no external data source.

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

A D3.js animation shows a smiley face with a yellow head, eyes, a mouth, and rectangular eyebrows that move up and down in a repeating cycle. The face is built by manipulating SVG shapes, including circles for the head and eyes, a path for the mouth, and rectangles for the eyebrows. The code uses d3.select and d3.arc, and iterates transitions with the .transition() method to animate the eyebrows over two-second intervals. The background is set to black via d3.select("body").style().

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

A yellow smiley face is rendered in SVG using D3.js, with circular eyes and an arc-based mouth. A group containing rectangular eyebrows animates vertically via chained `transition()` calls, moving up and then back down over two two-second intervals. The code uses D3 selections and the `arc` generator from `d3-shape`, with dimensions driven by the SVG's width and height attributes. This example demonstrates fundamental DOM manipulation and animation with D3 v5.

Ssrinivasaraosankula

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

A yellow smiley face is drawn in SVG, centered within a 960-by-450 canvas, with eyes, a mouth, and eyebrows that animate upward and back down over two seconds. The example demonstrates fundamental DOM manipulation using D3.js v5, building the face with `d3.select`, `append`, and the `d3.arc` shape generator for the mouth. The eyebrows’ movement is driven by chained `transition().duration(2000)` calls that change the group’s `transform` attribute. All shapes are plain SVG elements, and the animation relies entirely on D3’s transition system.

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

A yellow smiley face is drawn on an SVG canvas using D3.js, with its eyebrows animating up and down in a repeating two-second transition. The code builds the face with D3’s `select`, `arc`, and `transition` APIs, using SVG circles for eyes, rectangles for eyebrows, and a path for the mouth. The eyebrows shift vertically via chained `transition().duration()` calls, while the face itself remains static. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 v5.

Ssnehareddygurram

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

A yellow smiley face with animated eyebrows is drawn in an SVG canvas. D3.js v5 is used for DOM selection and manipulation, creating the face from primitive shapes: a circle for the head, smaller circles for eyes, rectangles for eyebrows, and a curved path for the mouth. The eyebrows animate via chained `transition()` calls over two seconds each, moving them up and down repeatedly. The code uses `select()`, `append()`, and `attr()` from D3 to build the static elements, while the `arc()` generator defines the mouth's shape.

NNavaneeth-Ragi

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

This example demonstrates fundamental D3.js DOM manipulation by animating a yellow smiley face whose eyebrows move up and down in a continuous loop. The face is drawn using SVG shapes—circles for the eyes and head, rectangles for the eyebrows, and a path generated with d3.arc() for the mouth. The animation is driven by chained transition() calls that alternately shift the eyebrow group’s transform attribute over two-second intervals. The code imports select and arc from D3 v5 and appends elements to a fixed 960×500 SVG canvas.