Skip to main content
SimilarExport ZIP
100%

ICE 6

✓ Published4🌍 Public
Ddineshtadepalli12
Last edited Mar 8, 2022
Created on Mar 8, 2022

This visualization displays the top 10 players by number of catches, using a horizontal bar chart where bar lengths correspond to catch counts. The data is loaded from a CSV file using D3's `csv` function. Rendered as an SVG, the chart relies on React to manage state and render the SVG elements, while D3's `scaleBand` and `scaleLinear` handle the categorical y-axis and quantitative x-axis scaling. Grid lines and axis ticks are drawn manually with D3's tick generation.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 task

This example visualizes the number of catches by non-wicket-keepers in cricket, plotting each player against their catch count over time using an SVG line chart. The visualization employs D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `curveBasis`, and `line` to construct the chart, with a gradient stroke applied to the line path. The data is loaded from a CSV file hosted on GitHub, and the chart includes labeled axes and a title, with axes rendered via `axisLeft` and `axisBottom` and custom styling applied through CSS classes.

Ddineshtadepalli12
85% 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…

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

ICE 6

This example displays a horizontal bar chart of the top 10 most populous countries for 2019, ranked by population count. The visualization uses React with hooks to load CSV data and D3 v5 for scales and rendering, including `scaleBand` and `scaleLinear` for axes, alongside custom SVG elements for bars and gridlines. The dataset is fetched from a GitHub gist and sliced to the first ten entries, with the chart appearing within a React-managed SVG container.

Ssaidhiraj16
82% match
Loading thumbnail…

ICE 7 Task2

This visualization shows the distribution of most catches among non-wicketkeepers as a pie chart with a color-coded legend. The data is loaded from a CSV file using D3’s `csv` function, and the pie chart is generated with `d3.pie` and `d3.arc`, rendered as SVG in an HTML page. The chart uses `d3.scaleOrdinal` to assign colors to each player’s catches, and legend labels display player names alongside their values formatted with `d3.format`. The visualization is built with D3 v5 and rendered in SVG.

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

ICE - 6

This visualization displays the top 10 most populous countries using a horizontal bar chart rendered with SVG in React. It loads population data from a CSV file via `d3.csv`, then uses `d3.scaleBand` and `d3.scaleLinear` to map states and population values to bar positions and lengths. The chart includes custom grid lines, axis tick labels, and styled bars, with dynamic data loading handled through React hooks (`useState`, `useEffect`).

KKolliTeja
82% match