Mrinal Roy

@mrinal-roy·6 public vizzes

Loading Data for Visualisation with d3 & React

This example demonstrates a pie chart of CSS named colors, where each slice is a distinct color fetched from a remote CSV file. The code combines React’s `useState` and `useEffect` hooks to load the data asynchronously, displaying a loading message until the CSV arrives. Using D3’s `csv` parser and `arc` generator, it renders each color as an SVG path inside a `<g>` element centered on the canvas. The visualization highlights the seamless integration of D3 utilities with React state management for data-driven SVG rendering.

Mar 18, 2021

Loading thumbnail…

Loading Data with d3 & React

This example demonstrates how to load CSV data asynchronously in a React component using d3.csv, displaying the dataset’s size, column count, and row count in a large <pre> element. The React useState hook manages the fetched data, initially showing a “loading” message until the promise resolves. The code imports ReactDOM and d3’s csv parser directly from CDN links. The data originates from a GitHub gist containing CSS named colors. The output updates responsively once the fetch completes, converting the parsed CSV back to text with d3.csvFormat to calculate its kilobyte size.

Mar 18, 2021

Loading thumbnail…

Loading n Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote GitHub Gist using D3 v6’s `d3.csvParse` method. The interface is minimal: a large-text `<pre>` element displays the file size (in kilobytes), the number of columns, and the number of rows after parsing. The code fetches the raw CSV text via the `fetch` API, parses it into a tabular data structure, and logs the same summary statistics to the browser console. The output confirms the successful extraction of data from the CSS Named Colors dataset.

Mar 18, 2021

Loading thumbnail…

Mouse Follower

A single dark circle follows the mouse cursor across an SVG canvas, updating its position in real time. The example demonstrates React state management and event handling within a data-visualization context. Using the `useState` hook, the `App` component tracks mouse coordinates via an `onMouseMove` event on the SVG element, then re-renders the circle's `cx` and `cy` attributes. It relies on React 17, ReactDOM, and D3 v6 for the SVG rendering, with no external data source.

Mar 17, 2021

Loading thumbnail…

Smiley Face

This example displays a grid of twenty identical smiley faces, each composed of a yellow circle, two black eyes, and a curved mouth. Built with React and D3 v6, it renders SVG elements through reusable components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth path is generated using the `d3.arc()` API with specified inner and outer radii, while the face layout is positioned via SVG group transformations.

Mar 17, 2021

Loading thumbnail…

SVG tutorial

This example demonstrates basic SVG shape construction within an HTML document, using elements like circles, rectangles, lines, and paths to form a simple composition. The SVG canvas is set to a width of 700 pixels, and shapes are positioned with explicit coordinates and styled with fill colors or strokes. The code includes an incomplete circle with a stroke but no fill, a line with empty coordinates, and a path that outlines a square, showcasing how SVG handles both finished and incomplete markup. No JavaScript libraries are used; the visualization relies purely on the built-in SVG API defined in the HTML.

Mar 10, 2021