cricket-data-summary

100%

cricket-data-summary

✓ Published0🌍 Public

Last edited Oct 6, 2025

Created on Oct 6, 2025

This example presents a summary of cricket player statistics from a CSV dataset, displaying the data in a styled HTML table. It loads the data with `d3.csv`, logs the parsed rows to the browser console, and computes aggregate metrics such as the number of players, average runs, and average strike rate using `d3.mean`. The table’s header and rows are dynamically generated with D3 selections and data joins, while static CSS styles the layout.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example displays summary statistics and a sample record from a CSV dataset of Indian cricketers on a dark-themed page. It visualizes the data by fetching a local `data.csv` file and using `d3.csvParse` to parse the text, then displaying the file size, row count, and column count within a styled summary card. A single row's player name, role, matches, and runs are shown in a separate sample box. The page also includes a decorative SVG illustration of a cricket bat and ball, and uses D3.js v7 methods like `d3.select` to update the HTML content dynamically.

Ssharathchandrareddymuthyam

83% match

Loading thumbnail…

Fork of HTML Starter

This example visualizes summary statistics from a dataset of Indian cricketers, displaying file size, row count, and column count in a styled HTML card, alongside a sample player record. After fetching the CSV from a GitHub gist, the code uses D3 v7’s `d3.csvParse` to parse the text and `d3.select` to update the DOM with the computed values. An accompanying inline SVG depicts a cricket bat and ball as decorative artwork.

Ssharathchandrareddymuthyam

81% match

Loading thumbnail…

Data Table Summary: Cricket

This example displays a summary of a cricket ODI dataset from Kaggle, showing the total row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. It uses d3.csv to load the data and d3.csvFormat to calculate the data size, appending the results to the body with d3.select and pre elements. The black background with green monospace text presents the output in a terminal-like style.

MMukund Khandelwal

80% match

Loading thumbnail…

Data Table Summary

This example displays a summary of an MLB team statistics dataset from 2013–2016, sourced from Statcrunch. It shows the total number of rows, columns, and file size in kilobytes, followed by the first ten rows of data formatted as JSON. Using D3 v5, the visualization loads the CSV data with `d3.csv` and `csvFormat`, then appends the summary and preview to the page as `pre` elements. The black background and green monospaced text evoke a terminal interface.

Wwangjonathan

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

79% match

Loading thumbnail…

ICE 5 - Cricket t20 Data with D3

This example loads a cricket T20 dataset from a CSV file using d3.csv and displays a summary of its size, row and column counts, followed by a styled preview table of the first ten rows. The table is rendered dynamically with D3 selections, joining header and cell elements. The visualization emphasizes data overview and readability through CSS styling, including sticky headers, zebra striping, hover effects, and right-aligned numeric columns.

AArun Kumar M

79% match

Loading thumbnail…

Best Cricket Captains

This example displays a summary of a cricket captains dataset, showing the file size, row count, and column count as highlighted numbers in a styled box. It fetches a CSV file from a GitHub Gist and parses it with `d3.csvParse` to calculate these statistics. The page uses plain JavaScript `fetch` to load the data, then dynamically updates the HTML content to present the results. D3 v7 is loaded via CDN for CSV parsing, while CSS handles the layout and a loader animation during the fetch process.

Mmamathareddy1321@gmail.com

78% match

Loading thumbnail…

Best Cricket Captains

This example presents a data summary for a dataset of cricket captains. It displays the file size, row count, and column count of the loaded CSV data in a styled web page. The visualization fetches the remote CSV file via the `fetch` API, then uses `d3.csvParse` to parse the text. The resulting statistics are dynamically rendered into the page's summary section with highlighted emphasis. Data source is a GitHub Gist. The interface features a bold color scheme with a loading animation while fetching occurs.

Mmamathareddy1321@gmail.com

76% match