VIBHANSHU RAI

@morty011·3 public vizzes

smiley face

This example renders a yellow smiley face from modular React components, combining a background circle, two eyes, and a mouth arc. The face is assembled using SVG circles and a path generated by the `d3.arc()` API, with the mouth’s shape determined by inner and outer radii and start/end angles. The `Face` component composes separate `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, all positioned via a centered `<g>` transform within an SVG container. D3 v7 provides the arc generator, while React manages the component hierarchy and props for sizing, offsets, and stroke widths.

Jul 21, 2022

Loading thumbnail…

Fork of Smiley Face Part 1

A vector smiley face is rendered as a yellow circle with a black outline, two eyes, and a curved mouth, all built from composable React components. The Face component assembles a FaceContainer SVG, a BackgroundCircle, Eyes, and Mouth. The mouth uses the D3 arc generator to create a semicircular path, while the overall composition is placed using a translate transform. The example demonstrates a modular approach to constructing SVG graphics with React and D3.

Jul 21, 2022

Loading thumbnail…

Smiley Face Part 1

This example displays a yellow smiley face drawn with SVG primitives: a large circle for the head and two smaller circles for the eyes, all centered on a 960 by 500 canvas. It uses React 18.2.0 from a UMD build, but the visualization itself is static markup in the HTML, with JavaScript only logging “React” to the console. The SVG elements are intentionally positioned, with the head stroked in black and a comment noting the vertical centering calculation. No smile is present yet, reflecting its “Part 1” status.

Jul 15, 2022