Skip to main content
Log in
A

Aditya Bhattacharya

@adib0073·16 public vizzes

Loading thumbnail…

Aditya - Summary Plot practice

This visualization displays a single summary metric value of 5.8 inside a green number box, accompanied by a white inner plot area with rounded corners. Built with React and D3 v6, the component loads time-series data from a CSV file containing dates and values. The interface includes reusable box components with selection states, using colored strokes to indicate selected versus unselected items. Additional UI elements include tick and info icons for interactive affordances, all rendered as SVG elements with drop-shadow effects for visual depth.

May 10, 2022
Loading thumbnail…

Aditya - React D3 Conditional Line Chart Practice

A connected scatter plot renders monthly risk values from a CSV file as an SVG line chart. The D3 v6 scaleTime and scaleLinear functions map dates and values, while conditional classes color each circle marker green, amber, or red based on thresholds at 50% and 75%. The component visualizes time series data and includes dashed reference lines for these thresholds. Tooltips show exact percentages, and axes are generated using D3's tick formatting.

May 10, 2022
Loading thumbnail…

Aditya - test plot for scatter plot

This scatter plot visualizes Time against Value from the Iris Dataset, with each data point rendered as a circle. The React application uses D3’s `scaleLinear` and `extent` functions to map data to SVG coordinates, with axes drawn via custom `AxisBottom` and `AxisLeft` components. D3’s `line` function connects the points in a path, while a CSV file fetched with `csv` provides the data.

May 6, 2022
Loading thumbnail…

Aditya - React D3 Bar Chart Practice 2

This visualization presents a bar chart of automobile fuel efficiency trends from 1980 to 2017, using data on model years and efficiency ratings. Built with a React component and D3 v6, it uses `scaleBand` for the x-axis and `scaleLinear` for the y-axis, with SVG rendering. The chart displays efficiency values as steel-blue bars, with axes generated via `axisBottom` and `axisLeft`, and includes tick marks and labels for clear data reading.

May 6, 2022
Loading thumbnail…

Aditya - Reusing D3 chart as React components

This example demonstrates how to reuse a D3 chart as a React component, displaying a connected scatter plot of time-series data. The visualization renders a line with circular points on an SVG canvas using d3.scaleTime, d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft. It reads data from a CSV file hosted on GitHub, parsing dates with d3.timeParse. The React component returns a div that D3 selects, appends an SVG to, and populates with axes, a line, and circles, showing a practical pattern for integrating D3 into a React application.

May 5, 2022
Loading thumbnail…

Aditya - Patient Data Profile

This example visualizes a patient’s clinical data profile in a health dashboard, displaying metrics like blood sugar, BMI, waist measure, pulse, and lifestyle factors alongside a circular progress indicator for estimated risk. The layout uses a white rounded-rectangle panel with SVG graphics and React components, including an Ant Design `Progress` circle and `Tooltip` for risk percentage, while inline `Tooltip` elements annotate abnormal values with percentage deviations. Interactive selection boxes and tag elements, built with custom React components and SVG, highlight actionable factors and potential interventions for similar patients.

May 5, 2022
Loading thumbnail…

Aditya - Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles, using circles sized by weight and colored by origin. The code uses the Vega-Lite API to construct the chart declaratively, registering it with Vega and Vega-Lite, and renders output as SVG in the browser. Data is loaded asynchronously via D3’s `csv` function from the Auto MPG dataset hosted on GitHub Gist. D3 v5, Vega, Vega-Lite, and vega-tooltip are all loaded separately, with chart appearance customized through a configuration object that adjusts axis and label styling.

Apr 22, 2022
Loading thumbnail…

Aditya - Figma Component

This interactive React visualization presents personalized health recommendations to reduce risk, showing two selectable action items with their associated factors, current values, expected outcomes, and difficulty levels. The interface uses SVG rendering with D3.v7 for graphics, displaying recommendation cards within styled boxes where users can toggle selections via tick logos and colored borders. Data-driven text elements communicate patient-specific information, while tag boxes with color-coded indicators visualize risk percentages and difficulty ratings. The example builds on population data from the United Nations World Population Prospects 2019, though the visible content focuses on the recommendation interface rather than the underlying population charts.

Apr 20, 2022
Loading thumbnail…

Aditya - Learning React and D3

This example renders a smiling face as a composite of SVG shapes. A yellow circle forms the face, two black circles serve as eyes, and an arc path creates the mouth. The visualization demonstrates how React components build the SVG structure, while D3 handles the mouth's geometry through its `arc` generator. Both React and D3 are loaded directly in an HTML page via CDN. The `Smiley` component combines the individual face, eyes, and mouth components into a single centered SVG container, showing a simple integration of React and D3 for static vector graphics.

Apr 19, 2022
Loading thumbnail…

Aditya - bar chart with React & D3

This bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The chart renders as SVG with horizontal bars, displaying country names on the y-axis and population values on the x-axis, but omits axes lines. The code combines React’s `useState` and `useEffect` hooks with D3’s `csv` loader, `scaleBand` for the categorical y-axis, and `scaleLinear` for the continuous x-axis.

Apr 5, 2022
Loading thumbnail…

Aditya - Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst of pie slices, with each slice filled by the corresponding color’s RGB hex value. It loads data from a CSV file using `d3.csv` and computes slice angles with `d3.pie`, while `d3.arc` generates the SVG path geometry. React manages the component state and renders the SVG elements, with a loading placeholder shown before data arrives. The visualization uses React hooks like `useState` and `useEffect` to fetch and store the data asynchronously.

Apr 5, 2022
Loading thumbnail…

Aditya - Vega-Lite API Template 1

This example visualizes automobile data from a CSV file, plotting engine horsepower against the year of manufacture as individual points, with a tooltip that reveals the car’s name on hover. It uses the Vega-Lite API to construct the scatterplot, while D3.js (d3.csv) loads the remote dataset. The visualization is rendered as an SVG via Vega, with Vega-Tooltip providing interactive labels. Custom axis and label styling are applied through a Vega-Lite configuration object to improve readability on a dark background.

Apr 1, 2022
Loading thumbnail…

Aditya - Loading Data with React & D3

This example demonstrates how to load and summarize CSS named color data from a GitHub gist. It displays a text readout showing the dataset’s size in kilobytes, row count, and column count. The code uses React hooks (`useState`, `useEffect`) to manage loading state, while D3’s `csv` method fetches and parses the data, and `d3.csvFormat` calculates the data size. The interface shows “Loading…” until the promise resolves.

Mar 30, 2022
Loading thumbnail…

Aditya - Data loading with Fetch, Promises, Async, Await

This example demonstrates how to load and inspect a CSV dataset using JavaScript’s Fetch API with async/await, as well as D3’s `d3.csv` method. The page displays the file size in kilobytes, the number of rows, and the number of columns from the `cssNamedColors.csv` dataset hosted on GitHub. The code includes commented-out alternatives using Promises with `.then()` and a simple async/await pattern, highlighting different approaches to asynchronous data loading while logging the raw text to the console.

Mar 30, 2022
Loading thumbnail…

Aditya - Mouse Motion Tracker in React

A smiley face made of SVG circles reacts to mouse movement in this React application. Built with React 16.9 and rendered via SVG, the component tracks the cursor's `clientX` and `clientY` coordinates using `useState` and `useCallback`. The main circle, sized at 50 pixels, follows the mouse position across the full browser window, while the face features remain static. The code uses React's event system for mouse tracking and dynamically updates the circle's `cx` and `cy` attributes on every move.

Mar 30, 2022
Loading thumbnail…

Aditya - Smiley Face Part VI

Eighteen randomly generated smiley faces are rendered in an SVG canvas, each using the same basic geometric structure defined by React components. The display demonstrates how D3 and React work together, with the D3 arc API generating the mouth path and a React component tree handling the background circle and eyes. Each face receives randomized values for stroke width, eye offset, eye radius, and mouth dimensions, producing a grid of varied expressions. The example uses a simple procedural loop with D3's range function to create the repeated faces.

Mar 25, 2022