Skip to main content
SimilarExport ZIP
100%

Cricket World Cup

✓ Published0🌍 Public
Mmaheganesh
Last edited Mar 8, 2023
Created on Mar 8, 2023
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cricket World Cup

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.

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

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes cricket player statistics, comparing runs against strike rate or wickets against balls faced. Users toggle between the two views via buttons. Built with React and D3, the chart uses d3.csv to load remote data, d3.scaleLinear and d3.scaleOrdinal for scales, and d3.axisBottom/d3.axisLeft for axes. Circles are colored by match type (T20, ODI, Test) with hover tooltips, rendered as SVG with a legend.

Ssdarsi2404@gmail.com
75% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This React-based visualization displays two D3 scatter plots comparing cricket player statistics—Runs versus Strike Rate and Wickets versus Balls Faced—with color-coded points by match type (T20, ODI, Test) and tooltips showing player names. It loads CSV data via `d3-fetch`’s `csv` function, transforms numeric fields with JavaScript’s unary plus operator, and renders SVG circles using `d3-scale`’s `scaleLinear` and `scaleOrdinal` for axes and color encoding. Axes are generated with `d3-axis`’s `axisBottom` and `axisLeft`, with the reusable `plotScatter` function invoked twice in a `useEffect` hook.

Ssdarsi2404@gmail.com
74% match
Loading thumbnail…

Raviteja ICE-5

This example demonstrates a data summary of a CSV file listing Asia Cup cricket winners, displayed alongside a static SVG image of a face. The page loads the CSV from a GitHub Gist using D3 v7’s `d3.csv` method, then computes and displays the file’s size in kilobytes, the number of data rows, and the column count in a `<pre>` element. The rendering uses plain HTML and CSS, with a blue-colored text style, while the SVG face is embedded via an `<img>` tag. No interactive or animated charts are present; the visualization focuses solely on textual data metrics.

Mmadipadiga.raviteja@gmail.com
74% match
Loading thumbnail…

Data visualization

This example visualizes a dataset of match statistics, using a static SVG illustration that represents the data with a decorative, single-line chart and various abstract shapes. The visualization is built with the D3 v7 library and is implemented within a React framework. The code loads the data from a CSV file and uses SVG elements for the static rendering, though the image also utilizes a patterned WebGL-based background to enhance the visual presentation.

Aajaysonu
74% match
Loading thumbnail…

Fork of CSCE-5320 ICE-6

This example shows a horizontal bar chart of the top ten cricket players by total runs, with green gridlines and labeled axes. It loads CSV data from a GitHub gist, slices the dataset to the first ten rows, and renders the bars as SVG rectangles using React. The visualization uses `scaleBand` for the player categories and `scaleLinear` for the run values, with `axisBottom` and `axisLeft` omitted in favor of manual tick generation via `xScale.ticks()`. Styling is applied through inline SVG attributes and CSS in the HTML file.

Cchandrakalavanukuri
74% match