Skip to main content
SimilarExport ZIP
100%

Cricketers Match Analyis

✓ Published0🌍 Public
Aachalasam
Last edited Jul 7, 2022
Created on Jul 6, 2022
Forked from HTML Starter

This example uses Plotly to render a 3D scatter plot of cricket player performance, comparing the number of sixes, fours, and matches played for each player. The data is loaded from a remote CSV file using D3’s `d3.csv` function, then unpacked into arrays for the x, y, and z axes. Each marker is a green diamond, with axes labeled accordingly and custom margins applied. The visualization is embedded in a simple HTML page with Plotly’s `Plotly.newPlot` method.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes cricket player performance by mapping petal length against petal width, with color-coded species markers and rotated axis labels for runs scored and player names. The visualization loads CSV data via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to compute scales, and renders circles as SVG elements with `d3.selectAll` and `.join`. Axis construction employs `d3.axisLeft` and `d3.axisBottom`, while the D3 v6 library handles data parsing and DOM manipulation within a React framework.

Mmaheganesh
76% match
Loading thumbnail…

Cricket Runs Analysis

This interactive bar chart visualizes cricket runs scored by different players each month from January through May. The visualization uses d3.x3d to render a 3D multi-series bar chart, with each player’s monthly performance represented as a separate series. The code loads player data from a CSV file using d3.csv, parses the values into the required format, and feeds them into the d3.x3d.chart.barChartMultiSeries function. The chart is displayed within an HTML page that imports D3 v5, d3-3d, and x3dom libraries to support the three-dimensional rendering.

Aachalasam
75% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3 using cricket dataset

This visualization displays the top 10 cricketers from a dataset, showing each player’s 2019 performance as a horizontal bar chart. The bars are rendered as SVG rectangles within a React component, using D3’s `scaleBand` for the categorical y-axis (player names) and `scaleLinear` for the numeric x-axis (population values). Data is loaded asynchronously via `d3.csv` from a GitHub gist, with axes and tick marks generated manually through React elements.

Vvidhyanamini
75% 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
75% match
Loading thumbnail…

Player Data Scatter Plot

This scatter plot visualizes player data, showing age on the x-axis and matches played on the y-axis, with each point’s radius scaled to the player’s score. The data is loaded from a CSV file via `d3.csv`, and the visualization is rendered as an SVG using D3 v6. Axes are created with `axisLeft` and `axisBottom`, while `scaleLinear` and `scaleSqrt` map the data values. A categorical color scheme distinguishes score ranges, and axis labels are added as text elements.

Aaniteshterala2000
74% match
Loading thumbnail…

Bonus ICE - 3D Scatter Plot

This 3D scatter plot displays cricketer data by age, height, and weight, with points colored by player role (batsman, bowler, or all-rounder). The visualization uses Plotly.js’s `scatter3d` trace type, mapping the three numerical attributes to the x, y, and z axes. Point colors are assigned based on role, and the axes feature custom background and grid colors. Data is loaded from a CSV file via D3.js’s `d3.csv` function, demonstrating a combination of Plotly for 3D rendering and D3 for data parsing.

Nnagarajuobbineni
74% match
Loading thumbnail…

Bonus ICE

This example shows a 3D scatter plot of cricket bowling statistics, comparing gameplay metrics across two coordinate spaces. The first trace plots innings, wickets, and balls delivered, while the second trace maps average, economy rate, and strike rate. Both traces use Plotly’s `scatter3d` with marker styling and opacity. Data is loaded via d3.csv from a GitHub-hosted CSV file, and the visualization is rendered inside a div using `Plotly.newPlot` with a zero-margin layout.

NNaveenParitala
74% 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
73% match