Dataviz 2020 Assignment 1 Bryce Walsh

100%

Dataviz 2020 Assignment 1 Bryce Walsh

✓ Published0🌍 Public

Last edited Mar 9, 2021

Created on Mar 5, 2021

A grid of randomly generated cartoon faces fills the view, each face composed of a colored circle with two eyes and a curved mouth. Constructed with React, each face is a reusable component built from smaller SVG primitives. The D3.js library provides utility functions like `arc` for the mouth’s curved path and `range` to generate the array of faces, while all appearance parameters—colors, sizes, and positions—are randomly assigned on each render.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

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

82% match

Loading thumbnail…

Untitled

A grid of 18 procedurally generated cartoon faces is displayed, each rendered as an SVG circle with eyes and an arc-shaped mouth. The faces vary randomly in stroke width, eye offset, eye radius, and mouth dimensions, creating a playful sense of variety. The visualization uses React components to structure the face elements, while D3 v7’s `arc()` generator produces the mouth paths. Each face is drawn with a simple `<svg>` and `<g>` transform, with all random parameters generated on every render via `Math.random()` and the `range()` helper from D3.

Jjchen6912

82% match

Loading thumbnail…

Untitled

A grid of smiling faces, each with randomized facial features, fills the viewport. The faces are generated using React components that compose SVG shapes, including a yellow background circle, two eyes, and a curved mouth. The application uses the `d3.arc` function to define the mouth’s path and `d3.range` to create a 6-by-3 array of faces. Each face receives random values for eye offset, eye radius, mouth width, and mouth radius, resulting in a varied but cohesive pattern.

Bbsolomon103

81% match

Loading thumbnail…

Dataviz 2020_Ep10 - 6. Face Part 6 - Compartmentalizing Complexity

A grid of randomized faces demonstrates how React components can compartmentalize a complex visualization into modular parts. Each face combines a yellow background circle, two eyes, and a mouth, generated with random values for position, size, and stroke width. The example uses React for component composition and state, D3's `arc()` API for the mouth shape, and SVG for rendering. The `Face` component assembles smaller components—`BackGroundCircle`, `Eyes`, and `Mouth`—within a `FaceContainer`, showcasing a reusable, parameterized approach to building varied visual outputs.

MMinwoo Pak

81% match

Loading thumbnail…

Homework1

The visualization shows a grid of six by three cartoon faces, each randomly generated with varying eye and mouth sizes against a yellow background. Built with React and rendered as SVG, the code composes reusable components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`) and leverages D3’s `arc` generator to draw the smiling mouth shape. The faces are instantiated via `d3.range` and mapped in `index.js`, with attributes like `eyeRadius` and `mouthWidth` set through `Math.random()` for each iteration.

Hhuashe418

81% match

Loading thumbnail…

Face Part 1

A grid of procedurally generated cartoon faces shows variation in eye size, eye spacing, and mouth curvature. Each face is rendered as an SVG using React components for the face circle, eyes, and mouth. The code employs the D3 `arc` API to create the mouth path, while `d3.range` generates the repeating array of faces. Random values for eye radius, offset, and mouth dimensions drive the visual differences.

TTabassum Kakar

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