Fork of Make face ith D3

100%

Fork of Make face ith D3

✓ Published0🌍 Public

Last edited Jan 23, 2022

Created on Jan 23, 2022

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.

AI-generated description

A demonstration of how to start using D3 version 6.

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 make a face

This example draws a simple yellow face with black eyes and a smiling mouth onto an SVG canvas using D3 version 6. The code imports `select` and `arc` from D3, appends circles for the head and eyes, and uses a path generated by `arc()` to create the mouth shape with specified radii and angle ranges. The SVG is 960 by 500 pixels, with elements positioned using absolute coordinates.

Mmanishabehera

92% match

Loading thumbnail…

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

This example uses D3.js v5 to construct a static smiley face from SVG primitives. It draws a yellow circle for the head, two smaller circles for eyes, rectangular eyebrows, and a path-based mouth arc. The visualization demonstrates fundamental DOM manipulation by appending and positioning graphical elements with methods like `select`, `append`, and `attr` on an SVG canvas. The eyebrows are positioned but do not animate in the provided code.

RRadha246

91% match

Loading thumbnail…

Fork of Fork of make a face d3js

This example draws a simple smiling face using D3.js, with a yellow circular head, white elliptical eyes with dark pupils, and a wide arc-shaped mouth. The face is rendered as SVG elements within a 960×500 viewport, with the head centered and the mouth positioned using D3’s `arc` generator to create a path. The code explicitly selects the SVG canvas and appends shapes using D3’s selection API, setting attributes like fill, stroke, and geometry directly.

GGodspower Wodi

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

91% match

Loading thumbnail…

Fork of face

This example shows a simple smiley face built with D3.js, rendered as SVG with a yellow circle, eyes, and a mouth. The code demonstrates fundamental DOM manipulation by using `d3.select` to append elements and `transition.attr` to animate the eyebrows, which move upward and then back down in a looping 2-second cycle. It relies on the D3 v5 API, including `arc` for the mouth path, with dimensions defined by hardcoded constants for spacing and radii.

EEbenizerR

91% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes. A yellow circle forms the head, with two eyes and a mouth drawn using an arc path. The eyebrows, rendered as rectangles, animate upward and then back down through chained `transition().duration()` calls. The code imports `select` and `arc` from D3 v5, uses SVG elements for rendering, and relies on data-driven attributes to position features relative to the viewport dimensions.

RRadhika Ganapathy

91% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face with yellow circular head, black-outlined eyes, and an arc-based mouth. Animation brings the face to life as the eyebrows, drawn as rectangles, move upward and downward through chained `transition().duration(2000)` calls on the group element containing them. The visualization uses D3 v7 with SVG output, constructing the face within a centered `<g>` group and positioning features relative to the viewport dimensions. The code explicitly imports `select` and `arc` from the D3 library, with the mouth path generated using `d3.arc()` with specified inner and outer radii and angle bounds.

Ddok0086m

91% match