Abhishek-Bohora

@Abhishek-Bohora·8 public vizzes

Visualizing data with react and d3

This example visualizes CSS named colors from a CSV file loaded with d3.csv. It renders each color as a quarter-circle arc in an SVG, using React state to manage the fetched data and display a loading message until it arrives. The arcs are generated with d3.arc, which converts angle values into SVG path data. The visualization demonstrates how React and D3 can work together, with React managing component lifecycle and D3 handling data parsing and geometry calculations.

Jul 23, 2021

Loading thumbnail…

loading data with react and d3

This example demonstrates how to load and display a CSV dataset using React state and D3 utilities. It fetches CSS named colors data from a GitHub gist via `d3.csv`, stores the parsed result in React’s `useState` hook, and renders a summary message showing the file size in kilobytes, column count, and row count using `d3.csvFormat`. The interface displays a large, monospace loading message until the data arrives, then updates dynamically. The code highlights the integration of D3’s asynchronous data loading with React’s component lifecycle and state management.

Jul 23, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor as it moves across an SVG canvas. The visualization uses React state management with the `useState` and `useCallback` hooks to track the cursor's `clientX` and `clientY` coordinates, updating the circle's `cx` and `cy` attributes via React's render cycle. The SVG is rendered by ReactDOM, while D3 v5 is loaded but not directly used in this example. The circle maintains a fixed radius of 30 pixels and responds immediately to pointer movement within the 960×500 viewport.

Jul 21, 2021

Loading thumbnail…

Mouse Follower

This example displays a static yellow smiley face constructed from SVG elements, with two additional circles serving as eyes. The visualization demonstrates basic SVG composition within an HTML document, using `<circle>` elements to build the face shape. The rendering relies on raw SVG markup rather than a JavaScript library, with coordinates and radii hard-coded to position the features. The interaction is minimal, as the page hides any overflow and the design implies the mouse position might influence the layout, though no scripting is present in the source. The piece illustrates how simple geometric shapes can form recognizable icons.

Jul 21, 2021

Loading thumbnail…

loading and parsing csv data

This example demonstrates how to load and parse a CSV file from a remote URL using the Fetch API. It fetches the raw CSV data from a GitHub gist containing CSS named colors, then displays the text content in the browser console. The implementation uses an asynchronous function with `fetch` and `response.text()` to retrieve the data. A commented-out alternative shows the equivalent promise-based chaining approach. The page itself renders no visual output, focusing solely on the data-loading mechanism.

Jul 21, 2021

Loading thumbnail…

Loading and parsing csv data

A React component renders a smiley face using SVG primitives, composed of a yellow background circle, two black eyes, and a d3-generated mouth arc. The `Face` component defines layout constants for positioning, with `Facecontainer` providing the SVG coordinate system centered on the face. Sub-components `BackgroundCircle`, `Eyes`, and `Mouth` accept props for dimensions, while `Mouth` constructs its path using `d3.arc()` with specified inner/outer radii and angular start/end points. The visualization demonstrates component-based SVG construction in React with D3 integration for path generation.

Jul 20, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from reusable React components, rendered as SVG. The face consists of a yellow background circle, two black eyes, and a mouth drawn as an arc path. The code uses React function components to compose the face from separate parts, with D3’s `arc()` generator creating the mouth shape. Layout constants like center coordinates, eye offsets, and radii are defined in the parent component and passed down as props, while a container component wraps everything in a centered SVG group.

Jul 20, 2021

Loading thumbnail…

Fork of Hello HTML

This example shows a simple yellow circle centered on a black-outlined SVG canvas. The visualization uses raw SVG markup within an HTML page, drawing a single circle element with a yellow fill and black stroke. The code relies on basic SVG presentation attributes—such as `cx`, `cy`, `r`, `fill`, and `stroke-width`—rather than any JavaScript library or data binding. The rendering approach is purely static SVG, with CSS resetting margins and hiding overflow to keep the canvas focused. No external data source or interactive behavior is present.

Jul 19, 2021