Franz Tapia Chaca

@franztapiac·3 public vizzes

Fork of Smiley Face Part III

A fork of the “Smiley Face Part III” example renders a classic smiley face as a static SVG using React and D3. The visualization shows a yellow circle with a black border, two black eyes, and a mouth drawn as an arc. The code defines reusable React modules, including `BackgroundCircle` and `Eyes`, while the mouth path is generated using D3’s `arc()` API. All elements are positioned relative to the center of a 960-by-500 SVG canvas, demonstrating a simple composition of geometric primitives within a React-driven rendering pipeline.

Oct 17, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

A yellow smiley face is drawn in SVG, centered on a 960-by-500 canvas, with black-stroked circular eyes and a mouth arc. Built with React 16.9 and D3 v5, the example uses the `d3.arc` path generator to create the mouth and React components to render the SVG elements, including a background circle defined by a custom `BackgroundCircle` component.

Oct 17, 2021

Loading thumbnail…

Smiley Face part 1

A yellow smiley face rendered as vector graphics, built with React and D3 version 7, is drawn within an SVG. The code constructs a central yellow circle with a black outline, two black eye circles, and a path for the mouth using D3’s `arc` generator with specified inner and outer radii and angle range. The components are positioned relative to the SVG center using a transform, with distances defined by constants like `eyeOffsetX`, `eyeOffsetY`, and `eyeRadius`. The React component renders the SVG, and D3’s `arc` computes the mouth’s curved path.

Oct 17, 2021