CSCE 5320 HW5 Cricket Innings Marks and Channels

100%

CSCE 5320 HW5 Cricket Innings Marks and Channels

✓ Published0🌍 Public

Last edited Sep 30, 2026

Created on Sep 30, 2026

This interactive D3 v7 visualization presents a scatterplot of 40 fictional cricket innings, plotting balls faced against runs scored. Users can cycle through five chart versions—from position-only encoding to a final, repaired version that adds quantitative area (scaled with `d3.scaleSqrt`) for minutes batted and categorical hue (`d3.schemeTableau10`) for team. The interface, built with SVG and HTML, features an interactive dropdown to switch versions and a dynamically updated summary panel. The tooltip highlights specific data points, like the Warrior innings C07.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

CSCE 5320 HW6 Cricket Seasons Testing Visualization Advice

This interactive D3.js (v7) visualization explores fictional cricket season statistics across five teams, plotting balls faced against runs for 150 player-seasons. Users choose among seven views, including 3D angle projections with a camera rotation slider, a 2D rival scatter, small multiples by team, animated season progression, and responsive or delayed interactions. The SVG scatter plot uses `d3.scaleOrdinal` colors for teams, with hover tooltips and click-to-select highlighting. A slider and play controls animate the seasonal data over six frames, while grid lines and accessible status text support comparison.

Ssaikirandasari6305@gmail.com

87% match

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive visualization gallery explores cricket player statistics through four distinct chart types. The main scatter plot demonstrates a reusable D3 component with an animated sequence that cycles through different x-axis attributes every two seconds, using `d3.scaleLinear` for axes and `d3.interpolateBlues` for color encoding runs scored. Additional views include an area chart showing strike rate magnitude, a line chart tracking performance trends, and a pie chart displaying milestone distributions. All charts pull from a remote cricket dataset and render as SVG with D3 v6, allowing users to switch between visualizations via a navigation menu.

AArun Kumar M

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

78% match

Loading thumbnail…

Fork of HTML Starter

This scatter plot visualizes cricket player statistics from a CSV file containing attributes like runs, matches, and strike rate. It uses D3 v7 to render an SVG chart, automatically detecting numeric columns to map to X and Y axes. The visualization includes axes with labels, colored dots that represent categorical groupings when present, and an interactive tooltip that displays data values on hover. The chart uses d3.scaleLinear for axis scaling, d3.scaleOrdinal with d3.schemeTableau10 for categorical colors, and d3.axisBottom and d3.axisLeft for axis generation. Data is loaded from an external CSV URL via a Gist.

Ssharathchandrareddymuthyam

77% match

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive visualization displays T20I cricket batting statistics as a scatter plot, with points colored by tertile groups of total runs scored using a sequential PuBu color scale. A cycling animation updates both axes every three seconds, showing different statistical pairings like Runs versus Batting Average, Strike Rate, Centuries, Fifties, and Sixes. The code imports data from a CSV file, uses the reusable scatterPlot module with D3’s scaleLinear, axisLeft, and axisBottom APIs, and applies ordinal color scaling with d3.scaleOrdinal and d3.schemePuBu.

AArun Kumar M

77% match

Loading thumbnail…

Activity6_Task3

This animated scatter plot displays Test Cricket player statistics, plotting runs, averages, strike rates, and innings as the x-axis cycles through these fields every three seconds. The visualization uses D3.js 6.7.0 with a custom `scatterPlot` module that employs `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for country-based coloring, and a symbol scale mapping batsmen, bowlers, and allrounders to distinct shapes via `symbol().type()`. Data comes from a CSV file sourced from gist.github.com, rendered as an SVG in the browser.

Bbudalavijay2001@gmail.com

77% match

Loading thumbnail…

CSCE 5320: ICE-7 Line chart

This line chart shows the number of wickets taken for each inn, plotted over time. The visualization uses D3.js v5 with an SVG rendering. It loads data from a CSV file and applies a time-based x-axis and linear y-axis. The chart creates a single blue line path using D3's line generator, with axes and labels positioned using margin calculations. The x-axis displays "Inns" and the y-axis displays "Wkts".

NNaveenParitala

77% match

Loading thumbnail…

CSCE 5320: ICE-7 Pie Chart

This example shows the distribution of cricket wickets among players as a pie chart, with a legend identifying each player and their corresponding wicket count. The data comes from a CSV file loaded via `d3.csv` from a GitHub gist. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw the SVG paths, with `scaleOrdinal` assigning a categorical color palette. Legend rectangles and text labels are appended to the SVG, and wicket values are formatted with `d3.format` for compact display.

NNaveenParitala

77% match