puthalalitha

@puthalalitha·6 public vizzes

Loading data with React & D3

A React application demonstrates how to load and summarize a CSV dataset using D3 utilities. The app fetches CSS named colors from a GitHub gist via `d3.csv()` and manages the asynchronous result with React's `useState` and `useEffect` hooks. On load, it displays a text summary generated by a `message` function, which reports the data's size in kilobytes, row count, and column count using `d3.csvFormat()`. The interface shows a simple loading message until the data arrives, then renders the computed statistics in a large `<pre>` element.

Apr 29, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a remote CSV file using D3’s `d3.csv` method, which returns a promise that resolves into an array of objects. The code counts the dataset’s size in kilobytes via `d3.csvFormat`, along with its number of rows and columns, and displays these statistics as large text in a `pre` element. The data originates from a GitHub gist containing named CSS colors. A commented-out alternative shows parsing via the Fetch API and `d3.csvParse`.

Apr 29, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas, redrawing its center position in response to pointer movement. The visualization uses React's `useState` and `useCallback` hooks to manage cursor coordinates, which are captured via the `onMouseMove` event on the SVG element. The circle's radius remains constant at 30 pixels, while its `cx` and `cy` attributes are set directly from the mouse's client coordinates. The example demonstrates a simple interactive pattern using React's declarative rendering with SVG primitives.

Apr 29, 2021

Loading thumbnail…

Mouse Follower

A smiling face is rendered as an SVG in a React component, with eyes and a mouth positioned relative to the center of a 960 by 500 viewport. The code computes circle positions for the eyes and a path for the mouth arc, while a background circle provides the face’s outline. It uses React’s `ReactDOM.render` to mount the component and inline SVG elements, with no D3-specific APIs beyond the imported library. The example demonstrates a static, declarative visualization built entirely with React and SVG.

Apr 28, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A grid of 18 independently randomized smiley faces renders in the browser, each face a yellow circle with black outline, two eyes, and a curved mouth. Built with React components, the visualization composes SVG shapes using D3’s `arc()` function for the mouth path. Random values for stroke width, eye position, eye radius, and mouth dimensions generate variety across each face. The App maps over D3’s `range(6*3)` to produce the six-by-three layout.

Apr 27, 2021

Loading thumbnail…

Smiley Face Part II

This example displays a yellow circle with a black outline and two smaller empty circles positioned as eyes, forming a static smiley face. The visualization is built with React and rendered as inline SVG, using the `ReactDOM.render` API to mount the component. The SVG markup is directly embedded in the HTML, though the main React component initially renders only a heading. The piece serves as a partial step toward a complete smiley face, illustrating basic SVG shape drawing within a React framework.

Apr 26, 2021