worm v0.1

100%

✓ Published0🌍 Public

Last edited Jan 6, 2020

Created on Jan 6, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Worm Chart D3 V4

This chart displays cricket match progress by plotting cumulative runs for two teams across 20 overs. It uses d3.v4 and jQuery to render an SVG multi-series line chart, with each team’s scoring trend shown in a distinct color. Animated resize handling redraws the chart, and optional legend labels identify the teams. The data includes per-over scores and wicket events, though circles for wicket markers are not enabled in the current configuration.

CChandrakantThakkarDigiCorp

79% 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

77% match

Loading thumbnail…

custom chart v2.3

This custom chart visualizes cricket batting performance for a single innings, plotting each batsman's runs scored against the number of balls faced. Rectangles represent each player's innings length, positioned by their first ball faced, while circles mark their last ball faced and the fill color indicates strike rate. The chart uses D3 v5's scaleLinear, scaleBand, and sequentialScale with an interpolateRdYlGn color scheme. Data is loaded from a CSV file and rendered as SVG, with text labels displaying player names, runs, and strike rate.

PPabloEscargot

76% match

Loading thumbnail…

custom chart v2.0

A custom SVG chart visualizes cricket batting performance across an innings, with each batsman represented by a horizontal bar positioned by their first ball faced and sized by innings length and runs scored. The bars stack vertically based on cumulative runs before each batsman, showing their contribution relative to the team total. The visualization uses d3.csv to load the data, d3.scaleLinear for both x and y positioning, and SVG rectangles appended via d3.selectAll and data joins, with the axis scales hardcoded to a 300-ball innings.

PPabloEscargot

75% match

Loading thumbnail…

custom chart v2.2

This chart displays cricket batting data, mapping each player’s innings as a horizontal bar positioned by their first ball faced and height by runs scored before them. The SVG rendering uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for scales, and d3.csv to load the dataset. Rectangles encode innings length, runs, and cumulative runs, with axis ticks showing balls faced.

PPabloEscargot

75% match

Loading thumbnail…

custom chart v2.0

This custom chart visualizes cricket batting performance, showing each player’s innings as a horizontal bar positioned along the ball count, with bar height representing runs scored and vertical offset reflecting cumulative team runs before that batsman. The SVG rendering uses d3.scaleLinear for both axes, d3.csv for data loading, and d3.select to bind CSV data to rectangles. The chart encodes individual innings length, start ball, and runs in a single coordinated view.

PPabloEscargot

75% 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…

full mact v0.1

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.

PPabloEscargot

72% match