khaled mohamed

@khaliedmuhamad·5 public vizzes

loading data d3

This example demonstrates asynchronous data loading in a React application using D3 v6. It fetches a CSV file of CSS named colors from a GitHub gist via `d3.csv()` and displays either a loading message or a data summary through a React state hook. The code uses `useState` and `setData` to trigger re-rendering when the promise resolves, while a secondary helper parses the fetched text with `d3.csvParse()` to show file size in kilobytes.

Apr 24, 2021

Loading thumbnail…

mouse follower

A single gray circle with a red outline follows the mouse cursor within an SVG canvas. The circle’s position updates directly from the cursor’s client coordinates, which are logged to the console and stored in React state via the `useState` hook and an `onMouseMove` handler. The visualization uses React and ReactDOM to render the SVG, with a fixed radius and initial center position. No external data source is used; the interaction is purely based on live pointer movement.

Apr 24, 2021

Loading thumbnail…

css color names

This example displays a single HTML page that fetches a list of CSS named colors from a remote GitHub Gist URL using the Fetch API. It renders the text "Hello HTML" in a massive 13em font size at the center of the page, with the body styled via CSS. After fetching the color data, the code logs the retrieved text to the browser console, though no visualization is actually drawn on the page. The implementation relies on vanilla JavaScript's `fetch` and `async/await` to handle the text response, with no external libraries like React or D3 used despite the framework metadata.

Apr 24, 2021

Loading thumbnail…

svg one

This example renders a static SVG scene of a geometric structure composed of multiple black line segments, gray circles, and yellow glowing circles. The drawing uses React to render SVG elements and incorporates a custom filter effect for the glowing circles. The lines form a roof-like shape with a grid below, while the circles act as nodes or lights within the composition. The visualization demonstrates basic SVG drawing with React, using fixed coordinates and no data-driven elements or D3 APIs.

Apr 24, 2021

Loading thumbnail…

svg One

This example demonstrates the minimal setup for a web page using HTML, CSS, and JavaScript. The page displays the text “Hello HTML” in a large, centered font, while the script logs “Hello JavaScript!” to the browser’s developer console. Built as a bare HTML file without external libraries, it serves as a starting point for understanding how CSS styles content and JavaScript executes directly in the browser.

Apr 22, 2021