Abhay kumar singh

@a8hay·7 public vizzes

showing data with d3 and react

This example demonstrates how to load and summarize a remote CSV dataset using D3 and React. The code fetches a text file containing CSS named colors, parses it with `d3.csvParse`, and displays the file size in kilobytes, the row count, and the column count in a large `<pre>` element. The data source is a GitHub-hosted CSV, and the visualization uses D3 v6 for parsing while relying on React for DOM updates. The example highlights a simple, straightforward approach to integrating D3’s data-handling utilities with a React component structure.

Feb 24, 2021

Loading thumbnail…

read csv with d3

This example demonstrates how to read and parse CSV data in D3 version 6 using the Fetch API and `d3.csvParse`. The visualization displays a summary of the loaded dataset, showing the file size in kilobytes, the number of rows, and the number of columns in a large `<pre>` element. The data comes from a GitHub gist containing named CSS colors, fetched as text before being converted to a structured table with `d3.csvParse`. The code highlights the asynchronous pattern of fetching remote data and parsing it without relying on `d3.csv`.

Feb 23, 2021

Loading thumbnail…

dot following pointer

A single gray circle follows the pointer across a blank SVG canvas. The circle’s center position updates directly to the mouse’s client coordinates via React’s `useState` hook, triggered by the SVG’s `onMouseMove` event. The circle radius remains fixed at 50 pixels, and the viewport is 960 by 500 pixels.

Feb 23, 2021

Loading thumbnail…

fetch data asynchrously

This example demonstrates how to retrieve data from a remote URL asynchronously using JavaScript. It fetches a CSV file containing CSS named colors from a GitHub gist via the `fetch` API, converts the response to text with `response.text()`, and logs the raw content to the browser console. The code defines a reusable `fetchText` function that wraps the asynchronous fetch and text extraction in a promise chain with `.then()`. The HTML file is minimal, relying entirely on the external `index.js` script for functionality, and no visualization or rendering occurs beyond the console output.

Feb 23, 2021

Loading thumbnail…

Fork of Fork of Smiley face part 6

A single yellow smiley face rendered as an SVG, with randomized eye and mouth dimensions, is generated by a React component. The face is composed of nested primitives: a background circle, eyes, pupils, and a mouth built using D3’s `arc()` function to define the mouth path. The app maps over a range of one, placing the face within a fixed-width canvas. Code imports from `react`, `react-dom`, and `d3`, and uses `ReactDOM.render` to display the result.

Feb 23, 2021

Loading thumbnail…

Fork of Smiley face part 4

A stylized smiley face rendered in SVG, composed of a yellow background circle, two eyes with white highlights, and a curved mouth. The face is built as a React component tree, with the mouth generated using the D3 `arc` generator to create a half-circle path. The code uses React 17 to manage the SVG elements and passes positioning values as props to modular components for the face parts. The entire graphic is centered within a fixed 960×500 viewport.

Feb 23, 2021

Loading thumbnail…

Smiley face part 1

A yellow cartoon face drawn with SVG circles and an arc path. The face renders a head, two black eyes with white highlights, and a downward-curving mouth centered on a 960 by 500 canvas. The code uses React to create SVG elements and ReactDOM to render them, while d3.arc generates the mouth’s path. All coordinates are calculated from the center point, with fixed offsets for features like eye spacing and radius.

Feb 23, 2021