Ish Takkar

@IshTakkar·7 public vizzes

Making a World Population Bar Chart

This bar chart displays the top 10 most populous countries for 2020, using horizontal bars ordered by population with a labeled x-axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for the bars. Population values are fetched from a CSV file via `d3.csv` and formatted with `d3.format`. Tooltips show exact values using the SVG `<title>` element.

Jun 25, 2021

Loading thumbnail…

Making a Line Chart

This scatter plot visualizes the Iris dataset, showing the relationship between sepal and petal length with points colored by species. Built with React and D3 v5, it uses `scaleLinear` and `scaleOrdinal` for positioning and color encoding, while custom Axis and Marks components render SVG circles. Data is loaded asynchronously via `useData` and `d3.csv`.

Jun 22, 2021

Loading thumbnail…

Making a Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length. Each point represents a sample flower, colored by species using a d3.scaleOrdinal color scale. The visualization is built with React and D3.js v5, using SVG circles for marks and custom components for axes. Data is loaded from a remote CSV file. The plot includes axis labels, tick marks, and interactive tooltips on hover, all rendered within a responsive fullscreen layout using the d3.scaleLinear and extent functions.

Jun 22, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading a CSV dataset of CSS named colors using D3’s `csv` utility and managing the asynchronous state with React’s `useState` and `useEffect` hooks. Once loaded, the data is rendered as a pie chart in SVG, where each slice is colored with the hex value from its corresponding row, using d3’s `pie` and `arc` generators. The chart fills the browser window, centered on the screen, and displays a “Loading…” message until the data arrives.

Jun 20, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to fetch and parse a remote CSV file, then display basic metadata about the dataset. The code uses the Fetch API with async/await to retrieve the text, and d3.csvParse to convert it into an array of objects. The parsed data’s row count and column count are displayed alongside the raw file size in kilobytes, all rendered inside a large pre element. The data source is a GitHub gist containing CSS named colors.

Jun 19, 2021

Loading thumbnail…

Mouse Follower

This example shows a single circle that follows the mouse cursor across the full browser window. The circle’s position updates in real time as the user moves the pointer over an SVG canvas. Built with React (version 16.9.0) and ReactDOM, the component uses the `useState` hook to store the mouse coordinates and the `useCallback` hook to handle `mousemove` events, retrieving `clientX` and `clientY` from the event object. The SVG is sized to `window.innerWidth` and `window.innerHeight`, with the circle’s `cx` and `cy` attributes bound to the current mouse position.

Jun 19, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a yellow smiley face with two eyes and a curved mouth, centered on an SVG canvas. It is built with React (v17) and D3 (v7), using D3’s `arc` generator to define the mouth path. The face is composed of three separate React components—`BackgroundCircle`, `Eyes`, and `Mouth`—all nested inside a shared `FaceContainer` that applies a translation transform. The SVG width is 960 pixels, height 500 pixels, and the final output is drawn entirely as vector shapes.

Jun 19, 2021