Muhammad Ahmad

@ihatepros236·5 public vizzes

react

This example demonstrates a minimal interactive SVG visualization built with React and D3. A single red circle is rendered at the center of a 960×500 canvas using React’s declarative JSX syntax. The code imports the `arc` function from D3 v5, though it is not used in the final output. Mouse movement over the SVG triggers `handleMouseMove`, logging `clientX` and `clientY` coordinates to the console via the `onMouseMove` event handler. The visualization uses React 16.9, ReactDOM, and D3 v5, rendered as SVG with no external data source.

Aug 31, 2021

Loading thumbnail…

mouse follower

A React component renders a smiling face as an SVG, using D3’s `arc` generator to draw the mouth. The face is composed of reusable components for the background circle, eyes, and mouth, with positions and sizes passed as props. The visualization is static, showing the face centered on a yellow circular background with black outlines, and does not respond to mouse movement despite the title.

Aug 31, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and React. It fetches a remote CSV file containing CSS named colors and displays the dataset’s size in kilobytes, row count, and column count in a large text block. The primary approach uses `d3.csv` with a Promise-based `.then()` callback, while commented-out code illustrates alternative methods using `fetch` with `async/await` and `d3.csvParse`. The data source is a GitHub Gist hosted CSV file.

Aug 31, 2021

Loading thumbnail…

smiley new React

This example builds a yellow smiley face using React components and SVG. It defines a reusable `Face` component from smaller parts: a background circle, eyes, and a mouth, each rendered as separate React modules. The face is positioned and scaled with props, and the mouth uses D3's `arc` API to generate an SVG path. The code imports React, ReactDOM, and D3 from CDNs, and the entire drawing is rendered inside a single SVG element, showcasing a component-based approach to data visualization.

Aug 29, 2021

Loading thumbnail…

Hello HTML

This example displays a classic smiley face rendered as an SVG graphic within a React application, using D3 for one shape. A yellow circle forms the head, with two black circles for eyes and a D3 arc path creating the mouth, all positioned via SVG transforms. The code leverages `d3.arc()` for the mouth geometry, while React manages the component structure and renders the SVG elements directly, combining both libraries in a single visualization.

Aug 29, 2021