Skip to main content
SimilarExport ZIP
100%

Fork of World Best Captain in Cricket

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

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.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

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
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
80% 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
80% 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
73% 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
72% match
Loading thumbnail…

Fork of Fork of ICE 5 - Lifestyle Harshitha Dontha

This example displays a preview of cricket T20 match data, summarizing the loaded CSV file’s size, row count, and column count before rendering the first ten rows in a styled HTML table. Using D3.js v7, the code fetches the dataset via `d3.csv`, dynamically builds the table header and body with `selectAll` and `join`, and applies custom CSS for zebra striping, hover effects, and a sticky gradient header. The table presents the raw data as text without additional visualization.

Tt37674473@gmail.com
71% match
Loading thumbnail…

Fork of HTML Starter

This dark-themed visualization loads the Indian Cricketers CSV dataset via `fetch` and `d3.csvParse` with `d3.autoType`, displaying a summary card with file size, row, and column counts. Next to a mini SVG bar chart encoding Runs per Player, a decorative SVG cricket bat and ball is drawn using basic shapes like `circle` and `rect`. The chart uses D3 v7 selections such as `d3.select` for DOM manipulation, with axes and bars styled through CSS variables.

Ssharathchandrareddymuthyam
70% 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
70% match