Assignment 1: 66 DOD

100%

Assignment 1: 66 DOD

✓ Published0🌍 Public

Last edited Mar 4, 2022

Created on Feb 21, 2022

The visualization displays a grid of 18 randomly generated smiley faces, each rendered as a yellow circle with black eyes, white pupils, and an arc-based mouth. Built with React and D3 v7, the code composes reusable components like `BackgroundCircle`, `Eyes`, and `Mouth` using SVG elements. Each face’s eye radius, pupil size, and mouth width vary via `Math.random()`, creating subtle visual diversity across the repeated layout. The `d3.arc` API generates the mouth curves, while SVG circles handle facial features within a translated coordinate system.

AI-generated description

A smiley face but trying to make it cuter XD

MIT Licensed

Similar vizzes

Loading thumbnail…

AIT684_Coding_Participation6_1

The visualization renders a grid of eighteen smiley faces, each composed of SVG circles and a d3 arc path for the mouth. The faces are generated randomly using React components, with each face’s fill color, stroke width, eye position and radius, and mouth dimensions varying per instance based on JavaScript’s `Math.random`. The `d3.arc` API creates the mouth, while `d3.range` drives the array mapping. All faces share the same randomly chosen hexadecimal background color, computed once from a random number, and are drawn inside a shared SVG viewport using the `FaceContainer` component.

CCrossZeigler

87% match

Loading thumbnail…

Smiley Face Part 1

The visualization shows a grid of 18 randomly generated smiley faces, each drawn with a yellow circular background, two eyes, and a mouth using an SVG arc. Faces vary slightly in eye offset and radius due to `Math.random()` values applied per face, while the mouth is rendered with a fixed radius and width. Built with React and D3 v7, the code uses the `arc()` generator from d3-shape to create the mouth path, and reusable React components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` to compose each face within an SVG group translated to the center.

BbeauMarko

86% match

Loading thumbnail…

Smiley Face Part I

Eighteen smiley faces form a grid, each with randomized facial features. A yellow circle with a black stroke serves as the head, while two eyes and an arc-shaped mouth vary in size and position. Built with React components, the visualization uses D3’s `arc` generator to construct each mouth path. The faces render as SVG elements within a container, with random values assigned to stroke width, eye offset, eye radius, and mouth dimensions via `Math.random()`.

Ttharuta

86% match

Loading thumbnail…

Assignment1

This example uses React and D3 to render a stylized smiley face as an SVG graphic. The face is composed of a yellow circle with a black stroke, two black eyes, and a mouth drawn using the D3 `arc` generator with specified inner and outer radii and angles. The `arc` path is generated with `d3.arc()`, while React manages the SVG elements and D3 v6 provides the arc calculation. The visualization demonstrates a simple, static data-free composition with hardcoded dimensions and coordinates.

AAtharvap2000

86% match

Loading thumbnail…

Smiley Face Part 1

The visualization displays a grid of eighteen randomly generated smiley faces, each composed of a yellow circle, black eyes, and an arched mouth. Using React components, the faces render as SVG elements with D3’s `arc` generator for the mouth path. Random values for stroke width, eye offset, eye radius, and mouth dimensions create variation across the grid, while the `range` function from D3 generates the array of face instances.

Ggeorgie-flood

86% match

Loading thumbnail…

Smile 1

A grid of 18 smiley faces, each rendered as a yellow circle with black strokes, eyes, and an arc-based mouth. The faces vary randomly in eye radius due to `Math.random()`, creating subtle differences across the repeated components. Built with React and D3 v7, the visualization uses reusable components like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth path generated by `d3.arc()`. Each face is drawn into an SVG via a `FaceContainer` that centers a `<g>` element using a transform.

KKIRRAN P L

86% match

Loading thumbnail…

Smiley Face Part I

This example shows a grid of 18 randomly generated smiley faces, each with distinct eye sizes and mouth shapes. Built with React and D3 v7, the visualization reuses modular SVG components—`Face`, `BackgroundCircle`, `Eyes`, and `Mouth`—to construct every face. The `Mouth` component uses the `d3.arc()` API to draw curved paths, while `d3.range()` generates the face array, and random properties for eye radius and mouth dimensions vary each rendering. All faces are drawn in a single SVG container using transformed coordinate groups.

Bbingsen0806

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

86% match