Jayakrishnan Ashok

@Jkrish1011·5 public vizzes

Loading and Parsing CSV

This example demonstrates how to load and parse a CSV file in a React application, displaying a message with the row count, column count, and total data size. The code uses D3 v5's `csv` function to fetch the named CSS colors dataset from a GitHub gist, storing the parsed result in state via React hooks. Once loaded, the component formats a summary using `d3.csvFormat` to estimate the data size in kilobytes. The visualization is minimal, focusing solely on confirming successful data ingestion rather than rendering charts.

Apr 23, 2022

Loading thumbnail…

Loading and Parsing CSV

This example demonstrates loading and parsing a CSV file of CSS named colors. It fetches the remote CSV using the Fetch API and parses it with d3.csvParse, then logs the number of rows, columns, and file size to the console. The code uses React 16.9.0 and d3 v5, with an asynchronous fetchText function that returns a promise. No visualization is rendered; the focus is purely on data acquisition and metadata inspection.

Apr 23, 2022

Loading thumbnail…

Fork of Smiley Face Part VI

A smiley face built with React components is displayed at the center of a yellow circle with black stroke, featuring two eyes and a curved mouth drawn using a D3 arc generator. The face is composed of separate React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—which use SVG for rendering with D3’s `arc()` for the mouth path. The page also includes an interactive SVG circle that tracks mouse movement via React’s `useState` and `useCallback`, updating its position based on mouse coordinates.

Apr 23, 2022

Loading thumbnail…

Loading and Parsing CSV

This example demonstrates loading and parsing a CSV file of named CSS colors, logging its raw text contents to the browser console. It uses the native Fetch API inside an asynchronous function (`fetchText`) to retrieve the data from a GitHub gist URL, then chains a `.then()` callback to print the response. The code highlights the contrast between this clean async/await pattern and the commented-out “pyramid of doom” alternative with nested `fetch().then()` calls. React and D3 v5 are included via external scripts, though no visualization or rendering is performed yet.

Apr 23, 2022

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load a remote CSV file and view its raw contents in the browser console. It fetches a dataset of CSS named colors from a GitHub Gist URL using the Fetch API, then parses the response as text with `response.text()` and logs it via `console.log`. The code uses an asynchronous `async`/`await` function to handle the request, with the original Promise-based fetch syntax commented out as an alternative approach. No visual chart is rendered; the focus is purely on data acquisition and inspection.

Apr 19, 2022