Fork of D3-1: Making a face by Mansi

100%

Fork of D3-1: Making a face by Mansi

✓ Published0🌍 Public

Last edited Jan 27, 2023

Created on Jan 16, 2023

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.

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

93% match

Loading thumbnail…

Fork of D3-1: Making a face

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.

NNikitha123171

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

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

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

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

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

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

90% match