Shubham Pathak

@sam76870·7 public vizzes

fetch data using d3 in react

This example displays a text summary of CSS named color data fetched from a GitHub gist, showing file size, row count, and column count. It uses React’s `useState` and `useEffect` hooks to manage asynchronous data loading, while d3’s `csv` and `csvFormat` utilities handle parsing and formatting the CSV source. The message is rendered as a large `<pre>` element, with a "Loading..." placeholder until data arrives. d3.v7 and React 16.9 are loaded via UMD scripts in the HTML.

Dec 17, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a React-based authentication interface with login and signup forms, accompanied by a carousel component. The interface uses Material-UI components such as `TextField`, `Button`, and `Card` within a styled layout, with routing handled by `react-router-dom` and `Routes`. Forms capture user credentials and submit them via axios POST requests to specified endpoints. The visual design features gradient backgrounds, CSS styling, and FontAwesome icons, though no data visualization is present.

Dec 17, 2021

Loading thumbnail…

Loading and parsing CSV data

This example displays the result of loading a remote CSV file, showing its size in kilobytes, row count, and column count. It uses the D3.js v7 library's `d3.csv` method to fetch and parse the data from a GitHub Gist URL, then formats the summary using `d3.csvFormat`. The output is presented in a large `<pre>` element styled with CSS. An alternative commented-out approach demonstrates fetching text with `fetch` and parsing it via `d3.csvParse`.

Dec 16, 2021

Loading thumbnail…

implement mouse movement

A React component uses SVG to render a single circle that tracks the mouse cursor across a 960-by-500 viewport. The `useState` hook stores the cursor’s x and y coordinates, initialized at the center, while the `useCallback` hook wraps the `handleMouseMove` event handler to update that state on every mouse movement. The circle’s `cx` and `cy` attributes are bound to the stored coordinates, and the SVG element’s `onMouseMove` prop triggers the update. This example demonstrates interactive state management and event handling within a React-driven SVG visualization.

Nov 30, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This interactive React application renders a single black circle that follows the mouse cursor across a 960 by 500 pixel SVG canvas. It uses the `useState` and `useCallback` hooks to track cursor coordinates from the `onMouseMove` event, updating the circle’s `cx` and `cy` attributes in real time. The visualization demonstrates a minimal, event-driven approach to direct manipulation within an SVG viewport.

Nov 30, 2021

Loading thumbnail…

Fork of Smiley Face

A grid of randomly generated smiley faces fills the screen, each face varying in stroke width, eye placement, eye radius, mouth width, and mouth radius. Built with React and D3 v7, each face is composed of SVG circles for the background and eyes, while the mouth uses D3’s `arc` generator to create a curved path. The faces are rendered through reusable React components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) and positioned via a central `<g>` transform, with parameters passed as props for each instance.

Nov 30, 2021

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces is rendered using React and D3 v7, with each face varying randomly in stroke width, eye offset, eye radius, mouth width, and mouth radius. Drawn as SVG within a `FaceContainer`, each face combines a yellow `BackgroundCircle` with a black stroke, two `Eyes` circles, and a `Mouth` path generated by D3's `arc` API, which creates an annular sector based on specified inner and outer radii and angles.

Nov 30, 2021