Belay Birhanu Gibina

@belaymit·4 public vizzes

Data Visualization

A circle follows the mouse cursor across an SVG canvas, with its position updating in real time as the user moves the pointer. The React component uses the `useState` hook to track mouse coordinates, which are passed to the circle's `cx` and `cy` attributes. The `onMouseMove` event handler updates the state on each movement, while D3 v7 handles the SVG rendering within the React framework.

Jun 25, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial step of loading and parsing a CSV file in a web page. It fetches a remote CSV dataset containing CSS named colors from a GitHub gist and logs the raw text content to the browser console. The implementation uses the native `fetch` API within an asynchronous JavaScript function to retrieve the data, followed by `response.text()` to extract the string. No visualization is rendered; the focus is purely on confirming successful data retrieval before any parsing or charting library, such as D3, is applied.

Jun 25, 2022

Loading thumbnail…

Data Visualization

This example generates a grid of identical cartoon faces using React and D3 v7, rendered as SVG. Each face combines a yellow circle, two eyes, and an arch-shaped mouth built with D3’s `arc` generator. The `FaceContainer` wraps the SVG and applies a translation to center the components. The code uses React’s `createElement` pattern via JSX, with all faces produced by mapping over a `range(6*3)` array from D3 to create 18 repeated copies.

Jun 24, 2022

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal SVG scene initialized with a fixed width of 960 pixels and a height of 500 pixels. The page loads an empty SVG container directly in the HTML body, with CSS applied inline to remove default margins and hide overflow. Built with React and rendered via SVG, the visualization currently contains no data-bound elements or interactive behavior; it serves primarily as a blank canvas or starting point for further development. The code does not invoke any external JavaScript libraries or APIs, relying only on basic HTML structure and inline styles.

Jun 23, 2022