Ali Muhawesh

@A1iM313·6 public vizzes

Fork of Leading Data with React/D3

This fork demonstrates loading and parsing CSV data with React and D3 v7, rendering each row as an arc in a half-circle pie chart. The React component uses `useState` to manage the fetched dataset and conditionally displays a loading message before the SVG visualization appears. D3’s `csv` function handles remote data retrieval, while the `arc` generator creates paths with specified start and end angles calculated from the row index. The example produces a multi-colored segmented ring, with each segment’s fill color sourced directly from the CSV’s `RGB hex value` column.

Jan 21, 2025

Loading thumbnail…

Leading Data with React/D3

This example demonstrates how to integrate React with D3 for loading and parsing CSV data. It fetches a dataset from a GitHub gist using the `d3.csv` method and displays the parsed result as formatted text within a React component. The visualization uses React’s `useState` and `useEffect` hooks to manage asynchronous data loading, while rendering occurs through ReactDOM into an SVG-capable HTML page. The code showcases a simple yet effective pattern for combining React’s declarative UI with D3’s data-handling utilities.

Jan 21, 2025

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face drawn as three SVG circles follows the mouse cursor across a 960-by-500 viewport. The interactive example uses React’s `useState` and `useCallback` hooks to track pointer coordinates via the `onMouseMove` event, re-rendering the circle positions in real time. Rendering is done with pure SVG elements managed by ReactDOM, with no external data source or charting library.

Jan 18, 2025

Loading thumbnail…

Mouse follower

This example renders a stylized smiley face as a static SVG composition. A yellow circle with a black stroke forms the head, while two dark circles serve as eyes and a D3 arc path creates the mouth. Built with React, the face is drawn using reusable components that accept parameters for positioning and sizing. The code constructs the SVG elements directly, and a commented-out block hints at a larger, unused alternative layout.

Jan 18, 2025

Loading thumbnail…

SmileyFace

A smiley face is rendered as a React component, composed of parameterized SVG circles for the face and eyes and a D3-generated arc path for the mouth. The `Face` component assembles `BackgroundCircle`, `Eyes`, and `Mouth` within a `FaceContainer` SVG, using props for dimensions, offsets, and radii. The example demonstrates how to mix declarative React elements with D3's `arc` API to build a data-driven static graphic.

Jan 14, 2025

Loading thumbnail…

Fork of SmileyFace goofy ahh

A smiling face rendered as a large yellow circle with black stroke, two eyes with white highlights, and a curved mouth arc. The visualization uses React to construct the SVG elements and D3's `arc` generator to define the mouth path. The face is centered within a 960×500 SVG viewport, with all facial features positioned relative to the center point. The code sets explicit pixel values for eye offsets, radii, and stroke widths, creating a static, non-interactive illustration.

Jan 12, 2025