Skip to main content
SimilarExport ZIP
100%

ICE-7 Reusable Scatter plot Sandeep Babu-11821337

✓ Published0🌍 Public
Ssandyman2109@gmail.com
Last edited Oct 26, 2025
Created on Oct 26, 2025
Forked from Hello VizHub

This scatter plot visualizes sports statistics from a CSV dataset, showing assists against goals or points for professional athletes. Points are sized by matches played and colored by sport (football, basketball, or cricket). Hovering over a point reveals a tooltip with player details. The visualization uses a reusable D3 v7 chart factory pattern with `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal`, rendering to SVG with configurable margins, axes, and labels.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Pie Chart Sandeep Babu 11821337

This pie chart visualizes the share of total goals or points contributed by each sport—football, basketball, and cricket—using data from SportsData.csv. The chart aggregates player statistics via `d3.rollup` and `d3.sum`, then renders slices with `d3.pie` and `d3.arc`, using a Tableau10 color scale from `d3.scaleOrdinal`. Labels appear on each slice using `labelArc.centroid`, and a legend lists the sports. The visualization is built with D3 v7 and rendered as SVG, with dark-themed styling applied.

Ssandyman2109@gmail.com
85% match
Loading thumbnail…

ICE-7 Line Chart Sandeep Babu 11821337

This line chart visualizes the average Goals/Points for professional athletes across different ages, derived from a CSV dataset of sports statistics. The visualization groups athletes by age, calculates the mean performance metric for each age group, and plots these averages as a continuous trend line. The chart uses D3 v7 with the `d3.csv` and `d3.autoType` functions to load and parse the data, followed by `d3.group` to aggregate values, `d3.scaleLinear` for axis scaling, and `d3.axisBottom`/`d3.axisLeft` for the axes. The line itself is drawn using the `d3.line` interpolation method, rendered as an SVG path with a blue stroke on a dark background.

Ssandyman2109@gmail.com
83% match
Loading thumbnail…

ICE-7 Area Chart Sandeep Babu 11821337

This area chart visualizes the average number of goals or points scored by professional athletes at each age, based on data from the included SportsData.csv file. The visualization aggregates the raw data by age and plots the resulting mean values as a filled area, using a blue line to trace the trend. Built with D3 v7, the chart employs `d3.group` and `d3.mean` for data aggregation, `d3.scaleLinear` for axes, and the `d3.area` and `d3.line` generators to render the SVG path. A dark themed interface with light-colored axes labels and a semi-transparent fill provides a clear visual representation of performance across age groups.

Ssandyman2109@gmail.com
82% match
Loading thumbnail…

ICE-7 Scatter plot

This example visualizes Test Cricket player statistics with a scatter plot that maps runs against batting averages, animating through different data fields every three seconds to explore relationships between metrics like strike rate and innings played. The visualization uses D3.js version 6.7.0, employing the `scaleLinear` and `scaleOrdinal` functions for positioning and color encoding, while SVG symbols represent player types. Data from a CSV file hosted on GitHub Gist is loaded asynchronously, with circles colored by country and shaped by player role. The reusable chart module implements a configurable API, cycling through four quantitative fields on the x-axis.

Mmedurisk7@gmail.com
81% match
Loading thumbnail…

ICE7 by Sujit, Scatter Plot

This animated scatter plot visualizes Premier League player statistics, cycling through goals, assists, yellow cards, red cards, and minutes played every two seconds. Built with D3.js, it maps selected metrics to x- and y-axes using scaleLinear and extent, rendering data points as SVG circles. The visualization uses the scatterPlot reusable function, which applies axisLeft and axisBottom for labeled axes. Data is loaded from a remote CSV file containing football statistics. The animation alternates the x-axis metric while keeping assists on the y-axis, with smooth transitions updating the circle positions and axis scales accordingly.

Ssujitrayudu01@gmail.com
81% match
Loading thumbnail…

ICE-7 varunscatter

This animated scatter plot uses D3.js to visualize Test Cricket player records, cycling through different x-axis fields (Runs, Average, Strike Rate, Innings) every three seconds. It displays player symbols colored by country, with shapes distinguishing player types (batsman, bowler, allrounder) via D3’s symbol scales. The reusable chart module (`scatterPlot.js`) dynamically updates axes and data bindings, loading the dataset from a CSV file using `d3.csv`. SVG rendering and transitions are handled through D3’s selection and join patterns, with margins and scales configured programmatically.

VVarun Gadde
80% match
Loading thumbnail…

ice-7 Q1 "Resuable Scatter Plot"

This example presents a reusable scatter plot that visualizes cricket statistics over time, cycling the x-axis through different numeric columns every two seconds. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, and `symbol` to render players as distinct shapes, with the SVG updating via `svg.call(plot)` to retrigger the chart. Data loads from a CSV file containing yearly runs, outs, and fours, and the chart supports configurable margins, radius, and accessor functions for flexibility. The implementation follows Mike Bostock’s “Towards Reusable Charts” pattern with a closure-based API.

Aachalasam
79% match
Loading thumbnail…

Fork of ICE7 by Sujit, Scatter Plot

This interactive scatter plot displays Premier League player statistics, cycling through different stat pairs (goals, assists, yellow cards, red cards, and minutes played) every two seconds. It uses D3's `scaleLinear`, `extent`, `axisLeft`, `axisBottom` and the `join` operator for idempotent SVG updates. Data is loaded from a CSV file containing ICRISAT district-level data, with parsing for numeric fields. The chart has a fixed radius for circle marks and uses the Share Tech font for axis labels.

Ssujitrayudu01@gmail.com
78% match