ShiryaW

@ShiryaW·4 public vizzes

Mouse Follower

A circle tracks the mouse cursor across an SVG canvas, moving fluidly with each pointer movement. Clicking the canvas loads a CSV file from a remote GitHub repository, then calculates and displays the average temperature recorded at the Friman Metsola collective. The visualization uses React's `useState` and `useCallback` hooks, with D3's `csv()` function parsing the data, while the circle's position updates through an `onMouseMove` event handler. The SVG circle and text overlay are rendered within a full-screen viewport.

Jan 13, 2022

Loading thumbnail…

Let's Make All The Faces

The visualization displays a grid of 21 identical gradient-faced smiley characters, each rendered as a separate React SVG component. Built with React 16.9 and D3 v7, it uses D3’s `arc` generator to draw the mouth, while eyes, nose, and background circle are plain SVG shapes. A linear gradient defined in SVG `<defs>` fills each face, and all faces share fixed proportions from a single `faceProps` object, with the `range` function from D3 generating the repeated array.

Jan 13, 2022

Loading thumbnail…

Fork of Let's Make a Face Part II

This example shows a simple yellow smiley face built from three SVG circles, all rendered inside a React component. The face is centered within a 960 by 500 pixel viewport, with the head outlined in black and two smaller circles serving as eyes. The code uses React’s `ReactDOM.render` to mount an `<App>` component that directly returns an `<svg>` element with hardcoded `cx`, `cy`, and `r` values derived from the viewport dimensions. Rendering relies on the browser’s native SVG support, and no external data sources or interaction logic are present.

Jan 12, 2022

Loading thumbnail…

Fork of Hello HTML

A yellow smiley face rendered as a static SVG drawing, featuring a large outlined circle for the head and two smaller unfilled circles for eyes. The SVG is defined directly in the HTML markup with hardcoded coordinates and dimensions, using no JavaScript libraries or data sources. The face is centered at a fixed position on a 960 by 500 canvas, with a thick black stroke and solid yellow fill for the head. The rendering relies solely on native SVG circle elements with explicit attributes for radius, position, and styling.

Jan 12, 2022