Skip to main content
SimilarExport ZIP
100%

Bonus ICE 3d Chart

✓ Published0🌍 Public
NNaveenParitala
Last edited Mar 12, 2022
Created on Mar 12, 2022

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

CSCE-5320 ICE-6 ICC Most Wickets

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

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

Data Visuliazation ICE-6

This visualization displays the total career runs of the top ten cricketers from a CSV dataset, using a horizontal bar chart where bar length corresponds to each player’s runs. Loaded via `d3.csv` and rendered with React, the chart uses `d3.scaleBand` for player names on the y-axis and `d3.scaleLinear` for the run totals on the x-axis, with gridlines and tick labels generated from the linear scale. The data is filtered to the first ten rows, and the SVG is styled with a light blue fill.

VVenkata Sai Preetham
78% 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
78% match