Pramod Jacob Sam

@pramodjsam·8 public vizzes

Loading data into react

This example demonstrates loading a CSV dataset into a React application using D3’s `csv` function. The app fetches CSS named colors from a GitHub gist and displays a count of loaded rows once the data arrives. While fetching, it shows a loading message, then switches to a report of the dataset length. The implementation relies on React’s `useState` and `useEffect` hooks to manage the asynchronous request, and uses D3 v5 for CSV parsing. The rendering is minimal, using standard HTML components rather than SVG, with no visual data representation beyond the row count.

Nov 22, 2021

Loading thumbnail…

Loading data into a csv program

This example demonstrates loading and parsing CSV data using D3 v5 within a React framework. It fetches a dataset of CSS named colors from a GitHub gist and renders the raw content into a large HTML `<pre>` element. The code uses the Fetch API to retrieve the CSV file, with D3’s parsing functions handling the comma-separated values. The visualization focuses on the data-loading workflow, as the fetched text is displayed without further transformation or charting, highlighting the initial step of bringing external tabular data into a web application.

Nov 22, 2021

Loading thumbnail…

Parse CSV data with d3

This example demonstrates programmatic loading and parsing of CSV data from a remote gist URL containing CSS named colors. The code employs the `d3.csv` method to fetch and parse the data, logging the row count, column count, and formatted size. It also illustrates parsing the raw text manually using `d3.csvParse` after an asynchronous `fetch` call, comparing the two approaches. The data is not visualized graphically; instead, the results are shown in the browser console, highlighting the parsed structure and file size in kilobytes.

Nov 21, 2021

Loading thumbnail…

Parse CSV data with D3

This example demonstrates how to parse CSV data using D3, displaying the file size, row count, and column count of a CSS Named Colors dataset. It uses the `fetch` API with `async`/`await` to retrieve the text, then applies `d3.csvParse` to structure it, while also showing D3’s built-in `d3.csv` promise method. The results appear in a large HTML `<pre>` element. The source data is loaded from a GitHub Gist containing color names and their hexadecimal values.

Nov 21, 2021

Loading thumbnail…

Mouse Follower

A yellow smiley face follows the mouse cursor across a full-screen SVG canvas, with its eyes and mouth repositioning relative to the cursor's coordinates. The example demonstrates interactive state management in React, using the `useState` and `useCallback` hooks to track `clientX` and `clientY` values from the SVG's `onMouseMove` event. Every mouse movement triggers a state update that re-renders the positioned circles, creating a direct mapping between pointer location and graphical elements. The implementation uses React 16.9 with ReactDOM rendering the SVG output.

Nov 21, 2021

Loading thumbnail…

Mouse Follower

Half way towards a smiley face, this SVG shows a static yellow circle with a black outline and two unfilled eye circles. The interface uses only raw SVG elements within an HTML page, with no JavaScript interaction. The title suggests a mouse follower, but the current markup provides no event handlers or animation logic. Instead, it relies on explicit `circle` elements with fixed coordinates and attributes for the face’s base and eyes. The minimal CSS resets margins and hides overflow to present the face cleanly at the viewport center.

Nov 21, 2021

Loading thumbnail…

Loading data with fetch,promise, async and await

This example demonstrates how to load external data using modern JavaScript syntax. A page fetches a CSV file containing CSS named colors from a GitHub gist and logs the raw text to the browser console. The code uses the Fetch API and the Promise method `then()`, combined with `async` and `await` inside an asynchronous function to handle the response. No visualization is rendered; the focus is solely on asynchronous data loading and text retrieval.

Nov 21, 2021

Loading thumbnail…

Part-1---Make_A_Face

A grid of 18 randomly generated cartoon faces, each rendered as a yellow circle with black stroke, two eyes, and an arc-based mouth. The faces vary in stroke width, eye size and position, and mouth dimensions, creating unique expressions. Built with React and D3 v5, the visualization uses D3’s `arc` generator to shape mouths and renders all elements as SVG within a translated group. Each face is positioned identically, layered by the array map.

Nov 21, 2021