rhysagray

@rhysagray·4 public vizzes

Fork of Smiley Face Part III

This example shows a smiling face constructed from SVG shapes, built declaratively with React and rendered through D3’s arc generator for the mouth. A yellow circle forms the head, two black circles serve as eyes, and a curved path creates the smile, all positioned using D3’s arc() with precise start and end angles. The code uses d3.arc, React’s createElement (via JSX), and ReactDOM.render, with static dimensions hardcoded for a 960×500 viewport. The visualization demonstrates how React components can integrate D3 geometry functions to produce simple vector graphics.

Jan 9, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen smiley face using React and D3 v7, with SVG elements positioned relative to the window’s center. It draws a yellow circle for the head, two black eyes, and a mouth arc created via `d3.arc()` with fixed inner and outer radii. The React component manages the SVG structure, while D3 computes the mouth’s path. The code resizes dynamically by using `window.innerWidth` and `window.innerHeight` for the viewport dimensions. No interactive behavior is implemented; the visualization is static.

Jan 9, 2022

Loading thumbnail…

Hello HTML

This example shows a static SVG face built from three circles—a yellow head with black outlines and two smaller eye circles—rendered directly in the page body. It also initializes a React 17 app that mounts a simple "Hello JSX" heading into a separate root div using `ReactDOM.render`. The SVG markup uses explicit `cx`, `cy`, and `r` attributes, while the React code employs JSX components. No data source or interactivity is present; the visualization demonstrates basic SVG primitives alongside a minimal React setup.

Jan 9, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a plain HTML page that displays the text “Hello HTML!” centered on the screen, with the body’s font size increased to 3em via an external CSS stylesheet. The rendering relies on standard HTML elements for structure, a linked `styles.css` file for typographic and layout styling, and the browser’s default text rendering. No JavaScript or external visualization libraries are used; the page simply demonstrates a minimal setup for web-based content.

Jan 8, 2022