Asim Sheikh

@asimsheikh·3 public vizzes

Mouse Follower

A yellow smiley face with two eyes fills the browser window, rendered as a static SVG circle with a thick black stroke. The face is centered using React’s JSX component structure, with coordinates derived from `window.innerWidth` and `window.innerHeight`. The eyes are positioned via fixed offsets, while the face radius is calculated from the viewport height, leaving a margin for the stroke width. All shapes are drawn with SVG primitives, and the component is mounted into the DOM using `ReactDOM.render`.

Mar 7, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and inspect a CSV file directly in the browser console. It fetches a remote dataset of CSS named colors using the Fetch API, retrieves the raw text, and logs both the URL and the parsed CSV contents to the console. The code defines an asynchronous `fetchText` helper that uses `fetch` and `response.text()` to handle the request, with no additional libraries or rendering involved. The focus is purely on data retrieval and basic text output rather than visualization.

Mar 7, 2021

Loading thumbnail…

Fork of Hello HTML

A yellow smiley face rendered as a React SVG component, with a circular background, two black eyes, and a curved mouth. The face is centered in a 960 by 500 viewport, built from three reusable components: `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is generated using `d3.arc` from D3 v6, while the rest of the geometry uses plain SVG circles and paths. The example demonstrates composing D3 shape generators with React JSX for declarative data visualization.

Feb 27, 2021