Fork of viz start

100%

Fork of viz start

✓ Published0🌍 Public

Last edited Mar 1, 2021

Created on Mar 1, 2021

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

viz start

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.

PpyDimi

91% match

Loading thumbnail…

Fork of Smily face pt2

A grid of identical yellow smiley faces renders as SVG through React. Each face is composed of separate components for the head, eyes, nose, and mouth, with the mouth drawn using a d3.arc path. The code uses React and d3.v6, mapping over an array created by d3.range to generate repeated Face elements. The rendering relies on an SVG container that translates each face to the center, with randomized eye radii producing subtle variations across the grid.

RRohinton Kazak

91% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of eighteen yellow smiley faces, each with black outlines, eyes, and a curved mouth, is rendered as SVG. The faces are generated in React and D3 v7, using `arc()` from D3 to create the mouth shapes and `range()` to produce the array of components. Random eye radii vary the faces.

LLai Yi Ohlsen

90% match

Loading thumbnail…

Fork of Fork of Smiley Face Part I

A grid of eighteen yellow smiley faces in a React and SVG composition, each generated with randomized eye sizes using `Math.random()`. The faces are assembled from modular React components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—that render SVG elements. The mouth uses `d3.arc` to create a half-circle path, while the background circle and eyes are plain SVG circles. Each face is independently styled with fixed dimensions and offsets, producing a uniform yet subtly varied pattern across the display.

Vvigneswaran009

90% match

Loading thumbnail…

Fork of Hello HTML

A grid of 18 yellow smiley faces renders in React, each with randomized eye and mouth sizes for variety. Built with React 17 and D3 v5, the example composes SVG components—`BackgroundCircle`, `Eyes`, and `Mouth`—using D3's `arc` generator for the mouth path. Faces are generated via `d3.range` and mapped to `Face` components, which group all elements inside an SVG `<g>` translated to the center. The arrangement demonstrates reusable component architecture and dynamic prop-based styling without external data.

JJYK

90% match

Loading thumbnail…

Fork of React + D3 Viz Starter

A React and D3 v6 starter renders a simplified smiley face using scalable vector graphics (SVG). The yellow circle, eyes, and mouth are drawn via basic SVG shapes, with the mouth produced by the `d3.arc()` function. Fixed pixel dimensions position the face elements. A separate `VizContainer` component demonstrates the margin convention for plotting areas, though it is not used in this illustration. The code includes commented-out boilerplate showing how to integrate that container, and relies on CDN-loaded React and D3 libraries.

Hhiperborejac23

90% match

Loading thumbnail…

Fork of Let's Make a Face Part II

This example shows a grid of eighteen randomly generated smiley faces, each rendered as an SVG composed of a yellow circular background, two eyes, a mouth, and teeth. The code uses React components for each facial feature and leverages the D3 arc generator to create the smiling mouth shapes. Faces vary in eye radius, mouth radius, smile width, and mouth width, producing a playful collection of distinct expressions. The visualization is built with React and D3 v7, with each face drawn using SVG elements within a transformed group.

Yyz830620

90% match

Loading thumbnail…

Fork of Smiley Face Part V

A grid of eighteen yellow smiley faces is rendered with React and SVG, each face using randomized eye radii while sharing fixed dimensions and offsets. The code splits UI components into separate ES6 modules, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`. Each face is built with SVG circles and a d3 arc path for the mouth, composed inside a translated `<g>` element. React fragments group the eyes, and the `range` function from d3 generates the array of face instances.

Wweny1109

90% match