Skip to main content
SimilarExport ZIP
100%

Test dashboard

✓ Published0🌍 Public
Iiblub
Last edited Sep 21, 2021
Created on Sep 21, 2021
Forked from Fork of Hello HTML

This dashboard combines a React-rendered cartoon face with a D3.js streamgraph. The Face component uses SVG circles and an arc path to draw eyes, a mouth, and a yellow background circle, with randomized eye size on each render. The Streamgraph builds a stacked area chart from a CSV dataset, using `d3.stack` with `stackOffsetSilhouette` and `d3.area` to create overlapping series. The graph includes axis labels, a color scale via `d3.scaleOrdinal`, and an interactive tooltip that highlights areas on hover.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Test HTML

A cartoon face composed of SVG shapes is rendered on a yellow circle with a black stroke. The face includes two black eyes and a smile drawn as an arc path. The visualization uses React components to structure the face, with D3’s `arc` API generating the smile path. The face is centered within an SVG canvas of 960 by 500 pixels, and the code demonstrates a combination of React for UI components and D3 for geometric calculations.

PPathan Khuvanejarkhan
81% match
Loading thumbnail…

Data viz

A grid of 18 randomly generated cartoon faces fills the SVG canvas, each face composed of a yellow circle, two eyes, and a d3 arc-based mouth. The React components `Face`, `BackgroundCircle`, `EyeCircles`, `Mouth`, and `FaceContainer` render each face with randomized stroke widths, eye offsets, eye radii, and mouth dimensions. The visualization uses d3.v7’s `arc` generator to draw the mouth path and the `range` function to create the face array. Each render produces a unique arrangement of facial features.

NNenad Jovanovic
81% match
Loading thumbnail…

Testing viz

A grid of smiling cartoon faces animates with randomly sized eyes. Each face renders as an SVG composed of a yellow circle with a black stroke, two eyes, and an arc-shaped mouth. The example demonstrates how to use React components alongside D3’s arc generator (d3.arc) to build a composite, interactive visualization. The 30 faces are generated with d3.range, while each eye’s radius is determined by a random function, producing a lively, varied display.

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

Lets Make a Face

A grid of randomly generated cartoon faces demonstrates how React components and D3 shape generators can be composed into reusable visualizations. Each face uses a yellow background circle, offset black eyes, and a D3 arc-based mouth with randomized dimensions for eye radius, mouth width, and mouth radius. The React `Face` component assembles smaller `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, while a `FaceContainer` renders an SVG group translated to the center coordinates. D3’s `range` and `arc` utilities generate the grid and mouth paths, respectively.

BbeauMarko
79% match
Loading thumbnail…

Test

A smiling face built with React and D3.js renders inside an SVG, composed of independently defined components for the background circle, eyes, cheeks, and a mouth drawn with the d3.arc() API. The face uses a radial gradient for the cheeks, and fixed props define geometry like eye offset, radius, and stroke width. The React component hierarchy passes data-driven values down to each visual element, producing a static, scalable vector graphic.

WWhitney Hung
79% match
Loading thumbnail…

Hello HTML

This example renders a grid of cartoon faces using React components and D3’s `arc` API for the mouth shape. Each face combines a yellow background circle, two eyes, and a mouth, all drawn as SVG elements within a `FaceContainer` that translates the coordinate system to the center. The `range` function from D3 generates 18 faces, and the code demonstrates how React functional components and D3’s arc generator work together to produce repeated, data-driven SVG visuals. The page loads React and D3 from CDNs and renders the output into a root div.

Aask4jm
79% match
Loading thumbnail…

Tweak the Face - Part III - React-JS

This interactive React data visualization renders a stylized face constructed from SVG shapes, using D3.js utilities to define arcs and paths. The face is centered within a 960 by 500 pixel viewport, composed of a yellow circle with a black outline, two eyes, and a mouth formed by an arc. The entire composition is grouped and positioned using SVG transforms, with circles and paths placed relative to a central origin point. The code demonstrates how to combine React’s component-based structure with D3’s arc generator and SVG elements to create a playful, adjustable graphic.

MMarcus Vinicius da Silveira Richa
78% match