MONNNA-ARCH

@MONNNA-ARCH·8 public vizzes

loading data

This example demonstrates how to load and display a remote CSV file using JavaScript’s Fetch API and async/await syntax. The page fetches a CSS color table from a GitHub Gist, converts the response to text with `response.text()`, and logs the contents to the browser console. It shows the progression from a commented-out multi-step promise chain to a simplified asynchronous function, illustrating the core pattern for retrieving external data before any visualization code runs.

Jan 17, 2021

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across a 960x500 SVG canvas in real time. Built with React 16.9, the app uses the `useState` and `useCallback` hooks to track pointer coordinates from the SVG element’s `onMouseMove` event, updating the circle’s `cx` and `cy` attributes via React’s declarative rendering. The initial mouse position is centered, and the component re-renders on every move without external data or animation libraries.

Jan 17, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face drawn with React and SVG, centered and scaled to fill the browser window. The face consists of a large circle for the head, two smaller circles for eyes, and relies on the SVG coordinate system for positioning. Using React 16.9 and ReactDOM, the code renders SVG elements with JSX, computing dimensions dynamically from `window.innerWidth` and `window.innerHeight`. The implementation uses hardcoded offsets for facial features, while the head radius adapts to the viewport height, creating a responsive visual.

Jan 17, 2021

Loading thumbnail…

Fork of Fork of Fork of Fork of Let's Make a Face Part Vi

A grid of randomized faces is rendered, each assembled from SVG shapes composed in React components. The face includes a pink background circle, two eyes of differing radii, a mouth drawn with d3’s `arc` API, and rectangular teeth. The `range` function from d3 generates the array, and `Math.random` drives variation in stroke width, eye offset, and mouth dimensions across the 18 instances. The `FaceContainer` uses an SVG `<g>` transform to center each face within its viewport.

Jan 15, 2021

Loading thumbnail…

Fork of Fork of Fork of Let's Make a Face Part V

A stylized smiley face built with React and rendered as SVG, composed of a pink background circle, two eyes with asymmetric radii and a brow line, two rectangular teeth, and an arc-based mouth. The mouth is generated using the d3.arc() API from d3.v6, while positioning is handled via a central group transform. Custom React components export each facial feature, taking size and offset props to control layout.

Jan 15, 2021

Loading thumbnail…

Fork of Fork of Let's Make a Face Part IV

This example shows a partial cartoon face built from SVG shapes, including two eyes, pink cheeks, a mouth arc, and teeth, arranged around a central group. The code uses React to render the SVG elements and D3 v6’s `arc()` API to generate the mouth path. A yellow background circle and black eyebrow lines are also drawn, with all positions computed relative to the viewport’s center. The visualization is a static composition that demonstrates how to combine React components with D3 shape generators for declarative SVG drawing.

Jan 15, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized face is drawn in SVG using React, with a pink circular head, two eyes, a line for a brow, and a smile rendered as an arc. The face is centered on a 960x500 canvas, with explicit coordinates for eye offsets and mouth dimensions. The code uses React’s createElement via JSX, d3’s `arc()` to generate the mouth path, and groups (`<g>`) with translate transforms to position features. Static data defines all shapes, and no interactive behavior is present.

Jan 15, 2021

Loading thumbnail…

emoji face

A yellow circle with a black outline forms the base of an emoji face, centered on a plain white canvas. Two smaller black circles serve as eyes, positioned symmetrically on either side of the face’s vertical axis. The SVG is defined directly in the HTML file, using standard SVG elements like `circle` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, rendered at a fixed 960 by 500 pixel viewport. No interactive or animated behavior is present.

Jan 10, 2021