Vishnu Jayan

@itsmevishnu·7 public vizzes

Visualization of data using React

This example shows a color wheel visualization built with React and D3 v7. It loads CSV color data from a GitHub gist and renders each color as an equal-sized arc segment in a full circle using `d3.pie()` and `d3.arc()`. The SVG output is positioned at the center of a 960×500 viewport. React's `useState` and `useEffect` manage the asynchronous data loading, displaying a loading message until the CSV arrives. The code imports `csv` from D3 for data parsing and uses React DOM to render the final SVG graphic.

Feb 23, 2022

Loading thumbnail…

Handling data

This example demonstrates how to inspect the structure of a CSV dataset loaded from a GitHub gist. The application presents a text message that reports the number of rows and columns in the data. Built with React and D3, it uses `csv` from D3 to fetch and parse the remote file, storing the result in component state. The rendered message is generated by a helper module that formats the structural information.

Feb 23, 2022

Loading thumbnail…

Mouse following

A yellow circle follows the mouse cursor across an SVG canvas, updating its position in real time to mirror the pointer's coordinates. Built with React, the app uses the `useState` hook to track mouse position and the `onMouseMove` event handler on the SVG element to capture client coordinates. ReactDOM renders the circle with dynamic `cx` and `cy` attributes, while the SVG viewport is fixed at 960 by 500 pixels.

Feb 23, 2022

Loading thumbnail…

Smiley Face 1

A yellow circle follows the mouse cursor across an SVG canvas, acting as a simple interactive smiley face without facial features. The React component tracks pointer movement via the `onMouseMove` event and updates the circle’s center coordinates using the `useState` hook. The visualization uses React 17 and renders directly to SVG, with the circle’s position tied to the browser’s clientX and clientY values. No external data is loaded; the graphic responds purely to user input in real time.

Feb 23, 2022

Loading thumbnail…

Loading and Parses CSV data

This example demonstrates a minimal HTML page that loads and parses CSV data using JavaScript’s built-in `fetch` API. The page displays a large, centered text message (stylized with CSS) once the data is retrieved. The code outlines the initial `fetch` call, though the parsing and rendering logic is not fully implemented. It serves as a bare-bones starter for handling CSV files in a browser environment, with the React framework as an optional next step.

Feb 23, 2022

Loading thumbnail…

Face using D3 and React

A grid of small faces, each rendered as a yellow circle with white eyes and a curved mouth, fills the viewport. The example demonstrates a reusable React component composition built with SVG primitives. The `Face` component combines separate `BackgroundCircle`, `Eyes`, and `Mouth` components, with the mouth path generated using the `d3.arc` API. D3's `range` function creates an array of 100 faces, and each instance applies randomized eye radius values for slight variation across the repetitions.

Feb 18, 2022

Loading thumbnail…

Fork of Smiley Face 1

This example shows a simple smiley face built with React and SVG, rendered on a 960 by 500 pixel canvas. The face uses a yellow circle with a black stroke for the head, two white eyes with black outlines, and a curved mouth generated with the d3 `arc()` function. The code structures each element as a React component, applying constant offsets and radius values defined in variables. It uses ReactDOM to render the SVG into the page, with D3 v7 providing the arc path data for the mouth.

Feb 18, 2022