Fork of Make a face with D3.js

100%

Fork of Make a face with D3.js

✓ Published0🌍 Public

Last edited Jan 30, 2021

Created on Jan 30, 2021

A stylized face rendered as a static SVG graphic, composed of a large yellow circle for the head, two smaller dark circles for eyes, and a curved arc for the mouth. The code uses D3.js v6 to select the SVG canvas, apply a centered translation, and append shapes with specific coordinates and radii. The mouth is drawn with the `arc` API, defining inner and outer radii along with start and end angles. Eye spacing, vertical offset, and radius are set as variables, while the face is centered within a 960x500 viewport.

AI-generated description

MIT Licensed

Similar vizzes

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 Lets make a face with D3.js!

This example draws a simple face using D3.js, with a large yellow circle for the head, two black eyes, and an orange mouth. The rendering renders directly to an SVG canvas, with the face elements positioned relative to the center of the 960 by 500 viewport. The code uses `d3.select` and `d3.arc` from the D3 v6 library, along with `d3.line` to define the mouth’s path, applying fills and strokes to the shapes.

Ppangaotata

92% match

Loading thumbnail…

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

A stylized, animated face rendered in SVG with D3.js v5. The face is built from primitive shapes—a yellow circle for the head, black circles for eyes, and an orange arc for a mouth—all centered within a 960x500 canvas. The animation is driven by D3's transition system, which moves the eyebrows upward and back over two seconds each. The code demonstrates modular imports from `d3`, including `select` and `arc`, and uses `arc()` to generate the mouth path with specified inner and outer radii and angular extents.

Jjlspangl

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 Let's make a face with D3.js

This example builds a stylized yellow face from primitive SVG shapes—circles, rectangles, and an arc—using D3.js methods like `select`, `append`, and `attr`. The face is centered via a D3 selection transform, and its eyebrows animate vertically through chained transitions, first lowering and then returning to their original position. The arc for the mouth is generated with the D3 `arc` helper, while all shapes are drawn in an SVG container. Data is minimal, with hardcoded dimensions controlling eye spacing, radius, and eyebrow offsets.

IIc1200010

91% match

Loading thumbnail…

Fork of let's make a face with D3.js

A stylized face is constructed from basic SVG shapes, including a yellow circle for the head, two white ellipses for the eyes, black circles for pupils, and a gray arc for the mouth. The drawing is rendered on a 1000×500 SVG canvas using D3 v5 selection and attribute methods. Coordinates are computed dynamically from the canvas width and height, while the mouth is generated using the D3 arc generator with explicit inner and outer radii and angle values. The code is written in React and imports the `select` function from D3.

KK V VINITHA

91% match

Loading thumbnail…

Fork of Create a face with d3.js!

A simple SVG face rendered with D3.js, composed of a yellow circle for the head, two black circles for eyes, and an arc-shaped mouth. The face is centered within an 800 by 800 SVG canvas using D3 selections and attribute setters. The mouth is created with the d3.arc() function, specifying inner and outer radii and start and end angles. This example demonstrates importing D3 modules like `select` and `arc` from the library loaded via CDN.

AAh Min Hui

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

91% match