Mahendra Gullinkala - IC6

100%

Mahendra Gullinkala - IC6

✓ Published0🌍 Public

Last edited Mar 22, 2023

Created on Mar 22, 2023

This visualization shows the highest runs scored by each of the top 20 cricket players, displayed as a horizontal bar chart with player names on the y-axis and run values on the x-axis. The chart uses React and D3 v5 to fetch CSV data from a GitHub gist, process it, and render SVG bars. D3’s `scaleBand` and `scaleLinear` handle the axis mappings, while `axisLeft`, `axisBottom`, and `max` are imported for layout and scaling calculations. The bars are drawn as SVG rectangles, with red tick gridlines and labels generated from the linear scale’s ticks.

AI-generated description

A whole smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Mahendra Gullinkala - IC6

A horizontal bar chart displays the highest individual scores for 20 cricket players, ranked by name along the y-axis and score magnitude along the x-axis. The visualization uses React to manage state and lifecycle, loading CSV data via d3.csv and parsing numeric values on input. d3.scaleBand and d3.scaleLinear map player names and scores to SVG rectangles, while gridlines and axis tick labels are generated manually using xScale.ticks() and d3’s axis formatting utilities. The chart updates reactively when data arrives, with a red vertical gridline marking each tick value.

Mmaheganesh

92% match

Loading thumbnail…

Data Visuliazation ICE-6

This bar chart displays the total runs scored by the top 10 cricketers from a CSV dataset, with each player’s name labeled on the y-axis and run counts plotted along the x-axis. The visualization uses React for component rendering and d3.csv to load and parse the data, while d3.scaleBand and d3.scaleLinear handle the categorical and quantitative scaling. Axis ticks and gridlines are generated via xScale.ticks(), and the chart is styled with a light blue fill and black text.

TTharun2022

81% match

Loading thumbnail…

CSCE-5320 ICE-6

This bar chart shows the ten cricketers with the most runs, ranked by total score. The visualization loads data from a CSV file using `d3.csv`, sorts it to the top ten entries, and renders horizontal bars with `React` components and SVG. D3’s `scaleBand` and `scaleLinear` position the bars and axes, while `axisLeft` and `axisBottom` are used to label the player names and run values, with green gridlines drawn from `xScale.ticks()`.

LLG0498

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

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

80% match

Loading thumbnail…

sample

This example visualizes the top 10 T20 Indian cricket players by runs scored, using a horizontal bar chart rendered with SVG. The data is loaded from a CSV file, and the chart uses `scaleBand` for the y-axis player names and `scaleLinear` for the x-axis run totals. React manages the component state and rendering, while D3’s `csv` fetches the dataset and `max` computes the domain. Grid lines and axis labels are drawn manually as SVG elements.

Aayodhyanandh

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

79% match

Loading thumbnail…

Bar Chart

This bar chart displays the top 15 cricket players ranked by their match scores. Built with React and D3 v5, it uses `scaleBand` for the categorical player names on the y-axis and `scaleLinear` for the numeric score values on the x-axis. The data is loaded from a CSV file via the `csv` function, with tick formatting handled by `format`. SVG rectangles render each bar, and tooltips appear on hover using the native `<title>` element.

BBhavyaMammai

79% match