Ahmed Fathi

@AFSaber·5 public vizzes

Exercise 1

A simple yellow smiley face rendered as an SVG, with black outlined circular head, two eyes, an elliptical nose, and a curved mouth arc. The visualization is built using React for component structure and D3 v7’s `arc` generator to define the mouth path. The SVG is centered on a 960×500 canvas, with all shapes positioned relative to the center point, and the mouth arc spans a half-circle using specified inner and outer radii.

Dec 26, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v7, displaying a summary of the dataset’s size, row count, and column count in a large text element. It fetches a remote CSV file containing CSS named colors via `d3.csv`, which returns a promise, and then chains `.then()` to format the results using `d3.csvFormat`. The parsed data is measured in kilobytes, rows, and columns, with the final message rendered into the DOM.

Dec 23, 2021

Loading thumbnail…

Loading data with React and D3

This example demonstrates how to load and display a summary of a CSV dataset using React and D3. The application fetches a list of CSS named colors from a GitHub gist, displays the file size in kilobytes, row count, and column count in a large <pre> element. It uses React’s useState and useEffect hooks to manage state, while the d3.csv function handles asynchronous data loading. A custom Message module formats the data statistics for display, showing the integration of D3 for data processing within a React component.

Dec 23, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A smiley face icon follows the user's cursor across an SVG canvas, updating its position in real time as the mouse moves. Built with React and D3 v5, the example uses React's `useState` and `useCallback` hooks to track mouse coordinates and trigger re-renders. The `onMouseMove` handler on the SVG element captures client coordinates, which are then passed to a circle element's `cx` and `cy` attributes to reposition the face.

Dec 23, 2021

Loading thumbnail…

Smily Face part one

This example renders a simple smiley face using React and SVG primitives. It shows a yellow circle with black eyes and a curved mouth, composed from separate component files for the face, eyes, and mouth. The `Mouth` component leverages the `arc()` API from d3 to generate an SVG path, while the `Face` component assembles these parts within an SVG group. The entire graphic is defined declaratively through React component properties like `centerX`, `eyeOffsetX`, and `mouthRadius`.

Dec 22, 2021