Bar - Chart for ICE6

100%

Bar - Chart for ICE6

✓ Published0🌍 Public

Last edited Oct 20, 2025

Created on Oct 20, 2025

A horizontal bar chart ranks the top sports clubs by revenue in millions of US dollars, using data from a CSV file. Built with React and D3 v5, it sorts clubs descending by revenue via `d3.csv` and `scaleBand`/`scaleLinear`, rendering SVG rectangles. The chart features a fixed, scrollable bar area with a sticky y-axis label, synced scrolling through React state and the `onScroll` event, plus D3 axes (`axisLeft`, `axisBottom`) with gridlines.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Multi-series chart - ICE6

This example shows the top 20 sports clubs by revenue, combining purple bars for revenue (USD Millions) on a left y-axis with an orange line and points for championships won on a right y-axis. Club names run along the rotated bottom x-axis. The visualization uses React with D3 v5’s `scaleBand`, `scaleLinear`, `line`, and axis functions for SVG rendering. Data is loaded from a CSV via `csv`, filtered to remove missing values, and sorted by revenue before display.

BBalaji Dasari

87% match

Loading thumbnail…

Welcome to - ICE-6 - Bar chart

This bar chart displays the top 10 highest-earning athletes in the world, with values in millions of dollars, based on a CSV file loaded from a GitHub gist. The visualization uses React with D3 v5, specifically leveraging `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `rect` elements for the bars. The chart customizes axes through manually drawn tick lines and text labels, with red gridlines and blue tick labels styled via CSS.

AArruSkywalker

83% match

Loading thumbnail…

Data Visualization - ICE-6 - Bar chart

This horizontal bar chart displays the top 10 companies by revenue in billions of dollars, sourced from a CSV file. Each bar’s length is proportional to the revenue value, scaled using `d3.scaleLinear`, while company names are positioned with `d3.scaleBand`. The chart renders as an SVG with React, using `d3.csv` to load data and a `useEffect` hook to fetch and parse it. Axis ticks and gridlines are drawn with `d3.axisLeft` and `d3.axisBottom` logic, and red fills highlight the bars.

Ssuchitra2602

83% match

Loading thumbnail…

Scatterplot - ICE6

This scatterplot shows the relationship between the annual revenue (in USD millions) and the number of championships won for top sports clubs. Each red circle represents a club, with a tooltip revealing the club name and exact values. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and loads its data from a remote CSV file. The SVG rendering is centered on the page with clear axis labels and a title.

BBalaji Dasari

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

82% match

Loading thumbnail…

ICE-6

A bar chart displays yearly sales figures for a company from 2014 to 2021, with values in millions and axes labeled via `d3.axisBottom` and `d3.axisLeft`. The React-based app uses D3 v5 to render an SVG, mapping data onto a band scale and linear scale. It reads its data from a hardcoded array, not the external CSV, and renders black bars with a 0.2 padding.

KKiran Jyothi Bodduluri-11604571

81% match

Loading thumbnail…

Fork of DV ICE 6

This bar chart displays the top 10 athletes by revenue in million dollars, using a horizontal bar layout with red bars and custom-styled axes. The visualization is built with React and D3 v5, employing `scaleBand` and `scaleLinear` to map athlete names and revenue values to SVG coordinates. Data is loaded from a CSV file via `d3.csv`, and the chart includes customized tick marks, red gridlines, and blue text labels. The axes are manually constructed using D3’s scale functions rather than pre-built axis components.

Mmanishcheruku

81% match

Loading thumbnail…

ICE-6 Bar Graph

This example displays a horizontal bar chart of total revenue for twelve countries, loaded from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. SVG rectangles are rendered for each bar, with gridlines and axis tick labels generated via `xScale.ticks()` and custom text elements. The data is fetched asynchronously using `d3.csv` and processed with a row function to convert revenue values to numbers.

Ggayathrikavya

81% match