Skip to main content
SimilarExport ZIP
100%

full mact v0.1

✓ Published0🌍 Public
PPabloEscargot
Last edited Jan 5, 2020
Created on Jan 5, 2020
Forked from HTML Starter

This visualization displays ball-by-ball data from a single T20 cricket match between Sri Lanka and New Zealand, showing runs scored on each delivery. The code imports match data from a JSON file using `d3.json` and renders the information as an SVG graphic. Built with React and D3 v5, the example uses selections and scales to map individual deliveries, with the raw data structure visible in the console output for debugging purposes.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of playing with json

This visualization displays cricket batting statistics from a T20 match between Sri Lanka and New Zealand. It uses D3.js v5 (including `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, `d3.axisBottom`, `d3.schemePiYG`, and `d3.scaleSequential`) to render an SVG. Horizontal bars represent each batsman's innings, positioned by their first ball faced and colored by strike rate. Circles mark the last ball faced. The chart includes axis labels and text annotations for player names, runs, and strike rate. Data is loaded from a CSV file.

SshanLU999
79% match
Loading thumbnail…

playing with json

This visualization displays cricket batting data from a T20 match, showing each batsman’s innings as a horizontal bar spanning from their first to last ball faced. The bar’s height and color encode runs scored before dismissal and strike rate, respectively, using a sequential color scale. Circles mark the final ball of each innings, while text labels annotate standout performances. The chart is rendered as SVG using D3 v5, with data parsed from CSV and scales built via `d3.scaleLinear` and `d3.scaleSequential`, axes via `d3.axisLeft` and `d3.axisBottom`, and color interpolation from `d3.interpolateRdYlGn`.

PPabloEscargot
74% match
Loading thumbnail…

worm v0.1

This visualization displays a worm-like chart of cricket ball-by-ball data, with each rectangle representing a delivery from a bowler. The x-axis maps the ball number within an innings, while the y-axis shows runs scored, and the height of each rectangle encodes the runs scored on that delivery. It uses d3's `select`, `csv`, `scaleLinear`, and `sum` functions, along with the `nest` and `rollup` API to aggregate batting metrics by striker. The data is loaded from a CSV file, and the SVG output is rendered via d3.v5.

PPabloEscargot
72% 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
71% 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
69% 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
68% match
Loading thumbnail…

custom chart v2.1

This example visualizes a cricket batting innings by mapping each batsman’s performance as a rectangular block. The chart shows the number of runs scored (rectangle height) against the sequence of balls faced, with each player’s block positioned according to their first ball and cumulative team runs. Using d3.csv, d3.scaleLinear, and SVG rectangles, the code computes scales from the parsed data to render the custom chart. The visualization relies on data.csv containing batting statistics and displays the progression of individual contributions across the innings.

PPabloEscargot
68% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 chart animates cycles through four columns of a cricket dataset, plotting balls, match, age, and score against the x-axis while score remains on the y-axis. Using the `scaleLinear` API for axes and `selection.join` for idempotent circle updates, the scatter plot updates every two seconds via `setInterval`, re-computing domains from the new data extent. It renders as an SVG with large Share Tech font labels, drawing from a CSV loaded with `d3.csv`.

Ccharanchand9
68% match