making a face

100%

✓ Published0🌍 Public

Last edited Jan 10, 2020

Created on Jan 6, 2020

This example shows a simple, static face built from vector shapes: a yellow circular head, two black eyes, and an arc-shaped mouth on a 960-by-500 SVG canvas. The drawing is constructed programmatically with D3 v5, using `d3.select` to target the SVG element and appending SVG `circle` and `path` elements. The mouth is generated via `d3.arc`, which creates a path based on inner and outer radii and start and end angles, while eye positions are calculated from the canvas center. The page relies on a separate `bundle.js` script and a minimal stylesheet.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

make a face

This example illustrates a simple face constructed from basic SVG shapes using D3 version 6. A yellow circle forms the head, with two smaller black circles serving as eyes, all positioned using absolute pixel coordinates. The mouth is created with D3's `arc` generator, which defines a path using inner and outer radii along with start and end angles. The visualization loads D3 via UNPKG and uses the `select` and `append` methods to build the SVG scene, showcasing D3's utility for creating primitive graphics through its DOM manipulation interface.

Mmanishabehera

91% match

Loading thumbnail…

Making a face

A yellow circle face with black eyes and rectangular eyebrows is drawn in the center of an SVG canvas. The face is followed by a smile-shaped path generated using the `d3.arc` function, though only the arc’s initial frame is rendered. All shapes are appended to a group translated to the canvas midpoint, with dimensions and positions defined by constants. The example uses D3 v5’s `select` and `arc` methods, with static SVG elements—no animation or data binding is visible.

DDarshanil

91% match

Loading thumbnail…

Make a face

This example shows a simple cartoon face made from SVG shapes: a yellow circle for the head, two black circles for eyes, and an arc for the mouth. The face is centered within a 960×500 SVG canvas, with eye positions calculated relative to the center. The code uses D3 v6 selections to append and style each SVG element, and the `arc` generator from D3’s shape module to create the mouth path with specified inner and outer radii and angle ranges. All styling is applied directly via attributes.

CCAROL(XINYI) ZHENG

91% match

Loading thumbnail…

Lets make a face

A simple face is drawn entirely with SVG shapes in a 960-by-500 viewport, using a yellow circle for the head, two black circles for eyes, and a path generated by `d3.arc()` for the mouth. The code selects the SVG element with `d3.select` and sets each shape’s attributes—`r`, `cx`, `cy`, `fill`, and `stroke`—explicitly. The mouth is positioned relative to a `<g>` group translated to (250,200), and the arc spans from angle 0 to π. This example demonstrates basic SVG rendering with static D3 v5 selections, without data binding or interaction.

Ppvhch

91% match

Loading thumbnail…

Lets make a face

Ppvhch

91% match

Loading thumbnail…

Let's Make a Face

A yellow circle with two black eye circles and an arc-based mouth forms a simple face on an SVG canvas. The example uses d3.select to target the SVG element and d3.arc to generate the mouth path with specified inner and outer radii. The rendering is done through D3 v5's SVG manipulation, positioning each shape with absolute coordinates in a 960-by-500 viewport.

Ssalvar2134

90% match

Loading thumbnail…

make a face with d3.js

A simple face built from SVG shapes using D3 v5. The code creates a yellow circle with a red stroke for the head, two eyes with white pupils, and a mouth drawn as an arc path. It uses `d3.select` and `d3.arc` to position elements at fixed coordinates on a 960×500 SVG canvas. The example demonstrates basic D3 shape generation and attribute manipulation without data binding.

DDominika Modzelewska

90% match

Loading thumbnail…

make a face with d3.js

DDominika Modzelewska

90% match