Skip to main content
SimilarExport ZIP
100%

First Viz

✓ Published0🌍 Public
Aalexindata
Last edited May 22, 2022
Created on May 15, 2022
Forked from HTML Starter

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.

AI-generated description

Smiley with 2 eyes!

MIT Licensed

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
90% match
Loading thumbnail…

First face

The visualization displays a grid of simplified cartoon faces, each composed of a yellow circular background, two eyes, and an arc-shaped mouth. The faces are rendered as SVG elements using React components, with each face receiving randomized values for stroke width, eye offset, eye radius, and mouth dimensions. The code leverages d3.arc to generate the mouth path, while React manages the component structure and rendering of the faces. The grid layout is produced by mapping over an array generated with d3.range.

GGulshan kumar
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
87% match
Loading thumbnail…

Smiling face Part 1

This visualization renders a grid of fifteen cartoon faces using React and SVG. Each face is composed of a yellow background circle, two eyes, and a mouth, all positioned within a shared coordinate space. The faces are generated by randomly varying the eye offset, eye radius, and mouth properties for each instance. The code utilizes the d3 library for generating the mouth arc path and the range function to create the array of faces.

Ddevvansh1997
87% match
Loading thumbnail…

Smile face

A grid of eighteen smiling faces, each rendered as a yellow circle with black stroke, eyes, and a curved mouth, appears on a plain background. The faces vary slightly in stroke width and eye radius due to random values. Built with React components, the visualization uses D3’s `arc` generator to create the mouth path and `range` to generate the face count, all drawn as SVG elements.

AAkram Gassem
86% 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
86% match
Loading thumbnail…

Data viz

A grid of 18 randomly generated cartoon faces fills the SVG canvas, each face composed of a yellow circle, two eyes, and a d3 arc-based mouth. The React components `Face`, `BackgroundCircle`, `EyeCircles`, `Mouth`, and `FaceContainer` render each face with randomized stroke widths, eye offsets, eye radii, and mouth dimensions. The visualization uses d3.v7’s `arc` generator to draw the mouth path and the `range` function to create the face array. Each render produces a unique arrangement of facial features.

NNenad Jovanovic
86% match
Loading thumbnail…

Smiling Face

A grid of ten identical smiling faces appears, each rendered in yellow with a black outline and featuring two eyes and a curved mouth. The visualization is built using React components that compose SVG elements, with the mouth's arc path generated programmatically using d3's `arc()` API. Each face is positioned within its own SVG viewport, and the layout is created by mapping over a range of values to render multiple instances.

BBensinga77
86% match