viz start

100%

✓ Published1🌍 Public

Last edited Mar 1, 2021

Created on Feb 28, 2021

A grid of eighteen smiling faces, each rendered as an SVG with a yellow circular head, black outline, two eyes, and an arc-shaped mouth. The faces are generated using React components, with the `Mouth` component leveraging the D3 `arc` API to create the curved smile. Each face randomly varies its eye radius, while all other facial features remain consistent. The `Face` component composes the constituent parts, and the `FaceContainer` wraps them in an SVG element, translating the coordinate system to the center of each face.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of viz start

A grid of eighteen yellow smiley faces renders in SVG via React. Each face is composed of separate components for the background circle, eyes, and a mouth drawn with d3’s `arc` generator. Eyes vary randomly in radius per face, while all other geometry stays fixed. The example demonstrates composing interactive-free SVG elements with React and d3, using `FaceContainer` to center a translated group.

PpyDimi

91% match

Loading thumbnail…

First Viz

A grid of fifteen smiling faces, each rendered as a yellow circle with black outlines, two eyes, and an arc-shaped mouth. The faces vary subtly in eye placement, eye size, and mouth thickness due to random parameters. Built with React and D3, the visualization uses SVG primitives, with the mouth path generated by D3's `arc` function. The `range` function from D3 creates the array of fifteen face components.

Aalexindata

90% match

Loading thumbnail…

data_viz_intro_part1

A grid of eighteen randomly generated smiley faces fills the screen, each composed of a yellow circle, two eyes, and a mouth shaped as a half-ring. The faces are rendered as React components using SVG, with the mouth arc drawn via the `d3.arc()` API. Each face’s dimensions and feature positions are randomized on every render, and the `Face` component composes smaller `BackgroundCircle`, `Eyes`, and `Mouth` components, all wrapped in a `FaceContainer` that applies a translation transform.

RRoberto M

89% match

Loading thumbnail…

Multiple faces

A grid of 18 smiling yellow faces fills the view, each with randomized eye sizes and a fixed mouth shape. The faces are rendered as SVG circles with black outlines, built from reusable React components for the background, eyes, and mouth. D3's arc generator creates the mouth path, while the React app maps over a d3.range to produce each face. The component props control geometry like eye offset and mouth radius, allowing variation across the grid.

Vvigneswaran009

89% match

Loading thumbnail…

Let's Make a Face Part V

A grid of eighteen smiley faces, each with a yellow circular background, black outline, two eyes, and a curved mouth, is rendered as a single React application. Each face uses randomized eye radii, making them subtly distinct. The visualization is built with React components and D3’s `arc` API for the mouth shape, all rendered as SVG within a fixed 150 by 150 pixel viewport per face.

PPakapone Supavarn

89% match

Loading thumbnail…

1. Faces

A grid of eighteen cartoon faces rendered with React and SVG, each featuring a yellow circular head, black eyes, and an arc-based mouth. The faces vary slightly in stroke width, eye offset and radius, and mouth dimensions due to randomized parameters. The visualization demonstrates reusable React components, including `FaceContainer` for SVG positioning and `Mouth` using d3’s `arc` generator to create the mouth shape.

DDenis Zjukow

88% match

Loading thumbnail…

Make Face

A grid of eighteen yellow smiley faces appears, each rendered as an SVG with a circular face, two eyes, and an arc-shaped mouth. The faces vary randomly in eye radius, giving each a slightly different expression. The example uses React components to compose the face parts, and D3's `arc` generator for the mouth path, with all geometry positioned via SVG transforms.

Ssikadali

88% match

Loading thumbnail…

let's make a face

A grid of eighteen cartoon faces fills the screen, each rendered as a yellow SVG circle with black outlines, two eyes, and a curved mouth. The faces vary randomly in eye radius and mouth thickness, creating playful individual expressions. The example uses React components to compose each face from reusable parts, with the mouth path generated via `d3.arc` and the grid created by mapping over `d3.range`.

Bbdfee

88% match