Fork of make a face

100%

Fork of make a face

✓ Published0🌍 Public

Last edited Apr 3, 2021

Created on Apr 3, 2021

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Fork of Make a face with D3.js

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.

苏苏凯

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

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

This example shows a cartoon face built entirely from basic SVG shapes, using D3 v7 to create a yellow circle head, two elliptical eyes with irises, and a wavy mouth path. The code leverages D3’s `select` and `arc` APIs to generate two crescent-shaped arcs, transformed and positioned to represent drunk, half-closed eye lids. Additional shapes like `circle` and `ellipse` are appended manually, while the mouth is a hand-written path string with stroke styling, all rendered at a fixed 960×500 SVG canvas size.

GGodspower Wodi

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