d3 — VizHub

100%

d3

✓ Published2🌍 Public

Last edited Jan 8, 2022

Created on Jan 6, 2022

Nine small yellow faces fill the gallery, each a simple SVG composition of a black-stroked circle, two eyes, and an arc-shaped mouth. The React app maps over a range of nine, rendering each `Face` component with randomized dimensions from `utils.js` for stroke width, eye offset, eye radius, and mouth parameters. The `Mouth` uses d3’s `arc` to generate a path, while the `FaceContainer` wraps everything in an SVG group, and varying titles add a playful header to each face.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 React Face

Ten identical cartoon faces are arranged in a row, each rendered as a yellow SVG circle with black outlines, two eyes, and a mouth. The example demonstrates the composition of reusable React components (`BackgroundCircle`, `Eye`, `Mouth`) assembled into a `Face` element. The `Mouth` uses the D3 v7 `arc` generator to create a curved path, while the `FaceContainer` handles the SVG coordinate translation. The `App` component maps over an array to render the repeated faces.

MMark Lam

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

91% 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…

My Face

A grid of eighteen faces, each composed of SVG shapes, is rendered using React and D3. The face components, including a yellow background circle, black eyes, and a mouth arc, are drawn with randomized parameters for stroke width, eye radius, and mouth size. The mouth uses D3’s `arc` function to generate a path, while the layout is positioned via SVG transformations within a `FaceContainer` that sets the canvas dimensions.

SSnaglaGrobspit

88% match

Loading thumbnail…

D3

A cartoon yellow face is rendered as a reusable React component, assembled from separate SVG parts for its background circle, eyes, and mouth. The code builds each facial feature as an independent React component, then composes them in an `App` component using a `FaceContainer` that centers the drawing within an SVG canvas. The mouth uses the D3 `arc` generator to create a U-shaped smile, while the eyes are simple circles offset from the center, and the face’s dimensions are calculated from the viewport height. All drawing occurs via SVG within a React framework, with D3 v6 providing the arc path calculation.

KKenGondor

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

88% match

Loading thumbnail…

Fork of Fork of d3 CSV

Nine cartoon faces render in a three-by-three grid, each drawn as a yellow SVG circle with black stroke, two eyes, and an arc-based mouth. The React components compose the faces from separate `BackgroundCircle`, `Eye`, and `Mouth` elements, while `d3.arc` generates the mouth path. Random values from `utils.js` determine stroke width, eye offset, eye radius, and mouth dimensions, giving each face slightly different proportions. The `FaceContainer` translates the SVG group to center each face within a 300 by 300 viewport.

Mmartfhill

88% match

Loading thumbnail…

1. Faces

A grid of eighteen cartoon faces rendered with React and SVG, each featuring a yellow circular head, black eyes, and an arc-based mouth. The faces vary slightly in stroke width, eye offset and radius, and mouth dimensions due to randomized parameters. The visualization demonstrates reusable React components, including `FaceContainer` for SVG positioning and `Mouth` using d3’s `arc` generator to create the mouth shape.

DDenis Zjukow

88% match