Skip to main content
SimilarExport ZIP
100%

CSCE-5320 ICE-6 ICC Most Wickets

✓ Published1🌍 Public
NNaveenParitala
Last edited Mar 8, 2022
Created on Mar 8, 2022

This chart displays the top 20 bowlers by wickets in ICC tournaments, using a horizontal bar chart rendered with SVG. Each blue rectangle represents a player’s total wickets, with scales and axes built using `scaleBand` and `scaleLinear`, and annotated via `axisBottom` and `axisLeft` callbacks. The data is loaded asynchronously from a CSV file using `d3.csv`, and the interface is constructed with React components and hooks like `useState` and `useEffect`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bonus ICE 3d Chart

This chart displays the top 20 players with the most wickets in ICC tournaments, using horizontal bars scaled by their wicket count. The SVG visualization is built with React and D3 v5, reading data from a CSV file via `d3.csv`. It uses `d3.scaleBand` for the player axis, `d3.scaleLinear` for the wicket and ball scales, and `d3.max` for domain calculation. The code includes axes with `d3.axis` tick generation, though labels and lines are rendered manually within ReactJS components.

NNaveenParitala
91% 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
85% 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
81% match
Loading thumbnail…

CSCE: ICE-7 Area chart

This area chart displays the number of wickets taken per innings, using a smooth curve to fill the area beneath the line, with time-scaled innings on the x-axis and a linear scale for wickets on the y-axis. The visualization is built with d3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` and `line` generators with `curveBasis` to create the filled path and stroke. Data loads from a remote CSV file via `d3.csv`, and the SVG rendering applies custom styling for the orange background, bold axis labels, and thick stroke.

NNaveenParitala
80% match
Loading thumbnail…

CSCE 5320: ICE-7 Line chart

This line chart shows the number of wickets taken for each inn, plotted over time. The visualization uses D3.js v5 with an SVG rendering. It loads data from a CSV file and applies a time-based x-axis and linear y-axis. The chart creates a single blue line path using D3's line generator, with axes and labels positioned using margin calculations. The x-axis displays "Inns" and the y-axis displays "Wkts".

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

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
79% match
Loading thumbnail…

CSCE 5320: ICE-7 Pie Chart

This example shows the distribution of cricket wickets among players as a pie chart, with a legend identifying each player and their corresponding wicket count. The data comes from a CSV file loaded via `d3.csv` from a GitHub gist. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw the SVG paths, with `scaleOrdinal` assigning a categorical color palette. Legend rectangles and text labels are appended to the SVG, and wicket values are formatted with `d3.format` for compact display.

NNaveenParitala
79% match