Sadaf Siddiqui

@halfbug·2 public vizzes

Fork of Smiley Face Part III

This example uses React and D3 to render a simplified smiley face as an SVG graphic. The face is composed of a yellow circle with a black outline, two eye circles, and a mouth drawn as an arc path generated by the D3 `arc` function. The React component builds the SVG elements declaratively, while D3’s arc API calculates the mouth’s path based on specified angles and radii. The layout is centered and sized using the `width`, `height`, and translation transformations from the code.

Sep 7, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a responsive smiley face rendered as an SVG using React components for scalable vector graphics. The face consists of a yellow circle with a black stroke, two eye circles, and a mouth arc, all positioned relative to the window dimensions. The code uses React’s `createElement` API via JSX, `ReactDOM.render` to mount the app, and D3 v7’s `arc` function (imported but not used in the visible code) to define the mouth shape. Rendering adapts to the browser viewport through `window.innerWidth` and `window.innerHeight`.

Sep 7, 2021