Fork of D3-1: Making a face

100%

Fork of D3-1: Making a face

✓ Published0🌍 Public

Last edited Feb 24, 2023

Created on Feb 24, 2023

This example uses D3.js v7 to draw a cartoon face entirely with SVG shapes. It shows a yellow circle head with two black eyes, rectangular eyebrows, and a mouth created using the d3.arc path generator. The code selects the SVG element from the HTML, then appends and positions each shape using attributes like cx, cy, and r, with the arc function defining the mouth's inner and outer radii and angles.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

Loading thumbnail…

Fork of D3-1: Making a face

This example assembles a basic, stylized face from SVG primitives using D3 version 7. It draws a yellow circle as the head, adds two blue eyes, a smile-shaped arc for the mouth, and two rectangular eyebrows, all positioned relative to the SVG canvas dimensions. The code demonstrates D3’s functional DOM selection via `d3.select` and attribute chaining, and it employs the D3 arc generator to create the path for the smile. The face’s components are placed using explicit pixel coordinates extracted from the SVG element’s width and height attributes.

Bbarryhillier

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

93% match

Loading thumbnail…

Fork of D3-1: Making a face by Mansi

This example uses D3.js to draw a simple cartoon face on an SVG canvas. It shows a yellow circle as the head, with two blue eyes, rectangular eyebrows, and a mouth created using D3's `arc` function. The code uses D3 selections and attribute methods like `attr` to set positions and sizes, and an SVG `path` element for the mouth. The face is centered within a 960x500 SVG container.

MMansiVyas1821

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

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

92% match