shindeayush76@gmail.com

EAFC 24 ratings

This interactive parallel coordinates plot visualizes EAFC 24 player ratings, showing six quantitative attributes (pace, shooting, passing, dribbling, defending, and physic) across players. Each player is represented as a polyline connecting their attribute values on vertical axes, colored by club name using an ordinal scale. Users can brush along any axis to filter players, and the chart animates smooth transitions when filters change. The dark background with semi-transparent, screen-blended lines helps reveal overlapping patterns in the data, while tooltips provide additional detail on hover.

EAFC24 Player Ratings

A radar chart visualizes the attributes of a selected soccer player from a chosen club. The chart displays six skill metrics—pace, shooting, passing, dribbling, defending, and physic—as points plotted from the center of a hexagonal grid. Users select a club and player via dropdowns, which triggers an animated update of the radar chart rendered as SVG paths. Built with React, the D3 library’s `scaleLinear` and `scaleOrdinal` functions scale the data, which is loaded from a CSV file.

Fork of Ayush - Assignment 7

EAFC Ratings Dataset

The EAFC Ratings Dataset is a comprehensive football (soccer) player dataset containing attributes for FIFA/EA FC players, including overall ratings, potential, market values, wages, physical characteristics, and detailed skill ratings across categories like pace, shooting, passing, dribbling, defending, and physicality. It is sourced from EA FC video game data, parsed as CSV, and licensed under MIT. The dataset supports visual exploration of player attributes, club/league relationships, and positional analysis, with quantitative fields parsed into numeric formats for charting.

Fork of Parallel Coordinates with Brushing EV Data (Ayush)

This example visualizes electric vehicle specifications across multiple quantitative axes, including Efficiency, Price, Range, Top Speed, and Acceleration. Users can brush along any axis to filter the displayed data, highlighting car models that fall within selected ranges while dimming others. The visualization uses D3.js with `scalePoint` and `scaleLinear` to map each dimension, and `transition` with eased opacity to animate filtered lines in and out. Categorical data, such as car brand, determines the color of each path via `scaleOrdinal` and `schemeCategory10`. The dataset appears to be from a custom EV data package, and the chart updates responsively using the `observeResize` helper.

Ayush - Assignment 7

This animated scatter plot visualizes electric vehicle specifications from a Kaggle dataset, plotting driving range in kilometers against price in euros for models in Germany. Each circle represents a vehicle, colored by brand using a D3 ordinal scale with the Tableau10 scheme. Interactive tooltips display car name, range, and price on hover. A legend built with D3 selection methods allows clicking a brand to highlight its vehicles by adjusting circle opacity. The visualization uses D3 scales, axes, and transitions to present the correlation between range and price.

Ayush - Bar Chart for Assignment 6

This interactive grouped bar chart visualizes average fitness levels for males and females across six age groups, from 18-25 to 46-50. Users can click the legend to filter bars by gender, and hover over any bar to see a tooltip with the exact average value. The visualization uses the D3.js library with `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the chart, while grouping data by age range and gender. It also features a custom tooltip and interactive legend filtering, with animated transitions on mouse interactions.

Ayush - EV Data

This example visualizes the specifications of electric vehicles from a Kaggle dataset, showing a formatted view of a single record. The code loads the data from a CSV file, converts string values to numbers for all performance metrics, and then uses JavaScript to display the first data point. The visualization uses a simple HTML `<pre>` element to render a JSON string representation of the vehicle's attributes, such as battery capacity, price, and top speed, at a specified font size. The implementation relies on standard JavaScript data handling and DOM manipulation without any external charting libraries.

Fork of Fork of HTML Starter

This interactive choropleth map visualizes global population by country, with each nation color-coded according to population size using a threshold scale and a blue sequential color palette. Hovering over a country highlights its borders and displays a tooltip showing the country name and exact population figure. The visualization loads geographic data from a TopoJSON file and population statistics from a TSV file, then renders the map using `d3.geoMercator` projection and `d3.geoPath`. Tooltips are implemented with the d3-tip library, while the queue library manages asynchronous data loading.

Ayush - First Visual (EV Data)

This scatter plot shows the relationship between driving range and price for electric vehicles in Germany, using color saturation to encode efficiency and revealing a general trend where longer-range vehicles tend to cost more in euros. Built with D3.js, the visualization uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and `circle` elements with `colorScale` mapping efficiency from teal to purple. The data comes from a Kaggle dataset on electric vehicle specifications and prices, with missing "NA" values appearing as points outside the main plot margins.

Ayush - Assignment 5 responsive viz

This visualization displays average fitness levels for males and females across six age groups, from 18-25 through 46-50. Grouped bar charts depict the data, with steelblue bars for males and salmon for females, accompanied by hover interactions that darken bar colors and display tooltips with exact values. The visualization is rendered using D3.js primitives including `scaleBand`, `scaleLinear`, `max`, and `axisLeft`/`axisBottom`, with the `select` API managing SVG elements. Data is sourced from the `@ayush-shinde/cardio_data` package and aggregated by computing mean fitness scores per gender and age range.

Ayush - Bar Chart for Assignment 4

This visualization shows the average fitness levels of males and females across six age groups ranging from 18 to 50 years old. The code imports and averages data from the `@ayush-shinde/cardio_data` package, aggregating individual fitness scores by gender within each age range. Using `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack`, it renders grouped bar charts with steelblue bars for males and salmon for females. Interactive tooltips appear on mouseover, and a legend identifies the gender categories. The animation rendering reveals the comparative fitness trends between genders as age progresses.

Ayush - Bar Chart for Assignment 5

This animated bar chart visualizes the average fitness levels of males and females across six age groups, from 18-25 up to 46-50. The tooltip reveals exact values on hover. The visualization uses the D3 library, specifically `scaleBand` and `scaleLinear` for the axes, and processes data from the `@ayush-shinde/cardio_data` source. The chart employs a grouped bar layout with distinct colors for each gender, plus an interactive mouseover effect.

Ayush - Flowers

Five stylized flowers bloom across a light green background, each with eight petals in a distinct color (red, pink, orange, blue, purple) and a yellow center. Stems and leaf paths are drawn in green. Using D3.js version 7.8.5, the code appends SVG elements and animates the petals and centers growing from a radius of zero to full size via `transition()` with a duration of 2000 milliseconds. The visualization is generated programmatically with hardcoded positions and data arrays, rendering as an animation.

Ayush - Sleep and Health Data

This example displays the third record from a Kaggle dataset on sleep, health, and lifestyle, rendered as a formatted JSON object. The visualization shows a single person’s attributes, including age, sleep duration, stress level, and daily steps. The code imports the CSV data, converts numeric strings to numbers, and then uses JavaScript’s `JSON.stringify` method to present the selected row within an HTML `<pre>` tag. The project uses raw data parsing and direct DOM manipulation via `innerHTML` to output the structured information.

Fork of Solar System

This animation displays the planets of the solar system in a horizontal line, with relative sizes to scale but distances not to scale. Each planet grows into view sequentially with a label, using D3 transitions. The code applies radial SVG gradients to several planets, such as Jupiter and Neptune, to give them a more dimensional appearance. The starfield background is randomly generated. Data on planet sizes and distances comes from Wikipedia’s list of gravitationally rounded objects.

Ayush - Cardio Data

This example reads a CSV file of cardio fitness data and displays the first row as a JSON object in a preformatted block. The code imports the data with a custom CSV loader, coerces numeric fields like Age, Education, Usage, Fitness, Income, and Miles using unary plus operators, and then renders the result via a template literal in the container’s innerHTML. The visualization emphasizes the data structure rather than a chart, using no external libraries beyond the data import mechanism.

Fork of Hello HTML

This example shows the first step toward building a smiley face, displaying a yellow circle outlined in black as the head, plus two smaller unfilled circles for the eyes. The code renders directly into an SVG element with fixed coordinates and dimensions, using React to manage the document structure. It imports the React and ReactDOM production builds from unpkg, though it only logs ReactDOM to the console without invoking any React rendering APIs. The visualization relies solely on static SVG markup rather than dynamic data or interactive behavior.

Fork of Fork of Circles with D3

Seven colored circles float on a cream background, positioned with varied radii and opacity. This D3.js example uses the `select` API to bind SVG elements directly to a static data array. The code sets each circle's `cx`, `cy`, `r`, and `fill` attributes from the data, with a fixed overall opacity value. The visualization demonstrates a simple, declarative approach to rendering shapes without interaction or animation.