Fork of Fork of d3 CSV

100%

Fork of Fork of d3 CSV

✓ Published0🌍 Public

Last edited Jan 6, 2022

Created on Jan 6, 2022

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of d3 CSV

This example displays a 3x3 grid of cartoon faces, each with randomized facial features, rendered as SVG circles, eyes, and mouths. Built with React and D3, it uses `d3.arc` to generate mouth paths and `d3.range` to create the grid array. The face geometry—including eye offsets, radii, and stroke width—varies per render due to random values from a shared `utils.js` module. The `FaceContainer` component applies a centered translation to position each face within its SVG canvas.

Mmartfhill

94% match

Loading thumbnail…

Fork of d3 csv

This example renders a cartoon face with randomized facial features, including eyes, a mouth, and a yellow background circle, centered inside an SVG canvas. The face is built from React components that compose SVG elements, with dimensions and offsets generated randomly in `utils.js`. The mouth shape is drawn using d3’s `arc` generator, while the face container applies a translation transform to center the group. The app imports a CSV dataset from a GitHub gist using `d3.csv`, though the data is not used in the visualization.

Mmartfhill

91% match

Loading thumbnail…

Fork of Fork of face_version5

A grid of eighteen procedurally generated cartoon faces, each composed of a yellow circle, two eyes, and an arc-based mouth, demonstrates the variability possible through randomized parameters. The React components `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` compose individual SVGs, with `FaceContainer` managing the coordinate transform. Using d3’s `arc` generator, the mouth shape is defined by inner and outer radii and specific angles, while `Math.random()` varies stroke widths, offsets, radii, and mouth curvature across the batch, making every face slightly different.

114Hazel

90% match

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen randomly generated cartoon faces renders in React, each composed of a yellow SVG circle, two eyes, and an arc-based mouth. The faces vary in stroke width, eye offset, eye radius, mouth width, and mouth radius, all assigned through `Math.random()`. The code uses React 18 for component composition, D3 v7 for the `arc()` shape generator, and renders to SVG via a shared `FaceContainer`.

NNana Kwame

89% match

Loading thumbnail…

Fork of Hello HTML

This example displays a 6x3 grid of cartoon faces, each with a yellow circular background, black stroke, two eyes, and an arched mouth. The faces are rendered as React components using SVG elements, with each face’s eye radius, mouth width, and mouth radius randomized on every render. The code leverages React’s functional components, `d3.range` for array generation, and the `d3.arc` API to draw the mouth path, all composed within a custom `FaceContainer` that wraps the SVG output.

Ssumakokima2

89% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example uses React to generate a grid of cartoon faces, each with randomized eye and mouth sizes. The faces are drawn using Scalable Vector Graphics (SVG) components, with the `d3.arc` API creating the curved mouth shape within a `path` element. Each face is composed of a yellow background circle, two eyes positioned by offset values, and a mouth whose radius and width vary, all wrapped in a `FaceContainer` that translates the SVG coordinate system. The code modularizes each facial feature into separate React components, making the composition easy to modify and reuse.

HHui Wang

89% match

Loading thumbnail…

Fork of HTML Starter

A grid of 10 cartoon faces renders in SVG via React components, each with a yellow circular background, magenta eyes, and a smile drawn using a D3 arc path. The faces vary randomly in eye radius and mouth dimensions per render, generated using `Math.random()` within the React `App` component. D3 v7 provides the `arc` generator for the mouths, while React functional components like `BackgroundCircle`, `Eyes`, and `FaceContainer` assemble the SVG elements. The code uses React 18 with `ReactDOM.render` to mount the visualization into the page.

Ttim10133222

89% match

Loading thumbnail…

Fork of Fork of Fork of Hello HTML

A grid of randomly generated cartoon faces appears, each rendered as an SVG with a yellow circular background, eyes, brows, and a mouth. The faces vary in feature size and position, driven by random values passed as props from React components. The example uses React to compose reusable components like `Face`, `Eyes`, and `Mouth`, while leveraging D3’s `arc` generator to create the curved mouth and brow paths. All output is drawn with SVG elements on a blank page.

MMegRocky

89% match