Skip to main content
SimilarExport ZIP
100%

Best Cricket Captains

✓ Published0🌍 Public
Mmamathareddy1321@gmail.com
Last edited Mar 19, 2025
Created on Mar 19, 2025
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

Fork of World Best Captain in Cricket

This example displays the top 10 cricket captains in a static HTML table, listing their name, matches, wins, losses, and win percentage. It loads a CSV file from a GitHub Gist using `d3.csv`, then appends rows to the table body with `d3.select` and `append`. The page is styled with custom CSS and uses D3 v7 loaded via UNPKG, demonstrating basic data loading and DOM manipulation.

Mmamathareddy1321@gmail.com
81% match
Loading thumbnail…

Fork of Best Cricket Captains

This example displays a bar chart comparing the number of matches won against matches captained for leading cricket captains, with each bar sorted by total matches captained and colored distinctly. The visualization uses D3.js v7 to load data from a CSV file via `d3.csv`, then creates an SVG chart with linear scales (`d3.scaleLinear`) for both axes and an ordinal color scale for bar fills. Interactive tooltips appear on mouseover events, showing captain name, match counts, and calculated win percentage, while the bars change color to orange on hover and revert when the mouse leaves. The chart is rendered with a pink background and rounded container styling.

Mmamathareddy1321@gmail.com
79% match
Loading thumbnail…

cricket-data-summary

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.

Aavinashpandian79@gmail.com
78% 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
74% 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
74% match
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
74% 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
73% match