Gulshan kumar

@designergulshan·4 public vizzes

Loading data with react and d3

This example demonstrates how to load data from an external CSV file in a React application integrated with D3, displaying a summary of the loaded dataset. It shows a text-based message that updates from a loading state to a report of the data’s size in kilobytes, row count, and column count once the CSV is fetched using the `d3.csv` function. The React app uses the `useState` and `useEffect` hooks to manage asynchronous data loading, while `d3.csvFormat` calculates the byte size of the formatted data, and `d3.min` is not used here, but the data comes from a raw GitHub gist URL.

May 6, 2021

Loading thumbnail…

Loading and parsing VSC data

This example demonstrates the results of loading and parsing a CSV file containing CSS named colors using D3.js version 6.7.0 within a simple HTML page. The page displays three key statistics: the file size in kilobytes, the total number of rows, and the number of columns. The code achieves this by calling `d3.csv()` on a remote GitHub gist URL, then rendering the computed message into a `<pre>` element using JavaScript string concatenation. The visualization uses no graphical charts, focusing instead on textual output of the parsed data structure.

May 6, 2021

Loading thumbnail…

Mouse follower

A yellow circle follows the mouse cursor across a blank SVG canvas, with its position updating in real time to track pointer movement. The visualization demonstrates React state management for interactive graphics, using React hooks `useState` and `useCallback` to handle mouse events. The `onMouseMove` handler on the SVG element captures cursor coordinates, which are then used to set the circle's `cx` and `cy` attributes. Built with React 16.9.0 and D3.js v6, the example renders entirely through React's virtual DOM without direct D3 DOM manipulation.

May 6, 2021

Loading thumbnail…

First face

The visualization displays a grid of simplified cartoon faces, each composed of a yellow circular background, two eyes, and an arc-shaped mouth. The faces are rendered as SVG elements using React components, with each face receiving randomized values for stroke width, eye offset, eye radius, and mouth dimensions. The code leverages d3.arc to generate the mouth path, while React manages the component structure and rendering of the faces. The grid layout is produced by mapping over an array generated with d3.range.

May 5, 2021