A

Aditya Khandelwal

@Adityak4201·17 public vizzes

Loading thumbnail…

Area Chart

This interactive area chart visualizes the Iris dataset, plotting petal length against sepal width. The visualization uses React and D3 v5 to render an SVG showing data points as circles. The code builds D3 linear scales for the axes, formats tick labels with `format('.2s')`, and includes tooltips through SVG `<title>` elements. Data is loaded asynchronously from a CSV using D3's `csv` function, with the chart styled using a Poppins font and muted color palette.

Loading thumbnail…

BarChart

This bar chart shows the global sales of video games by genre, ranking categories like Action and Shooter by their total sales in millions. The visualization uses D3 v6 to load CSV data from a GitHub gist, and renders the chart as an SVG with animated transitions. It employs `scaleBand` for the x-axis and `scaleLinear` for the y-axis, with axes generated by `axisBottom` and `axisLeft`. Bars are filled steelblue and change to orange on mouseover, using D3’s selection and transition APIs.

Loading thumbnail…

Fork of AggregatedDeaths

This visualization displays the total number of dead and missing migrants each month, using data from the Missing Migrants Dataset. The bar chart's x-axis represents time, while the y-axis shows the average age at death, with each bar's height corresponding to the mean age for that month. Built with React and rendered as SVG, the code uses d3's `bin` function to aggregate data into monthly intervals and `mean` to calculate the average age, with axes and marks handled by custom components.

Loading thumbnail…

Line Chart

This interactive line chart visualizes temperature readings over time in San Francisco, drawn from the Data Canvas Sense Your City dataset. A single black path traces measurements across a Cartesian coordinate system, with time plotted on the x-axis and temperature on the y-axis. Built with React and D3 v5, it uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `d3.line` with `curveNatural` to create a smooth, continuous line. The `AxisBottom` and `AxisLeft` components render tick marks and labels for each axis.

Loading thumbnail…

Vertical

This vertical bar chart displays the frequency of wait times from a defensive asylum cases dataset, showing the count of activities against categorical activity types. The visualization uses React with D3 v6 scales (`scaleBand` and `scaleLinear`) to map data to SVG rectangles, with custom `AxisBottom` and `AxisLeft` components generating ticks and gridlines. Data is loaded asynchronously via `csv()` from a GitHub-hosted CSV file, and each bar includes a native SVG `<title>` tooltip showing the count value.

Loading thumbnail…

Fork of BarChart

This visualization displays global video game sales by genre, using a bar chart to compare units sold across categories like Action, Shooter, and Platform. The chart is built with D3 v6, using `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and SVG rectangles for the bars. Bars animate their fill color to orange on mouseover and transition back to steelblue on mouseout. The data, sourced from Kaggle, is loaded as CSV and parsed, with axes and labels rendered via `axisBottom` and `axisLeft`.

Loading thumbnail…

Fork of A Bar Chart(Platform)

This interactive bar chart visualizes video game sales counts across different platforms and activities, drawing from a Kaggle dataset. The visualization displays the data as horizontal bars using React with D3 v5, where the y-axis is scaled linearly to represent sales counts and the x-axis uses a band scale for categorical activities. The chart implements custom axis components and marks using SVG rendering, with axis labels formatted through D3's formatting utilities. Users can interact with the dropdown menu to explore different data attributes, while tooltips provide additional context when hovering over individual bars.

Loading thumbnail…

Fork of Missing Migrants Date Histogram

A date histogram displays the total dead and missing migrants per month, with bars representing counts and axes labeled by time and total. Built with React and D3 v5, it uses `d3.bin` to bin data by date and `d3.sum` to aggregate counts per bin, rendered as SVG rectangles. The visualization pulls from the Missing Migrants Dataset via CSV, with axes and marks defined through reusable components.

Loading thumbnail…

Vertical Bar Chart with React & D3

A vertical bar chart built with React and D3 renders a CSV dataset of activities and their counts as steelblue SVG rectangles. The chart computes a band scale for the categorical x-axis and a linear scale for the numeric y-axis, with axes generated using `d3.axisBottom` and `d3.axisLeft`. A custom `useD3` hook handles SVG selections and updates the bars, while the React component loads the CSV asynchronously via `d3.csv` and passes the data to the chart.

Loading thumbnail…

Bar chart with React & D3

This example shows a horizontal bar chart of population counts per activity category, using D3 for data loading and scales while React renders the SVG elements. The code fetches CSV data from a GitHub gist via `d3.csv` in a custom `useData` hook, then builds the visualization with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Custom React components `AxisBottom`, `AxisLeft`, and `Marks` draw the ticks and colored bars, with each bar assigned a color from a small array.

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays CSS named color data as a radial burst pie chart, with each slice representing a task completion percentage loaded from a CSV file. The application fetches data using D3’s `csv` utility, computes pie angles with `d3.pie`, and draws arcs using `d3.arc`. React manages the component state and lifecycle, rendering the SVG paths dynamically once data arrives, while D3 v5 handles data loading and geometric calculations.

Loading thumbnail…

Data with React & D3

This example demonstrates a React and D3 integration where CSS named color data is loaded asynchronously from a CSV file using `d3.csv`. The application uses React state with `useState` and `useEffect` hooks to manage the loading process, showing a "Data is loading..." message until the dataset arrives. Once loaded, `d3.pie` computes arc segments from the Percentage column of the data, though the visualization currently only logs the computed arcs to the console and displays a "Data loaded" message. The example highlights how D3 utilities can handle data processing while React manages the component lifecycle and rendering.

Loading thumbnail…

d3 and react

This example demonstrates a React application that loads a CSV dataset using d3.csv and temporarily displays a loading message. The code uses React hooks (useState and useEffect) to manage the asynchronous data fetching lifecycle, while D3 version 6 handles the CSV parsing from a GitHub gist URL. Though the visualization is incomplete, the architecture shows how React manages component state and rendering while D3 handles external data ingestion, preparing the data for later chart construction.

Loading thumbnail…

Pie Chart

This pie chart visualizes task completion data loaded from a CSV file, with each slice representing a data row. The chart uses React state to manage the asynchronous data fetch and renders SVG paths via D3’s arc generator. The pie is centered on a 960×500 canvas, with each path drawn from the center outward using fixed inner and outer radii, and equal angular spans derived from the data length.

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face is drawn on an SVG canvas, centered with two eyes and a mouth. The code uses React to render SVG elements, with D3's `arc` function generating the mouth path and a reusable `BackgroundCircle` component for the face. The example is a partial implementation, as the README notes it is halfway towards a complete smiley face, with a hidden commented-out circle in the HTML.

Loading thumbnail…

Parsing CSV Data

This example demonstrates how to fetch and parse CSV data from a remote URL, displaying the result as a text summary that reports the data size in kilobytes, the number of rows, and the number of columns. The visualization uses D3 v5’s `d3.csv` function to load and parse the data asynchronously, with the parsed result stored in a data object whose properties are accessed via `.length` and `.columns`. The interface is minimal, consisting of a single `<pre>` element that updates its content with the computed statistics. The code relies on D3’s `csv` and `csvFormat` APIs for parsing and formatting.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using the Fetch API and D3.js. It fetches a remote text file containing task information and logs the raw contents to the browser console using asynchronous `async`/`await` syntax. The program uses the standard `fetch()` function to retrieve the resource and `response.text()` to extract its string content, illustrating the fundamental steps of retrieving data for later visualization.