Spyros Armaos

@sarmaos·6 public vizzes

Fork of Loading data with React & D3

This example shows a full-circle pie chart where each slice represents a CSS named color from a CSV dataset, distributed with equal angular width. The visualization is built with React 16.9 and D3 v7, using `d3.csv` to load the data and `d3.pie` with `d3.arc` to generate the SVG paths. The circle’s fill color is taken directly from each row’s RGB hex value, creating a colorful spectrum that fills the viewport.

Jan 22, 2022

Loading thumbnail…

Epxerimeting on Mouse Follower

A React and SVG experiment uses the `useState` and `useCallback` hooks to track pointer movement within an SVG canvas. As the mouse moves across the `onMouseMove` event, the circle's `cx` and `cy` attributes update to the `clientX` and `clientY` coordinates, making the circle follow the cursor. The rendering relies on React's declarative updates to redraw the SVG circle element in real time.

Jan 22, 2022

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor within a fixed 960-by-500 SVG canvas. The React application tracks the pointer's client coordinates on the `svg` element and updates the circle's center position accordingly. The visualization uses React's `useState` and `onMouseMove` event handler, with `ReactDOM.render` to mount the component. The circle has a radius of 30 pixels and no fill color, rendering as a thin outline that trails the mouse movements across the blank white background.

Jan 22, 2022

Loading thumbnail…

Loading data with React & D3

This example demonstrates a simple React component that loads a CSV file of CSS named colors and displays the row count once the data arrives, starting with a “Loading...” message before that. Built with React and D3 v7, it uses the `useState` and `useEffect` hooks to manage state and trigger the asynchronous `d3.csv` request. The SVG rendering approach is hinted at in the commented-out markup, though the visible output is a plain text message. The code runs in a browser environment with React 16.9 and D3 7.3.

Jan 21, 2022

Loading thumbnail…

Loading CSV

This example demonstrates how to load and parse a CSV file from a remote URL, then display the row count as plain text on the page. It uses the Fetch API to retrieve the data and d3.csvParse to convert the CSV text into an array of objects. The data source is a GitHub gist containing CSS named colors. The code relies on d3.v7 and runs entirely in the browser without additional rendering.

Jan 21, 2022

Loading thumbnail…

Smiley Face part 1

A grid of eighteen yellow smiley faces is rendered by mapping a D3 range over React components. Each face uses SVG circles for the background and eyes, while the mouth is drawn with a D3 arc path. The eyes have randomly varied radii, and the face geometry is parameterized through props for offsets, stroke widths, and mouth dimensions, with all elements positioned inside a translated SVG group.

Jan 20, 2022