Aun Zaidi

@SyedAunZaidi·3 public vizzes

Fork of Smiley Face Part II

A yellow smiley face is drawn across the full browser window using React components and D3’s `arc` generator for the mouth. The face consists of a large yellow circle with a black stroke, two solid black eye circles, and a curved mouth path created by `arc()` with specified inner and outer radii and angular extents. All shapes are rendered as SVG elements, with positions computed from `window.innerWidth` and `window.innerHeight`. The code imports `arc` from `d3` and uses React’s `ReactDOM.render` to mount the SVG to the root element.

Apr 10, 2021

Loading thumbnail…

Smiley Face

This example renders a smiley face using React functional components and ReactDOM to mount the app. It integrates React 17 with the UMD build, loading both React and ReactDOM from a CDN. The visualization is drawn entirely through React’s JSX syntax within an empty App component, which currently renders no visible output. The code sets up a minimal HTML page with CSS to hide body margins and overflow, but no SVG, canvas, or charting library is used.

Apr 10, 2021

Loading thumbnail…

Smiley Face

A yellow smiley face rendered as an SVG in React, with two black circles for eyes inside a larger yellow circle outlined in black. The code uses ReactDOM to render the SVG elements, and imports the `arc` function from D3, though it is not used in the visible logic. Dimensions and positions are calculated from fixed width and height constants, with explicit offsets for eye placement.

Apr 10, 2021