Skip to main content
SimilarExport ZIP
100%

react

✓ Published0🌍 Public
AAnimesh Nautiyal
Last edited May 18, 2020
Created on May 17, 2020
Forked from Hello HTML

A grid of eight identical cartoon faces is rendered in React, each with a yellow circular head, black-bordered stroke, eyes, and an arc-shaped mouth. The faces are generated by mapping over an array created with `d3.range`, and each face is composed of reusable React components like `BackgroundCircle`, `Eyes`, and `Mouth`. The `Mouth` component uses `d3.arc` to define the path, while the SVG output is produced declaratively through React props for dimensions and positioning.

AI-generated description

d3 with react

MIT Licensed

Similar vizzes

Loading thumbnail…

React Face

Eighteen identical yellow cartoon faces form a grid, each rendered as a static SVG via React components. Each face uses D3’s `arc` generator to draw a smile, while eyes have randomized radii. The code defines reusable React components (`Face`, `Head`, `Eye`, `Mouth`) and passes fixed geometry constants from `index.js`, with `ReactDOM.render` placing the array of faces into the DOM.

Jjlin2002
91% match
Loading thumbnail…

Hello HTML

This example shows a grid of 18 identical cartoon faces, each rendered with a yellow background circle, two eyes, and an arc-shaped mouth, composed using React components. The faces are generated by mapping over an array from `d3.range` and rendering each `Face` component with randomized eye radii. The visualization uses React to structure the SVG elements, while the mouth is drawn with a `d3.arc` path generator. All faces share the same fixed dimensions and coordinate centers, creating a repetitive pattern with slight variations in eye size.

DDiavek
91% match
Loading thumbnail…

React components

A grid of small yellow smiley faces, each with subtle random variations in eye size, eye placement, and mouth thickness, is rendered as reusable React components. The example demonstrates how D3’s `arc` generator creates the mouth path inside a `Mouth` component, while separate `BackgroundCircle`, `Eyes`, and `FaceContainer` components assemble the SVG face. The `index.js` file maps over a `range(6*3)` array to instantiate eighteen `Face` components, each using randomized parameters for its features.

Jjrydow
90% match
Loading thumbnail…

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

Hello html

A grid of eighteen cartoon faces appears, each rendered as a yellow circle with black stroke, two eyes, and a curved mouth. Built with React and D3 v5, the faces use the `arc` generator from D3 to create the mouth path. Each face’s eye offset, eye radius, mouth radius, and mouth width are randomized, producing slight variations across the grid. The SVG output is composed of reusable components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, with all elements centered via a transformed group.

Jjesramyep1263
89% match
Loading thumbnail…

Hello HTML

This example shows a grid of 18 cartoon faces, each rendered with slightly randomized eye and mouth sizes, creating a playful sense of variety. It uses React components to compose the face from separate SVG shapes: a yellow background circle, two eyes, and an arc-based mouth. The code leverages D3’s `arc` API to generate the mouth path, and React’s `range` utility from D3 to create the array of faces. Rendering is done entirely in SVG within a React application.

MMyGitUserName-dh
89% match
Loading thumbnail…

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

DV with D3

This example shows a grid of 18 cartoon faces rendered in React with SVG. Each face consists of a yellow background circle, two black eyes, and a mouth drawn using the d3.arc() API, with randomized eye radius for variation. The reusable React components—Face, FaceContainer, BackgroundCircle, Eyes, and Mouth—are composed to build the visual. The faces are generated from a d3.range() array, and the entire scene is rendered into the DOM using ReactDOM.render().

SSoujanya C. Aryal
89% match