Cricket_Area Chart

100%

Cricket_Area Chart

✓ Published0🌍 Public

Last edited Mar 27, 2025

Created on Mar 26, 2025

This area chart visualizes cricket players’ yearly run totals from 2010 to 2021, using a filled steel-blue path to show the trend. Each data point is marked by a red circle that reveals a tooltip with the player’s name, year, and runs on hover. The visualization uses D3.js v7 with SVG rendering, including `d3.area()` for the area generator, `d3.axisBottom()` and `d3.axisLeft()` for axes, and `d3.scaleLinear()` for scales, alongside manual gridlines and axis labels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

area chart

This area chart visualizes the runs scored by a cricket team each year from 2007 to 2021. The SVG render uses D3 v5’s `scaleTime` and `scaleLinear` to map years and run totals, with `d3.area` and `d3.line` generators drawing the filled region and its boundary using a basis curve. CSV data is loaded via `d3.csv`, and axes are styled with custom tick formatting and labels. The chart highlights overall scoring trends over the 15-year period.

RRupeshGandham

86% match

Loading thumbnail…

Area chart ICE-7

This area chart visualizes the runs scored by 20 cricketers from various teams in 2024, with each player labeled on the x-axis and their total runs on the y-axis. The chart uses D3.js v7 to generate an SVG rendering, employing `d3.area` to create the filled region beneath a `d3.line` overlay, while `d3.scalePoint` positions the players and `d3.scaleLinear` maps the runs. Orange dots are added using `d3.selectAll` with `join` to mark individual data points, and each dot includes a title tooltip showing the player’s name and runs. Data comes from the `cricket_stats.csv` file, loaded asynchronously via `d3.csv`.

Aavinashpandian79@gmail.com

86% match

Loading thumbnail…

A2 Ques2

This example visualizes the relationship between international cricket players’ runs and wickets, using an area chart to show cumulative trends and colored circles to distinguish individual players. The chart loads CSV data from a GitHub gist, converts numeric string values, and applies D3’s scaleOrdinal with the Category10 scheme for player colors. It renders an SVG area path via d3.area, plots circles per player, and adds a legend using SVG rect and text elements. The code uses d3.csv, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.max from D3 v6.

Rrahulnathmukkolla@gmail.com

83% match

Loading thumbnail…

Areachart_Q2

This area chart visualizes the relationship between the number of matches played and runs scored by Indian T20 batsmen, with a steel-blue filled region beneath the line plot. The x-axis displays matches, the y-axis displays runs, and both axes are labeled. Implemented using D3.js v7, the visualization loads CSV data via `d3.csv`, computes scales with `scaleLinear`, generates the area shape using `d3.area`, and renders axes with `axisBottom` and `axisLeft`. The SVG chart is embedded in an HTML page with basic CSS styling.

Vvarmanithish5@gmail.com

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

78% match

Loading thumbnail…

Cricket - Pie Chart

This pie chart visualizes the distribution of runs scored by cricket players, with each slice representing an individual player. The chart uses D3.js v6 with an SVG rendering approach, loading data from a CSV file and applying an ordinal color scale. Interactive tooltips appear on hover, and slice labels display player names directly on the chart. A legend translates additional player information alongside the pie, providing a complete overview of the dataset's run values.

Ssrisailapu.rc@gmail.com

77% match

Loading thumbnail…

Fork of ICE-7 Area chart SKM

This area chart displays the top 40 Test cricket players by total runs, drawn as a single steelblue path over a categorical x-axis of player names and a linear y-axis of runs. The code loads data from a CSV via `d3.csv`, sorts and slices the dataset, then uses `d3.scaleBand` and `d3.scaleLinear` with `d3.area` to generate the SVG path. Rotated x-axis labels and an SVG text element for the y-axis title accompany the chart, all rendered client-side in D3 v7.

Mmedurisk7@gmail.com

77% match

Loading thumbnail…

Cricket_Pie Chart

This pie chart displays the cricket performance of five players based on their total runs, with each slice colored and labeled by player name, and a legend positioned to the right. Hovering over a slice triggers a tooltip that reveals the player’s runs and career years. Built with D3 v7, the visualization uses `d3.pie` and `d3.arc` to generate the chart, `d3.scaleOrdinal` with `schemeCategory10` for colors, and SVG rendering. The hardcoded sample dataset includes players like Sachin and Virat, while the tooltip is implemented via mouse events.

Ssrisailapu.rc@gmail.com

76% match