Skip to main content
SimilarExport ZIP
100%

Lets make a face

✓ Published1🌍 Public
Nneydareh
Last edited Nov 18, 2019
Created on Nov 18, 2019
Forked from Hello VizHub

A face built from basic SVG shapes appears in the center of the canvas, with a yellow circle for the head, two dark eyes, and a semicircular mouth. The example demonstrates how to compose a figure using D3 v5’s `select` and `arc` APIs, positioning elements through translation and coordinates. The code calculates dimensions from the SVG attributes and places the face’s components relative to the viewport center, showing a simple approach to building custom visualizations with D3’s drawing utilities.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

A face built from basic SVG shapes—a yellow circle for the head, circles for eyes, and an arc-generated path for the mouth—is centered on a 960×500 canvas. The code uses D3.js v5’s `select` and `arc` APIs to append and position elements, with `transition()` animating the eyebrows up and down over two-second intervals. The rendering is entirely SVG, with all coordinates computed relative to the svg’s center using its width and height attributes.

BBen Daniel
91% match
Loading thumbnail…

Let's make a face with D3.js!

A cheerful yellow face built from SVG shapes appears centered in the viewport, with two black eyes and a curved mouth. The example demonstrates basic D3.js shape generation using the `select` and `arc` APIs. Circles define the head and eyes with fixed pixel coordinates, while the mouth uses `d3.arc` with an inner and outer radius and a half-circle angle range. The SVG canvas is 960 by 500 pixels, and all elements are positioned relative to its dimensions.

FFatima125
91% match
Loading thumbnail…

Lets make a face with d3.js

This example shows a simple yellow face constructed entirely with SVG shapes, using D3.js to generate a circular head, two eyes, and an arc-based mouth centered on the canvas. The code imports `select` and `arc` from the d3 module, manipulates SVG attributes directly, and positions elements based on the viewport height and width. The mouth uses the `arc` generator with specified inner and outer radii and angular ranges, while circles are appended for the face and eyes. The example demonstrates basic D3 selection, attribute setting, and generator usage without any data binding.

MMonisha Gopinath
91% match
Loading thumbnail…

Let's make a face

This example uses D3.js (v6) to draw a simple, stylized face on an SVG canvas. A yellow circle forms the head, with two black eyes and rectangular eyebrows positioned symmetrically, and a mouth created using the `d3.arc` path generator. The face is centered within the 960x500 viewport via a translated group element. All shapes are appended directly using D3 selection methods, with hardcoded pixel values for spacing and dimensions.

OOnur
91% match
Loading thumbnail…

Lets make a face

This example assembles a smiling cartoon face from basic D3 shapes, including a bright yellow circular head, black eyes, and a curved arc mouth. It showcases manual SVG construction through D3 selections and the `d3.arc` generator for the mouth’s path. The face is centered by translating a group element, while eyes are positioned with explicit `cx` and `cy` offsets. The code relies on D3 v5’s `select`, `arc`, and attribute methods, rendering entirely in SVG with no external data source, demonstrating coordinate math and layout composition.

CCasperHogenboom
91% match
Loading thumbnail…

Lets make a face with d3

This example uses d3 v5 to construct a simple, stylized face entirely from SVG primitives. It draws a yellow circle for the head, two smaller circles for eyes with circular pupils, rectangular eyebrows, and a semi-circular mouth created with an arc path. The face is centered within an SVG canvas using a transform, with facial feature positions calculated relative to the center. The code relies on d3's `select` and `arc` functions, and demonstrates how to programmatically generate SVG shapes and coordinate them for a recognizable composition.

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