2020 Tutorial - Face

Let's Make a Face Part I

This example renders eighteen identical cartoon faces in a grid using React components, each composed of a yellow background circle, two black eyes, and a curved mouth. The faces are generated from an array created with `d3.range`, and each face is drawn as SVG elements within a transformed group. The mouth shape is computed using the `d3.arc` API, with inner and outer radii and angular start and end points defining its curve. React’s component-based structure, including `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, demonstrates a modular approach to building and repeating SVG visualizations.

Kkosakase

Face

A grid of eighteen identical cartoon faces fills the viewport, each composed of a yellow circular head with black outline, two small eyes, and a mouth. The faces are generated as React components, using D3's `arc` API to create the mouth shape from a set of radius and width parameters. The SVG rendering is driven by a `FaceContainer` that translates the coordinate system, and all visual properties are passed as explicit props.

8888Midas888

Lets Make a Face

A grid of randomly generated cartoon faces demonstrates how React components and D3 shape generators can be composed into reusable visualizations. Each face uses a yellow background circle, offset black eyes, and a D3 arc-based mouth with randomized dimensions for eye radius, mouth width, and mouth radius. The React `Face` component assembles smaller `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, while a `FaceContainer` renders an SVG group translated to the center coordinates. D3’s `range` and `arc` utilities generate the grid and mouth paths, respectively.

BbeauMarko

Face using D3 and React

A grid of small faces, each rendered as a yellow circle with white eyes and a curved mouth, fills the viewport. The example demonstrates a reusable React component composition built with SVG primitives. The `Face` component combines separate `BackgroundCircle`, `Eyes`, and `Mouth` components, with the mouth path generated using the `d3.arc` API. D3's `range` function creates an array of 100 faces, and each instance applies randomized eye radius values for slight variation across the repetitions.

VVishnu Jayan

Face Making

A grid of randomly generated cartoon faces fills the screen, each with a yellow circular head, black outline, two eyes, and an arc-based mouth. The example demonstrates React components composing SVG shapes, where each face is built from `<circle>` elements and a D3 `arc` path for the mouth. Eye size varies per face via `Math.random()`, while D3's `range` generates the 24 faces in the layout, using d3.v6 and React 16.13.1.

DDaniel Russell-Brain

Face

A grid of 18 identical cartoon faces fills the screen, each rendered with a gold background circle, black outline, two black eyes, and a curved mouth. The visualization demonstrates React component composition, where each face is built from reusable subcomponents like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is generated using `d3.arc()` from D3 v6, while all other shapes use plain SVG elements within a React rendering pipeline.

LLeandro Da Souza

Face

This example builds a stylized cartoon face from reusable React components, including a yellow background circle, two eyes, and an arc-shaped mouth. The components are composed in a FaceContainer that centers all elements within an SVG using a transform. The mouth is drawn with the d3.arc() API, which generates the path using specified inner and outer radii and start and end angles. React 18 and D3 v7 handle the rendering, with visual properties like eye offset, radius, and stroke width passed as props to customize the face.

SSergey Shulzhenko

D3 React Face

Ten identical cartoon faces are arranged in a row, each rendered as a yellow SVG circle with black outlines, two eyes, and a mouth. The example demonstrates the composition of reusable React components (`BackgroundCircle`, `Eye`, `Mouth`) assembled into a `Face` element. The `Mouth` uses the D3 v7 `arc` generator to create a curved path, while the `FaceContainer` handles the SVG coordinate translation. The `App` component maps over an array to render the repeated faces.

MMark Lam