ICE7 by Sujit, Scatter Plot

100%

ICE7 by Sujit, Scatter Plot

✓ Published1🌍 Public

Last edited Mar 28, 2024

Created on Mar 27, 2024

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.

AI-generated description

ICE 7 Question 1 by Sujit Rayudu.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7 by Sujit, Area Chart

This chart displays Premier League player goals and assists as a single steelblue area, using an area chart where goals form the x-axis and assists form the y-axis. Data is loaded from a CSV file via `d3.csv`, with numeric values converted and sorted by goals. The visualization uses `d3.scaleLinear` for both axes, `d3.area` to generate the area path, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The SVG is rendered with axes labeled "Goals" and "Assists" within a 960-by-500 pixel viewport.

Ssujitrayudu01@gmail.com

84% match

Loading thumbnail…

ICE7 by Sujit, Line Chart

A line chart titled “Premier League Goals and Assists” visualizes the relationship between goals and assists for football players, with the data loaded from an external CSV file via `d3.csv`. The chart sorts players by goals and plots assists against goals using a linear scale for both axes. The visualization is rendered with D3 v6, using `d3.scaleLinear` for the axes and `d3.line` to draw a single steelblue path, while axis labels and ticks are added via `d3.axisBottom` and `d3.axisLeft`. The SVG output is centered on the page with a fixed width and height.

Ssujitrayudu01@gmail.com

83% match

Loading thumbnail…

ICE7 by Sujit, Pie Chart

This pie chart displays the Premier League’s top goal scorers, using color-coded slices to represent each player’s goal tally. The visualization first shows the overall distribution of goals before explaining the rendering: D3’s `pie` and `arc` generators create the chart, while `scaleOrdinal` maps player names to a pastel color palette. A legend on the right identifies each player, with data loaded from a CSV file. The code explicitly uses D3 v5 APIs like `d3.csv`, `d3.pie`, and `d3.arc` to build the SVG-based graphic, positioning labels via a secondary `labelArc` for clarity.

Ssujitrayudu01@gmail.com

83% 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

82% match

Loading thumbnail…

ICE-7 - Scatter Plot

This animated scatter plot maps student performance metrics, such as scores in tenth, twelfth, and college, along with time spent, against each other. The plot cycles through different x-axis variables, updating the visualization in a loop, and colors data points by hobby categories: Cinema, Sports, and Others. Built with D3 v6, it uses `d3.csv` to load the data and a custom `scatterPlot` module that constructs axes and circles, rendering the SVG animation with a legend and labels.

AAshrith Kudidhi

79% 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

79% match

Loading thumbnail…

Fork of ICE-7 Scatter plot

This interactive scatter plot visualizes Test Cricket records, showing the relationship between two selected metrics for each player. It cycles through different x-axis fields—Runs, Average, Strike Rate, and Innings—every three seconds, allowing for dynamic comparison of player performance. The visualization uses D3.js, specifically the `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` APIs, to render the plot with symbols and colors representing player type and country. Data is loaded from a remote CSV file hosted on GitHub Gist, and the plot is drawn as an SVG element that updates in place.

Rrohithannadurai@my.unt.edu

78% 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

77% match