playing with json

100%

playing with json

✓ Published1🌍 Public

Last edited Jan 5, 2020

Created on Jan 5, 2020

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`.

AI-generated description

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

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

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

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

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

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

80% match

Loading thumbnail…

D3.js bars and charts

This visualization displays a horizontal bar chart of cricket player statistics from IPL 2021, ranking players by their total runs scored. Each bar represents a player, with the x-axis showing run counts and the y-axis listing player names from the loaded CSV dataset. The chart is rendered using D3.js v7 within a React framework, employing d3.csv for data loading, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom for axes. The visualization uses SVG rendering with steelblue bars to encode the quantitative values.

AAyushman

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

77% match