Multi-series chart - ICE6

100%

Multi-series chart - ICE6

✓ Published0🌍 Public

Last edited Oct 20, 2025

Created on Oct 20, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar - Chart for ICE6

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.

BBalaji Dasari

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

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

81% match

Loading thumbnail…

ice7task1

This dark-themed scatter plot compares club revenue against the number of championships won, using color to distinguish sports and bubble size to indicate the club's founding year—older clubs appear as larger circles. The visualization is built with D3.js (v7) and rendered as SVG, loading CSV data via `d3.csv` and `autoType`. It employs `d3.scaleLinear` for axes, `d3.scaleOrdinal` with the Tableau10 scheme for categorical colors, and a reversed `d3.scaleSqrt` for radii. Hovering reveals a tooltip positioned via `d3.pointer`.

GGorantla Sravani

80% match

Loading thumbnail…

DV ICE 6

This example visualizes the top 10 revenue-generating athletes using a bar chart that maps TotalPay to bar width and athlete names to vertical bands. The chart uses React for component state and lifecycle, while D3 v5 handles data loading via `d3.csv` and scales (`scaleLinear` and `scaleBand`) to position elements. SVG rectangles render the bars, and axes are custom-built with D3’s `scaleBand` and `scaleLinear` APIs, styling tick text and lines directly. The data is fetched from a remote CSV file hosted on GitHub Gist.

Mmanishcheruku

80% match

Loading thumbnail…

ice7_task2_2

A dark-themed SVG line chart displays the average revenue of various sports teams by their founding year. The visualization uses D3 v7 to aggregate data from a CSV file, calculating the mean revenue for each sport per year. Lines are drawn using `d3.line`, with color encoding from `d3.schemeTableau10`. Interactive tooltips appear on hover over data points, showing sport name, year, and average revenue. A legend identifies each sport, rendered within the 800x500 SVG canvas.

GGorantla Sravani

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

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

79% match