paulinemnguyen

@paulinemnguyen·7 public vizzes

Fork of Smiley Face Part V

This example shows a smiley face composed of a yellow circle, two eyes, and an arc-shaped mouth, all rendered as SVG elements. The code separates each facial feature into its own React component using ES6 modules, with React Fragments grouping the eyes. D3’s `arc` generator creates the mouth path, while ReactDOM renders the full composition onto an SVG canvas.

Aug 17, 2022

Loading thumbnail…

Fork of Smiley Face Part IV

A classic yellow smiley face is rendered as a single SVG, centered on a 960×500 canvas. The code constructs the face from three React components: a yellow circle with a black stroke for the background, two black circles for the eyes, and a black arc path for the mouth, which is generated using D3's `arc` function with specified inner and outer radii and angles.

Aug 17, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a classic yellow smiley face rendered as a scalable vector graphic (SVG) composed of a large circle for the head, two smaller circles for eyes, and an arc-based mouth. The visualization is built with React components that leverage D3’s `arc()` generator to define the mouth’s path, while circle coordinates and radii are set as explicit values like `eyeOffsetX`, `eyeRadius`, and `mouthRadius`. The code uses React 16.9, D3 v5, and both libraries are loaded via UMD bundles.

Aug 17, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face built with React and D3’s `arc` generator, rendered as SVG. The face uses a yellow background circle with a black stroke, two fixed eye circles, and a mouth drawn as an arc path defined by inner/outer radii and start/end angles. React components manage the SVG elements, while D3’s `arc()` computes the mouth’s path geometry. The code explicitly sets the face dimensions, eye offsets, and mouth radius, but does not include any interaction or animation.

Aug 17, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as a scalable vector graphic, with two eyes and a curved mouth positioned symmetrically around the center of the viewport. Built with React and D3 v7, the visualization uses the `d3.arc()` API to generate the mouth’s path, while circles are drawn directly as SVG elements. The graphic fills the entire browser window, with dimensions and positions computed from `window.innerWidth` and `window.innerHeight`. The face is centered via a group transformation, and the code is structured as a React component that mounts into the DOM using `ReactDOM.render`.

Aug 16, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face drawn with SVG circles, centered and scaled to fill the browser window. The face’s head, eyes, and mouth are positioned using React components, with the mouth omitted from the final render despite being defined in the code. React 16.9 and ReactDOM render the SVG elements, while JavaScript variables compute the window dimensions and facial feature offsets. The styling and stroke widths are set inline within the JSX markup, and the code is intentionally left as a fork of a prior smiley face implementation.

Aug 16, 2022

Loading thumbnail…

Smiley Face Part I

A single yellow circle with a black outline appears centered on a white background, rendering as the first step of a smiley face in React and SVG. The code uses React 18.2.0 and ReactDOM to create an SVG element, defining a circle with a radius based on the viewport height and a fixed stroke width. No data source is involved; the visualization is purely geometric, set within a 960x500 coordinate space.

Aug 16, 2022