Fork of D3-1: Making a face

100%

Fork of D3-1: Making a face

✓ Published0🌍 Public

Last edited Sep 21, 2023

Created on Sep 21, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

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

96% 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

95% 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

95% 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 example uses D3 v7 to construct a simple cartoon face from SVG primitives. A yellow circle forms the head, two blue circles become the eyes, a path drawn with the `d3.arc` function creates the mouth, and two rectangles serve as eyebrows. The eyebrows animate repeatedly via chained `transition().duration(2000).attr()` calls, moving them up and down over time. The code demonstrates core D3 operations like `select`, `append`, and `attr` to build and manipulate SVG elements directly.

HHari Prashath

95% match

Loading thumbnail…

Fork of D3-1: Making a face

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.

AAbishekprabakaran

94% match

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

94% match

Loading thumbnail…

Fork of D3-1: Making a face

This example builds a cartoon face out of basic scalable vector graphics (SVG) shapes within a 960 by 500 canvas. It shows a yellow circle for the head, two blue eyes, a black-outlined mouth, and two rectangular eyebrows. The code uses D3 v7 selection and attribute methods, such as `d3.select` and `.attr`, to manipulate SVG elements, and the `d3.arc` API to generate the mouth's path. All coordinates are derived from the SVG's width and height attributes, with groups applied to style the eyes collectively.

EEmnaAbbes

94% match