sophiasharif

@sophiasharif·4 public vizzes

Mouse Follower

This example shows a smiley face rendered as an SVG that follows the mouse cursor across the full browser viewport. The React component tracks the pointer position through an `onMouseMove` event handler on the SVG element, updating the circle’s `cx` and `cy` coordinates via React state. The code uses React 16.9 with `useState` and `ReactDOM.render`, alongside core SVG primitives such as `<circle>` and `<g>`. The initial mouse position is centered at half the window’s width and height.

Aug 30, 2022

Loading thumbnail…

CSS colors

This example demonstrates how to fetch and log a CSV dataset of CSS named colors from a GitHub gist using the native Fetch API, then render a static “Hello HTML!” message styled with CSS. The code defines a `.message` class with a large font size and center alignment, but does not yet visualize the color data. It relies on `fetchText` with `async`/`await` to retrieve the CSV text and prints it to the console. The page uses plain HTML, CSS, and JavaScript without external libraries.

Aug 30, 2022

Loading thumbnail…

Fork of HTML Starter

This example renders a stylized face using React components and D3’s `arc` generator for the mouth. The face is composed of separate SVG elements—a yellow background circle, two eyes, and an arc-shaped mouth—arranged within an SVG container via a transform. The `Face` component receives props for geometry such as eye offset, radius, and stroke width, and the code uses React 16.9 and D3 v7 to build the SVG output dynamically.

Aug 30, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This interactive visualization renders a smiley face as a full-window SVG graphic using React. The code creates a yellow circle with a black stroke, positioned at the center of the viewport, and adds two smaller circles for eyes at fixed offsets. The implementation uses ReactDOM to render the SVG elements directly into the DOM, with the face dimensions calculated from the browser window’s width and height. The drawing relies on basic SVG shapes—circle elements and a transform group—rather than external data sources or charting libraries.

Aug 30, 2022