Skip to main content
SimilarExport ZIP
100%

ICE-6

✓ Published0🌍 Public
AAbhinav-Mullapudi
Last edited Mar 9, 2023
Created on Mar 6, 2023

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.

AI-generated description

A bare minimum HTML page.

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

ICE5

This example displays information about bowlers who took the most wickets in a calendar year, providing metadata about the dataset through a text message on the page. It uses D3.js v7 to load a CSV file from a GitHub Gist via `d3.csv`, computes the data size in kilobytes, row count, and column count using `d3.csvFormat`, and renders the results as plain text in a `<pre>` element. The page also features a background SVG image applied through CSS.

AAbhinav-Mullapudi
84% match
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
83% match
Loading thumbnail…

ICE 6

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.

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

ICE6_SaiBhavanaAkkineni

This visualization displays the top 11 sports by fame in 2018, using a horizontal bar chart rendered as SVG. The React app loads data from a CSV via `d3.csv`, then uses `d3.scaleBand` for the categorical sports axis and `d3.scaleLinear` for the numerical value axis. Each sport is represented by an orange rectangle, with gridlines and tick labels generated from the scales. The chart is built with React hooks (`useState`, `useEffect`) and D3 v5.

SSai Bhavana Akkineni
80% 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
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