Fork of D3-1: Making a face

100%

Fork of D3-1: Making a face

✓ Published0🌍 Public

Last edited Oct 3, 2023

Created on Oct 3, 2023

This example uses D3.js v7 to draw a simple sad face as an SVG graphic. It renders a yellow circle for the face, two blue circles for the eyes, a black quadratic curve for the mouth, and two smaller blue dots for tears, all positioned relative to the SVG’s width and height. The code uses `d3.select` to target the SVG element and chain `.append`, `.attr`, and method calls to construct the shapes. No external data is loaded; all geometric values are computed from the hardcoded dimensions.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

91% match

Loading thumbnail…

Fork of Make face ith D3

This example demonstrates how to construct a simple smiling face using D3 version 7, with a yellow circular head, two black eyes positioned symmetrically, and a mouth drawn as an arc. The visualization renders entirely as SVG elements, using D3's `select` to target the root SVG and `append` to create circles for the face and eyes. The mouth path is generated with D3's `arc` function, specifying inner and outer radii and angular ranges in radians. The code also loads both D3 v7 and an older v5.6.0 version via script tags.

TTusar

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

90% match

Loading thumbnail…

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

This example draws a stylized, smiling face in an SVG canvas using D3.js v7. It centers a yellow circle for the head, adds two dark eyes and rectangular eyebrows positioned above them, and finishes with a curved path for the mouth created via the `arc` function. The code uses `d3.select` to target the SVG element, applies geometric transformations to center the face, and defines all visual properties like radius, spacing, and offsets as numeric constants. All shapes are rendered as SVG primitives—circles, rectangles, and a path—within a single group element.

Ffkukcha

90% match