ICE6_SaiBhavanaAkkineni

100%

ICE6_SaiBhavanaAkkineni

✓ Published0🌍 Public

Last edited Jun 25, 2022

Created on Jun 25, 2022

Forked from Fork of Fork of Fork of Fork of Sports List

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

data

This visualization displays the top 11 popular sports in 2021 as a horizontal bar chart, using a purple bar for each sport whose length corresponds to the number of matches played that year. The chart loads data from a CSV file using `d3.csv` and renders SVG elements through React components. It uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and custom tick rendering for both axes. The page includes a title and uses React hooks like `useState` and `useEffect` to manage data loading.

SSaiSree0122

85% match

Loading thumbnail…

Data Visualization - ICE-6 - Bar chart

This bar chart displays the total revenue, in millions of dollars, of the world’s top 10 highest-earning athletes, with each bar labeled by the athlete’s name along the vertical axis. The visualization uses React to render an SVG and D3’s `scaleBand`, `scaleLinear`, and `csv` to load and map the data from a remote CSV file. Axes are custom-drawn using D3’s `ticks()` method, with manual positioning of tick labels and lines, while the chart itself highlights red bars with blue text and a red axis grid.

SSravan1888

82% match

Loading thumbnail…

Sports List

This visualization displays a bar chart of the top eleven sports in 2021 based on match counts, sorted vertically with a purple bar for each sport. The code uses D3 v5 (including `scaleBand`, `scaleLinear`, `csv`, and `max`) within a React component to load data from a GitHub-hosted CSV and render the chart as an SVG. Axes are manually drawn with ticks and gridlines, while text labels for sports appear on the left.

MManasaPatange

81% match

Loading thumbnail…

s of Data Visualization - ICE-6 - Bar chart

This bar chart displays the world’s top 10 revenue-generating athletes, showing their total pay in millions of dollars. It highlights how D3 axes can be customized with blue tick labels and red gridlines. The code uses React hooks with `useState` and `useEffect` to fetch CSV data, then renders SVG rectangles via D3’s `scaleBand` and `scaleLinear`. Custom axes are drawn manually, while the chart loads data from a GitHub gist URL.

SSaahithi49

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

80% match

Loading thumbnail…

ICE-6

A horizontal bar chart displays the top 20 rated anime, with each bar’s length proportional to its rating. The visualization loads CSV data via `d3.csv`, sorts by rating, and renders SVG bars, axes, and labels using React components. It uses D3 scales (`scaleBand`, `scaleLinear`), axis ticks, and text elements for annotation. The chart is styled with CSS in the HTML file, and the React app updates state after data retrieval.

RRaajithaSabbineni

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

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

80% match