Skip to main content
SimilarExport ZIP
100%

Fork of Best Cricket Captains

✓ Published0🌍 Public
Mmamathareddy1321@gmail.com
Last edited Mar 26, 2025
Created on Mar 19, 2025

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.

AI-generated description
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
81% 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
80% 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
79% match
Loading thumbnail…

ICE6 - Marks and channels

This bar chart shows the total number of wins achieved by various cricket captains, with captain names on the x-axis and win counts on the y-axis. The data is loaded from a CSV file and sorted by wins in descending order, with each bar colored uniquely via a d3.scaleOrdinal. Built with D3 v7, the visualization uses d3.csv for data loading, d3.scaleBand and d3.scaleLinear for axes, and includes interactive hover effects that change bar color through CSS transitions, along with rotated x-axis labels and axis labels for clarity.

Mmamathareddy1321@gmail.com
78% match
Loading thumbnail…

Fork of HTML Starter

This example combines a bar chart and a line chart in a single SVG view to compare the total runs and batting average of the top 15 Indian cricketers from a CSV dataset. The bars, rendered with `d3.scaleBand` and `d3.scaleLinear`, show runs on the left axis, while a crimson line, plotted with `d3.line`, overlays average values on a right axis. D3 v7 axes, gridlines, and hover tooltips supplement the visualization, which loads data asynchronously via `d3.csv`.

Ssharathchandrareddymuthyam
78% match
Loading thumbnail…

Fork of dataset

This bar chart displays the total Test cricket runs scored by top batsmen, with names on the y-axis and runs on the x-axis. It uses D3.js v5 via UNPKG, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the SVG visualization. The chart loads data from a local CSV file and customizes axis labels while removing default tick lines and domains for a cleaner appearance. The visualization highlights player rankings by bar length, with steelblue rectangles rendered from the parsed dataset.

Vvidhyanamini
78% match
Loading thumbnail…

Fork of HTML Starter

A bar chart from the D3.js visualization library shows the top 20 Indian cricketers ranked by their total runs scored, using data loaded from a CSV file. The visualization employs a categorical x-axis for player names and a linear y-axis for run counts, with data sorted in descending order and styled as steelblue bars. Built with d3.scaleBand, d3.scaleLinear, d3.axisBottom, and d3.axisLeft, the chart includes rotated player-name labels for readability and hover effects that change bar colors to darkorange.

Ssharathchandrareddymuthyam
77% match
Loading thumbnail…

Fork of HTML Starter

This bar chart displays the average runs scored by cricket players, grouped by their country of origin. Built with D3 v7, the visualization aggregates data from a CSV file using `d3.rollups` and `d3.mean` to compute country-level averages. The SVG rendering uses `d3.scaleBand` for the categorical x-axis and a sequential color scale to encode the average runs value, with interactive tooltips appearing on mouseover.

Aankitgoudpoodhari07@gmail.com
77% match