Fork of Let's Make a Face Part I

Fork of Let's Make a Face Part I

This example shows a simple smiley face built with React and D3, rendered as SVG. It draws a yellow circle with a black stroke, two eyes, and a curved mouth using the `d3.arc()` generator. The face is centered via a `<g>` transform, with eye and mouth positions computed from offset constants. The code uses React 16.9 for DOM rendering and D3 v5 for the arc path calculation, with all shapes drawn declaratively as SVG elements.

Aatqlong

Fork of Let's Make a Face Part I

A stylized smiley face rendered in SVG, built with React and D3 v7, centers a yellow circle with a black stroke on a 960 by 500 canvas. The face uses D3's `arc()` generator to draw a mouth as a thick arc, while two offset circles serve as eyes. React manages the component structure, and D3 calculates the mouth’s path geometry based on specified radius and angle values. The example demonstrates composing SVG primitives with D3 shape generators inside a React render tree.

Uubik-valis

Fork of Let's Make a Face Part I

This example shows a simple smiley face built with React and D3, rendered as SVG with a yellow face, two eyes, and a curved mouth. The code uses D3's `arc()` generator to create the mouth shape, while React handles the component structure and JSX for the SVG elements. The face is centered with fixed dimensions, and positioning relies on calculated offsets for the eyes and mouth radius. D3 v7 facilitates the arc path generation, while React 16.9 manages the DOM rendering.

AAshwin

Fork of Let's Make a Face Part I

This example renders a yellow smiley face composed of SVG shapes, including a background circle, two eyes, and a curved mouth, all positioned within a centered group. The face is built using React components such as `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth drawn using the `d3.arc()` API. The code uses React 18, D3 v7, and SVG rendering, with configurable props for eye offset, radius, and stroke width. The visualization is a static composition demonstrating modular component reuse and D3’s arc generator for path creation.

Bbhavani44

Fork of Let's Make a Face Part I

A stylized smiley face built with React and D3 renders as a yellow circle with black stroke, two eyes, and a mouth. The face is constructed from reusable React components, with D3’s `arc` generator creating the mouth’s curved path. All shapes are drawn as SVG elements inside a centered `<g>` transform, using fixed numeric values for positioning and radii. The code organizes components for the background, eyes, mouth, and face container, with no external data—only hardcoded geometry. This example demonstrates modular component composition and D3’s shape API within a React rendering pipeline.

Sstpvizzy

Fork of Let's Make a Face Part I

This example shows a stylized smiley face built from three reusable SVG components: a yellow background circle, a pair of eyes, and a mouth drawn as an arc. The face is positioned at the center of a 1060×500 SVG canvas using React components that receive geometry props for radii and offsets. The mouth path is generated with d3.arc(), while BackgroundCircle and Eyes render plain SVG circle elements. React 16.9 and D3 v7 work together, with all drawing handled declaratively through JSX.

Rrishyossarian

Fork of Let's Make a Face Part I

This example uses React and D3 to draw a smiley face with SVG primitives. It shows a yellow circle head with two black eyes and a curved mouth rendered as an arc. The code constructs the mouth using the `d3.arc()` generator, setting inner and outer radii and start and end angles for a half-circle opening. The fixed dimensions are centered in a 960×500 viewport, with all facial features positioned relative to the center using SVG’s `transform` attribute and D3’s arc path output. The implementation uses React 16.9 and D3 v6.

Ddeep1358

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from SVG shapes within a React component, using D3.js to generate the mouth arc. A yellow circle with a thick black stroke forms the head, while two black circles serve as eyes positioned symmetrically around the center. The mouth is created with the D3 `arc` function, which defines an inner and outer radius plus start and end angles to produce a semicircular path. The code uses React 17 and D3 v7, rendering everything to a fixed 960×500 SVG canvas.

SSrijan Nayak