Skip to main content
SimilarExport ZIP
100%

DV with D3

✓ Published0🌍 Public
SSoujanya C. Aryal
Last edited Dec 30, 2023
Created on Dec 30, 2023
Forked from HTML Starter

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().

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

Data Visualization

This example generates a grid of identical cartoon faces using React and D3 v7, rendered as SVG. Each face combines a yellow circle, two eyes, and an arch-shaped mouth built with D3’s `arc` generator. The `FaceContainer` wraps the SVG and applies a translation to center the components. The code uses React’s `createElement` pattern via JSX, with all faces produced by mapping over a `range(6*3)` array from D3 to create 18 repeated copies.

Belay Birhanu Gibina
90% 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
89% match
Loading thumbnail…

SVG face w/ React

A grid of eighteen randomly generated cartoon faces fills the screen, each with a yellow head, two eyes, and an arc-shaped mouth. The example demonstrates reusable React functional components, including `Face`, `Eyes`, and `Mouth`, which render SVG elements. It uses the `d3.arc` API to define mouth paths, `d3.range` to generate the grid, and random values for each face's dimensions. The `FaceContainer` component structures the SVG scaling, while `ReactDOM.render` mounts the application without animation or interaction.

AAnthony Ynami
89% match
Loading thumbnail…

d3 Face

The gallery shows a grid of six by three cartoon faces, each rendered as a yellow circle with black outlines, two eyes, and a smiling mouth. Built with React components that compose SVG shapes, the faces use d3.arc to generate the mouth path and d3.range to create the repeated face instances. Randomization varies eye and mouth sizes and proportions per face, producing a playful mosaic of subtly different expressions while each face maintains consistent positioning within its own viewport.

PPedrinT
89% match
Loading thumbnail…

react

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.

AAnimesh Nautiyal
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…

Simley D3 and React Part VII

A grid of randomly generated cartoon faces fills the screen, each with a yellow circular head, black outline, two eyes, and a D3 arc-based mouth. The example demonstrates reusable React components—BackgroundCircle, Eyes, Mouth, and Face—composed within an SVG container. D3 v7 generates the mouth paths via `d3.arc()`, while React’s `range()` from D3 creates an array of 45 faces, each with randomized dimensions for stroke, eye position, and mouth size. Rendering is entirely SVG-based without external data.

Bbakstorage00001
89% match