Fork of d3 CSV

100%

Fork of d3 CSV

✓ Published1🌍 Public

Last edited Jan 6, 2022

Created on Jan 6, 2022

Forked from d3

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

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

93% 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 Hello HTML

This example renders a grid of eighteen identical cartoon faces, each built from SVG circles and an arc. The faces are generated using React components, with D3’s `arc` generator defining the mouth and `d3.range` creating the array. Each face receives randomized smile angles, while all other facial features remain fixed. The visualization demonstrates component reuse in React combined with D3’s geometric helpers, outputting static SVG shapes without interaction.

Uuplusv

88% match

Loading thumbnail…

Fork of Hello HTML

This example shows a grid of 18 cartoon faces, each with yellow circular backgrounds, black-outlined strokes, eyes, and arched mouths. The faces are rendered as SVG elements using React components, with D3’s `arc` function generating the mouth paths. Randomness is applied to eye radius per face, creating slight variation across the grid. The code uses React 16.9 and D3 v6, with components like `FaceContainer` handling the SVG coordinate transforms.

AAengus Hearne

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

88% match

Loading thumbnail…

Fork of Hello HTML

This example shows a grid of 18 randomly generated cartoon faces rendered as SVG. Each face combines a yellow background circle, two eyes, and a mouth, with their sizes and positions randomized within a defined range. The visualization uses React components to assemble the facial features, with the D3 `arc` API generating the mouth shape as a path. D3's `range` function creates the array of faces, and the entire composition is displayed in a bare minimum HTML page.

Iinar-vision

88% match

Loading thumbnail…

Fork of HTML Starter

This example renders a grid of 18 cartoon faces using React components, each with randomized facial features such as eye offset, eye radius, mouth radius, and stroke width. The faces are composed of SVG circles and a D3 arc path for the mouth, assembled via reusable components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. D3’s `arc` API generates the mouth shape, while `range` from D3 creates the array of faces. The SVG output is positioned using a centered `<g>` transform, with all styling handled through inline SVG attributes.

Ee-ines

88% match