Skip to main content
SimilarExport ZIP
100%

Cricket World Cup

✓ Published1🌍 Public
Mmaheganesh
Last edited Mar 9, 2023
Created on Mar 8, 2023

This example displays the metadata of a Cricket World Cup ODI dataset, including the file size, row count, and column count, alongside a static SVG visualization of all teams. It uses a raw XMLHttpRequest to fetch a CSV file from a GitHub gist, then parses the response text by splitting on newlines and commas to compute the dataset dimensions. The page also embeds an image of the team comparison chart and provides a link to the source data. It relies on vanilla JavaScript and the browser’s XMLHttpRequest API, with no external visualization libraries.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cricket World Cup

This example visualizes Cricket World Cup data by displaying a static SVG chart of ODI statistics for all teams, alongside file metadata such as row and column counts. The page, built with React, loads a CSV dataset from a GitHub gist and presents it with a linked image file. The code uses plain HTML, CSS, and JavaScript for structure and styling, while the chart itself is an embedded SVG image rather than a dynamically rendered visualization. No interactive or data-driven rendering libraries are employed.

Mmaheganesh
91% match
Loading thumbnail…

Fork of Cricket World Cup

This example displays the file size, row count, and column count of a cricket ODI dataset, alongside a static SVG match visualization. It uses an XMLHttpRequest to fetch the CSV from a GitHub gist, parses the text into rows and columns, and formats the response’s Content-Length header into human-readable bytes. The page embeds the pre-rendered “Cricket_ODI_all teams” SVG image directly in the HTML, with React starter code present but no framework logic exercised. No interactive charts or D3 rendering occur.

Mmaheganesh
91% match
Loading thumbnail…

Fork of HTML Starter

This example visualizes Cricket World Cup 2023 match data by rendering match results in an HTML table and displaying win counts for each team. It also includes an SVG cricket field with animated elements such as fielders, a cricket ball, wickets, and a bat. The visualization uses JavaScript to fetch CSV data from a GitHub gist, parse it, and dynamically update the DOM. The table displays match details, while the analysis section provides a summary of total matches and wins for each team. The SVG cricket elements provide a static, thematic illustration of the sport. The project is built with React, though the core logic uses plain JavaScript and SVG. The data is loaded via the Fetch API from a remote CSV file.

Ppraveennayak1702@gmail.com
75% match
Loading thumbnail…

t20

This example shows metadata about a t20 cricket players dataset, including its size, row count, and column count. It uses D3 v7 to fetch a CSV file via `d3.csv`, then computes the dataset’s size in kilobytes using `d3.csvFormat(data).length`. The results are displayed as plain text inside a `<pre>` element, with a background image and dataset link provided in the HTML/CSS. The page’s heading and anchor tags present the data source and a clickable reference.

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

t20

This page displays metadata about the T20 cricket dataset, including its size in kilobytes, number of rows, and number of columns. It fetches the dataset from a CSV file hosted on GitHub using d3.csv, then computes the metadata by measuring the length of d3.csvFormat output and accessing the data array and its columns property. The results are displayed as plain text in a pre element, with a credit card SVG background and red hyperlink styling from the CSS.

Aayodhyanandh
72% match
Loading thumbnail…

ICE-4 CSCE 5320

This example displays metadata about a 2022 football teams dataset, including file size, row count, and column count, alongside a static SVG illustration of a football play scene. It loads CSV data from a GitHub gist using D3 v7’s `d3.csv` and formats the dataset with `d3.csvFormat` to compute information presented in a `<pre>` block. The page is built with plain HTML, CSS, and JavaScript, with the SVG chart drawn manually and styled inline.

Pprashanth yamala
72% match
Loading thumbnail…

CSS Visualization

This example displays basic metadata about a CSV file in large text on a webpage. It uses D3 v6’s `d3.csv` to load a remote dataset from a GitHub gist, then calculates and shows the approximate file size in kilobytes, the number of rows, and the number of columns. The result is rendered into a `<pre>` element using `document.getElementById` and `textContent`. The code also includes commented-out alternative approaches using `fetch` and `d3.csvParse`.

YYashuVerma1210
72% match