Aman Singh

@asingh44878·12 public vizzes

Making a bar chart - Population Top 10

This example displays a horizontal bar chart of the top 10 countries by population, using D3 v7 to render SVG rectangles. The chart uses a linear scale for the population axis and a band scale for country names, with axis labels generated via `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Data is loaded from a CSV file and processed by multiplying population values by 1000 before rendering, with the bar color set to steelblue via CSS.

May 17, 2023

Loading thumbnail…

Using arcs for rendering Data with React

This example visualizes United Nations population data from a CSV file, loading the data with `d3.csv` into React state via the `useState` and `useEffect` hooks. It renders the dataset as a series of SVG rectangles whose height and width are mapped to population values, with a loading indicator shown until the data arrives. The code demonstrates integrating D3’s data-loading utilities with React’s component lifecycle and SVG rendering.

May 17, 2023

Loading thumbnail…

Visualizing Data with React and d3

This example displays the full set of CSS named colors as a stacked sequence of horizontal bars, one per color, ordered as they appear in the CSV data. Each bar’s background color is set directly from the `Hex rgb` field. The application uses React’s `useState` and `useEffect` hooks to asynchronously load and store the data via d3’s `csv` utility, rendering a loading message until the promise resolves. The D3 v7 and React 18 libraries are loaded via CDN.

Apr 13, 2023

Loading thumbnail…

Rendering Data with React

This example renders the full set of CSS named colors as a vertical stack of horizontal bars, each colored according to its hexadecimal value. The visualization uses React 18 with functional components and hooks (`useState`, `useEffect`) to manage asynchronous data loading, while D3’s `csv` utility fetches the color dataset from a GitHub gist. Once loaded, React maps each row to a styled `div`, setting the background color from the `Hex rgb` field. The visualization demonstrates how D3 can handle data acquisition and parsing while React manages the DOM rendering.

Apr 13, 2023

Loading thumbnail…

Parsing CSV Data with D3

This example demonstrates how D3 parses a remote CSV file and summarizes its contents. The page displays three statistics about the data: its approximate size in kilobytes, its row count, and its column count. The code uses `d3.csv()` to fetch and parse the dataset from a GitHub Gist, then `d3.csvFormat()` calculates the formatted string length. The resulting message is rendered inside a `<pre>` element with large font styling. The implementation relies solely on D3 v7 and native JavaScript promises, with commented alternatives using `fetch` and `async/await`.

Mar 31, 2023

Loading thumbnail…

Loading data with Fetch, Promises, Async and Await

This example demonstrates loading a remote CSV file named CSSNamedColors.csv, which is hosted as a GitHub Gist. The code uses JavaScript's built-in `fetch` API along with `async` and `await` keywords to retrieve the file's text content and log it to the browser console. The process is triggered by defining a custom `fetchText` function that wraps the fetch call and returns the response as text, then chaining a `.then()` handler to process the result. The visualization focuses solely on the data-loading mechanism, without any graphical rendering or parsing of the CSV contents.

Mar 24, 2023

Loading thumbnail…

Mouse Follower

A React component tracks the mouse position within an SVG canvas, rendering a circle that follows the cursor. The example uses React hooks, specifically useState and useCallback, to manage and update the mouse coordinates, which are assigned to the circle’s cx and cy attributes. The SVG element’s onMouseMove event handler captures clientX and clientY values, and the circle radius is fixed at 50 pixels. The rendering is done entirely through ReactDOM with no external data source.

Mar 17, 2023

Loading thumbnail…

Smiley Face Test

A simple yellow smiley face is drawn with SVG inside a React application, using D3.js to generate the curved mouth path. The face consists of a yellow body circle, solid black eyes, rectangular eyebrows, and a downward-curved mouth arc. The code pulls a list of CSS named colors from a GitHub Gist but does not use the data for the rendering. D3’s `arc` generator creates the mouth’s path, while React elements construct the SVG grouped around the center point.

Mar 15, 2023

Loading thumbnail…

Using ES6

This example visualizes a smiley face using React and D3.js. The face, eyes, and mouth are all rendered as SVG elements within a single `<svg>` canvas. The code defines reusable React components, `Face` and `Eyes`, which draw the yellow circle and the two black eye circles, respectively. The mouth is generated using D3's `arc()` API, which creates a semi-circular path. All elements are positioned relative to the center of the canvas using the `d3` arc generator and React's transform attribute.

Mar 14, 2023

Loading thumbnail…

Fork of Smiley Face Part 3

This example draws a classic smiley face as an SVG graphic. It shows a yellow circle for the face, two smaller black circles for the eyes, and a dark mouth arc, all centered within a 960 by 500 viewport. The code uses React components to structure the SVG elements and D3’s `arc()` generator to compute the mouth path with specified inner and outer radii and angles. Hard-coded values for dimensions and offsets position each shape relative to the center.

Mar 13, 2023

Loading thumbnail…

Smiley Face Part 2

A yellow smiley face is drawn with React and rendered as SVG. It shows a large yellow circle with a black outline, plus two smaller black circles for eyes, all centered on a 960 by 500 canvas. The React code defines these shapes using JSX and constant variables for positioning and sizing. The face is rendered into a root div using ReactDOM.render, with the SVG elements directly described in the component.

Mar 12, 2023

Loading thumbnail…

Smiley Face Part 1

This example shows a simple yellow smiley face drawn on an SVG canvas, featuring a large circular head with two small black circles for eyes. The face lacks a mouth or other features, presenting only the basic foundation of the character. The visualization uses plain SVG elements, including `<circle>` tags with attributes for radius, position, fill color, and stroke, all rendered within an HTML page using inline CSS to remove margins and hide overflow. The static image is centered on a 960 by 500 pixel canvas using hard-coded coordinates.

Mar 10, 2023