Fork of Fork of Hello HTML

100%

Fork of Fork of Hello HTML

✓ Published0🌍 Public

Last edited Dec 9, 2021

Created on Dec 9, 2021

This example shows a grid of 18 randomly generated smiley faces, each rendered as a yellow circle with black outlines, eyes, and an arc-shaped mouth. Built with React and D3 v7, the `Face` component composes smaller components for the background, eyes, and mouth, using D3’s `arc()` generator to create the mouth path. Each face varies its dimensions—stroke width, eye offset and radius, and mouth size—via `Math.random()`, producing an organic, quirky array of expressions.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example displays a grid of eighteen identical smiley faces, each with a yellow circular background, black outline, eyes, and a mouth. The faces are rendered as SVG elements using React components, with D3’s `arc` generator defining the mouth path. Each face randomly varies its eye radius via `Math.random()` within the React render loop, while the layout is static and repeated through D3’s `range` function.

Jjames.haarbauer@dunya-analytics.com

95% 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

95% match

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen randomly generated smiley faces, rendered as SVG, demonstrates a React and D3.js component-based approach. Each face is a `Face` React component that composes `BackgroundCircle`, `Eyes`, and `Mouth` components. The `Mouth` component uses the D3 `arc` API to create a path, while the `Eyes` and face positioning rely on randomized parameters, producing visual variety. The `d3.range` function generates the array for the grid, and the React `render` call outputs the faces to the root element.

Ffaik.binaj@gis-dev.com

95% match

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen randomly parameterized smiley faces renders as SVG elements, each composed of a yellow background circle, two black eyes, and a mouth arc. The D3 `arc` generator produces mouth paths from a start angle of π/2 to 3π/2, while `range` from D3 creates the array used to map over in React. All face components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—are React components receiving randomized numeric props, outputting a static, stylized collection.

LLuis Platzer

94% match

Loading thumbnail…

Fork of Hello HTML

A grid of 18 randomly generated smiley faces is rendered on an SVG canvas. Each face is composed of React components: a yellow background circle, two eyes, and a mouth drawn with a D3 arc path. The `index.js` file uses ReactDOM to render the faces, while `d3.range` generates the grid and `Math.random()` varies facial features like eye offset, radius, and mouth width, producing a playful, non-repeating pattern.

TTakuya Kitazawa

94% match

Loading thumbnail…

Fork of Fork of Hello HTML

A grid of eight yellow smiley faces is rendered as SVG, each with a dark outline, two circular eyes, and an arc-shaped mouth. The faces vary randomly in rotation angle, stroke thickness, and eye size. Built with React and D3, the example uses the D3 `arc` API to generate the mouth path and D3 `range` to create the array of faces. The `Face` component assembles the head, eyes, and mouth, and a rotation transform is applied to each SVG group.

AAmir

94% match

Loading thumbnail…

Fork of Hello HTML

A fork of the Hello HTML example renders a grid of eighteen yellow smiley faces, each constructed with randomized facial features. The React components use SVG shapes, including a yellow background circle, two black eyes, and a mouth created with a d3 arc path. The faces are drawn with random values for stroke width, eye offset, eye radius, and mouth dimensions, and are laid out in a 6-by-3 grid. The visualization relies on React for component composition and d3's `arc` function for the mouth geometry.

PPin-Yu-Li

94% match

Loading thumbnail…

Fork of HTML Starter

This example renders a grid of randomly generated smiley faces using React and SVG. Each face is composed of a yellow circle with black stroke, two eyes, and an arc-shaped mouth drawn with d3’s `arc()` generator. The code defines reusable React components such as `Face`, `Eye`, and `Mouth`, and uses `d3.range` to create 18 faces with randomized eye and mouth dimensions. The data originates from a hardcoded URL fetch that logs color values, though the visualization itself does not display this data.

AAshish Gupta

94% match