Skip to main content
SimilarExport ZIP
100%

Fork of D3-1: Making a face

✓ Published0🌍 Public
AAbishekprabakaran
Last edited Sep 21, 2023
Created on Sep 21, 2023

A yellow circle face with blue eyes, black eyebrows, and a mouth formed by an arc sits centered in an SVG canvas. Two rectangular eyebrows animate upward simultaneously over two seconds, then return to their original positions. The code uses D3 v7 selections, including `d3.select` and `d3.append`, with SVG elements like `circle`, `rect`, and `path`, plus the `d3.arc` API for the mouth shape. Transitions are applied via `.transition().duration()` to animate the eyebrow movement.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3-1: Making a face

A yellow circle with black outlines forms a face, including two blue eyes, a mouth drawn as an arc, and two rectangular eyebrows. The face is rendered as SVG using D3 v3, with elements appended via `d3.select` and styled through chained `.attr` calls. The mouth uses the `d3.arc` API to generate its path. Both eyebrows animate with `transition().duration(2000)`, moving upward then returning to their original position, all within a 900×500 SVG canvas.

AAbishekprabakaran
96% match
Loading thumbnail…

Fork of D3-1: Making a face

A yellow circle with black stroke and two blue eyes with black strokes are drawn on an SVG canvas, along with a black arc-shaped mouth and two rectangular eyebrows. The eyebrows animate by moving up and down over time using D3 transitions. The visualization uses D3.js v7 to select the SVG element, append circles, a path, and rectangles, and apply attributes. The arc for the mouth is generated with the D3 `arc` function, and the eyebrow movement uses chained `.transition().attr()` calls over 2000ms durations.

MMithunshanjai
96% match
Loading thumbnail…

Fork of D3-1: Making a face

A yellow circle with blue eyes, animated eyebrows, and a curved mouth forms a stylized face rendered in SVG. The code uses D3 v7 selections to append SVG primitives, and a D3 arc path generator to create the mouth based on specified inner and outer radii and angles. Two rectangles represent eyebrows and use chained `transition().duration()` calls to move them vertically over two seconds before returning. The example demonstrates basic D3 shape generation, SVG group elements for shared eye styling, and timed attribute transitions.

AAsmitha-Sa
95% match
Loading thumbnail…

Fork of D3-1: Making a face

This visualization assembles a cartoon face from basic SVG shapes, showing a yellow circle head, blue eyes, and an arc-based mouth against a white background. The eyebrows animate by moving upward over two seconds, then returning to their original position, cycling through this motion once. Built with D3 v7, the code uses `d3.select` to target the SVG element, `d3.arc` for the mouth path, and chained `transition().duration()` calls to animate the rectangles. Dimensions are extracted from the SVG attributes, and all shapes are positioned relative to the center of the 960×500 canvas.

DDineshanth123
94% match
Loading thumbnail…

Fork of D3-1: Making a face

A yellow face with blue eyes, eyebrows, and a curved mouth is drawn in an SVG canvas using D3 v7. The visualization constructs the face from primitive shapes—circles for the eyes, an arc-generated path for the mouth, and rectangles for the eyebrows. The eyebrows animate vertically over four seconds using D3's `transition` and `duration` methods, shifting them up and then back down. The code explicitly sets dimensions and positions based on the SVG's width and height attributes.

HHarish.G
94% match
Loading thumbnail…

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
93% match
Loading thumbnail…

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
93% match
Loading thumbnail…

Fork of D3-1: Making a face

A cartoon face is rendered in SVG using D3 v7, with a yellow circular head, blue eyes, and a black-outlined arc for the mouth. The code builds the face by appending SVG elements via `d3.select`, `append`, and `attr`, and defines the mouth’s path using the `arc` generator from D3’s shape module. Both rectangular eyebrows animate up and down over four seconds using chained `transition().duration()` calls, showing how D3 handles simple sequential motion. No external data is used; the visualization is purely code-driven geometry.

GGokulaKrishnanCoder
93% match