PranshuBarar

@PranshuBarar·9 public vizzes

Fork of Fork of Smiley Face Part1

A grid of randomly generated smiley faces demonstrates reusable React components with D3’s `arc()` API for the mouth. Each face renders as an SVG via `FaceContainer`, composed of a yellow `BackgroundCircle`, two `Eyes`, and a `Mouth` path, with randomized stroke widths, eye offsets, radii, and mouth dimensions. The layout uses D3’s `range()` to produce 18 faces, each with slightly varying facial features, showing how deterministic SVG geometry and D3 utilities can create playful data-driven visualizations.

Feb 24, 2023

Loading thumbnail…

Fork of Smiley Face Part1

This example renders a stylized smiley face as a React component using SVG. The face is composed of a yellow background circle, two black eyes, and a mouth drawn with the D3 arc generator, all positioned via a translated group element. The face’s dimensions, stroke width, eye offsets, eye radius, and mouth parameters are controlled through props. The visualization demonstrates how D3 shape APIs can be integrated into React to create reusable, parameterized graphics.

Feb 24, 2023

Loading thumbnail…

Smiley Face Part1

A yellow smiley face is centered in an SVG, drawn with React components for the background circle, eyes, and mouth. The face uses a black stroke for the outer circle and features two black eyes positioned symmetrically. The mouth is created using d3’s `arc` generator with a specified inner radius and start/end angles. The design is parameterized with variables for dimensions, offsets, and stroke width, while a `FaceContainer` component handles the SVG and centering transform.

Feb 24, 2023

Loading thumbnail…

Fork of Smiley Face Part1

This example shows a yellow smiley face composed of a large circular background, two black eyes, and an arc-shaped mouth, all drawn as react components that render SVG elements. The code defines reusable components for the face’s parts and positions them using absolute pixel coordinates relative to a centered SVG group. It uses d3’s `arc` generator to create the mouth path, while React manages the component hierarchy. The rendering relies on SVG with minimal styling, leaving the face centered on a hidden-overflow page.

Feb 24, 2023

Loading thumbnail…

Smiley Face Part1

A composite SVG smiley face assembled from separate React components: a yellow circular face, two eyes, and a smiling mouth. The code imports `arc` from d3 to construct the mouth path and uses ReactDOM to render the face, centering it with an SVG `<g>` transform.

Feb 24, 2023

Loading thumbnail…

Smiley Face Part1

A smiley face rendered as an SVG using React and D3. The code draws a yellow background circle with a black stroke, two smaller circles for eyes positioned symmetrically around the center, and a mouth created with D3’s `arc` generator using specified inner and outer radii and angle extents. All shapes are placed inside a translated `<g>` group.

Feb 24, 2023

Loading thumbnail…

Fork of Fork of Smiley Face Part1

This example creates a stylized smiley face in an SVG canvas using React and D3.js. It renders a yellow circle with a black stroke as the face, two small black circles for eyes, and a mouth shaped using a D3 arc generator with specified inner and outer radii and start and end angles. The React application uses D3’s `arc()` API to define the mouth path, which is then drawn with a `path` element. All shapes are positioned relative to the canvas center using a `transform` attribute.

Feb 24, 2023

Loading thumbnail…

Fork of Smiley Face Part1

This example shows a yellow smiley face with two black eyes, drawn as three circles inside an SVG canvas. The face circle is centered and sized relative to the viewport dimensions, while the eye positions are calculated using offset constants. Built with React, the component uses JSX to render SVG elements, computing coordinates like `centerX` and `centerY` from the fixed width and height values. The code relies on React DOM’s `render` method to mount the component, with hardcoded numeric constants for the eye radius and offsets.

Feb 24, 2023

Loading thumbnail…

Smiley Face Part1

A static yellow circle with a black outline and two smaller circles for eyes forms a smiley face. The example is rendered as inline SVG in an HTML page, using React 18.2.0 to define the graphical elements. The code specifies the face's dimensions with explicit coordinates and radii, creating a simple vector illustration without animation or interaction.

Feb 24, 2023