My First Viz - Smiley

100%

My First Viz - Smiley

✓ Published0🌍 Public

Last edited Nov 30, 2021

Created on Nov 27, 2021

A stylized smiley face rendered as an SVG using React components, with a yellow circular background, black eyes, and a curved mouth. The face is centered via SVG groups and layering modular React components like `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is generated using the d3 `arc` function with configurable radius, width, and amplitude parameters. The example demonstrates a declarative, component-based approach to data visualization, where geometric props (e.g., `eyeOffset`, `mouthRadius`) control the appearance. Rendering uses React DOM with version 16.7 and d3 v7, all within a simple HTML page.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

1.Viz: Smiley Face Part 1

This example renders a yellow smiley face using React and D3 within an SVG. The face consists of a circle for the head, two smaller circles for the eyes, and a curved path for the mouth, created with the d3.arc generator using specified inner and outer radii and start/end angles. The code sets the mouth arc’s angle range from PI/2 to 3PI/2, forming a downward-facing smile. It uses D3 v7 and React 18, with static positioning for the facial features.

GGutManuel85

89% match

Loading thumbnail…

My First Face

A yellow smiley face drawn with SVG circles and a mouth arc takes center stage. The code uses React to render the SVG structure and the d3 `arc` generator to create the mouth path. Each eye is placed using simple coordinate offsets, while the face radius and stroke width are derived from the chart dimensions. The entire face group is translated to the center of a 960 by 500 viewport, with the mouth arc configured between specified start and end angles.

TTHB-account

89% match

Loading thumbnail…

Smiley Face Part 1

This example displays a stylized smiley face built entirely from SVG primitives. The face consists of a large yellow circle with a black outline, two smaller black circles as eyes, and a smile created using a D3 arc generator. The layout is computed through JavaScript variables for centering and offsets. React renders the SVG elements declaratively, while the reusable VizContainer component structures the chart by separating margins and inner drawing areas.

Aaverma08

89% match

Loading thumbnail…

Viz-Hub Smiley

This example renders a simple smiley face using React and D3 v6, drawing the head, eyes, and mouth as SVG elements. The face is centered via a group with a translate transform, and the yellow circular head has a black stroke. The mouth is generated using the `arc` helper from the `d3-shape` package, configured with inner and outer radii and start/end angles to form a curved line. Two black circles positioned at fixed offsets serve as the eyes, and the entire composition is static with hard-coded dimensions and no data input.

SSharmilaChowdhari

88% match

Loading thumbnail…

My first Smiley Face

A smiley face rendered in SVG, composed of a circular head with facial features positioned symmetrically around the center. The code uses React to create the SVG elements and D3’s `arc` generator to draw the mouth, nose, and a partially overlapping cheek shape. Constants define geometry such as eye offsets, radii, and stroke widths, while a `<g>` transform centers the composition. The figure is fully built from primitive shapes rather than data-driven inputs.

SSkye Chen

88% match

Loading thumbnail…

Smiley Face V

This example shows a simple smiley face composed of a yellow circular background, two black eyes, and a half-circle mouth, all rendered as SVG elements through a React component. The face is centered within a 960 by 500 viewport using a group transform. The code constructs the face from three modular React components: `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is generated using the `d3.arc` API, which defines a path with specified inner and outer radii and angular span.

PPaul B

88% match

Loading thumbnail…

Smiley Face Part I

A yellow smiley face rendered with SVG displays a circular head, two eyes, and an arc-shaped mouth. The visualization uses React to structure the SVG elements and D3's `arc()` generator to create the mouth path. The code sets explicit dimensions, positions the face at the center, and applies a black stroke around the head. No data is loaded; the face is purely constructed from hard-coded geometry values like `centerX`, `eyeOffsetX`, and `mouthRadius`.

Yyuzhang21

88% match

Loading thumbnail…

Smiley Face - Part V

This example shows a smiley face composed of a yellow circle, two eyes, and an arc-shaped mouth, all rendered as SVG elements within a React component. The face is centered using SVG group transforms, with size and position controlled by constants for radius, offsets, and stroke width. The code imports React for component structure and d3’s `arc` API to generate the mouth path, while the background circle and eyes are plain SVG `<circle>` elements. The visualization uses d3.v7 and React 16.9, with all geometry defined relative to a central origin for easy scaling.

Aamandaweisbrod18@gmail.com

88% match