Ice-6

100%

✓ Published1🌍 Public

Last edited Jun 26, 2022

Created on Jun 21, 2022

Forked from ICE5

This example displays a horizontal bar chart of cricket batsmen’s number of not-outs in test matches, with player names on the y-axis and the count on the x-axis. The visualization uses D3 v5 with an SVG renderer, employing `d3.scaleLinear` and `d3.scaleBand` for scales and `d3.axisBottom` and `d3.axisLeft` for axes. Data is loaded from a CSV file via `d3.csv`, and each number of not-outs is parsed as a numeric value before rendering the bars.

AI-generated description

The Dataset is the statistics of each batsman in the game of cricket who played one-day-international matches. Each row has the batsman's name and the number of matches played. the number of NOTOUT'S, number of 100's, the '50s, 0's, total runs, and average. With the help this dataset we can analyze the performances of each player and rate them accordingly.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Ice-6

A horizontal bar chart displays the number of not-outs for cricket batsmen in test matches, with player names on the y-axis and counts on the x-axis. The visualization uses d3.csv to load the dataset from a GitHub gist, then d3.scaleLinear and d3.scaleBand map the data to screen coordinates. The chart is rendered as SVG with d3.axisBottom and d3.axisLeft for axes, and the x-axis tick labels are formatted using d3.format. A title and axis label accompany the bars.

Ppeesarie

92% match

Loading thumbnail…

ICE_6

This example displays the top 10 all-time leading run-scorers in cricket as a horizontal bar chart. The SVG visualization uses D3 v5 with `d3.scaleLinear` and `d3.scaleBand` to map runs and player names, while `d3.axisLeft` and `d3.axisBottom` render the axes. Data comes from a CSV file loaded via `d3.csv`, with run values parsed as numbers. Each player’s total runs are shown as orange bars, with a titled chart and formatted tick labels using `d3.format`.

Vvineeth-001

83% match

Loading thumbnail…

Scatter Plot ICE-6

This example visualizes Test Cricket records with a horizontal bar chart showing the top 10 players by number of centuries scored, using a categorical color scale from `d3.scaleOrdinal` and `d3.schemeCategory10`. The chart loads a CSV dataset via `d3.csv`, sorts players by century count, and renders SVG rectangles with axes from `d3.axisLeft` and `d3.axisBottom`. A companion scatter plot is also included, though its data mapping is not detailed in the visible code. The visualization uses D3 v7 and SVG rendering, with the data sourced from a public GitHub gist.

Mmedurisk7@gmail.com

80% match

Loading thumbnail…

ICE-6

This interactive bar chart displays the top 12 bowlers with the most wickets in a calendar year, using a horizontal layout with labeled axes. The visualization loads data from a CSV file via `d3.csv` and renders the chart as an SVG. React manages the component state and lifecycle, while D3's `scaleBand` and `scaleLinear` position the bars and ticks. The code explicitly draws gridlines, axis labels, and rectangles for each data point, with the title "Most Wickets by a Player in a calender Year" displayed above the chart.

AAbhinav-Mullapudi

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

78% match

Loading thumbnail…

ICE-6 Marks and Channels

This visualization presents two charts examining Test cricket records. The bar chart displays the top 10 players by number of centuries scored, using horizontal bars colored with d3.scaleOrdinal and d3.schemeCategory10. The scatter plot below explores the correlation between matches played and runs scored, though the scatter plot code is incomplete. Both charts load data from a CSV file containing Test cricket statistics, using D3.js v7 to render SVG elements with axes for the quantitative comparisons.

Mmedurisk7@gmail.com

78% match

Loading thumbnail…

ICE 6: Bar Chart Styling

This visualization displays the length of each game played from a CSV dataset, using a horizontal bar chart where each bar represents a game. The chart is built with React and D3 v5, employing scales from `d3.scaleBand` and `d3.scaleLinear` to map game numbers and lengths to screen coordinates. SVG rectangles are rendered for the bars, while custom tick marks and labels are generated manually using D3’s `scaleLinear.ticks()` and the band scale domain. Data is loaded asynchronously via `d3.csv`, and the chart is styled with green gridlines and blue text.

SSatyaVineeth

77% match

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3 using cricket dataset

This visualization displays the top 10 cricketers from a dataset, showing each player’s 2019 performance as a horizontal bar chart. The bars are rendered as SVG rectangles within a React component, using D3’s `scaleBand` for the categorical y-axis (player names) and `scaleLinear` for the numeric x-axis (population values). Data is loaded asynchronously via `d3.csv` from a GitHub gist, with axes and tick marks generated manually through React elements.

Vvidhyanamini

77% match