Fork of DV ICE 6

100%

Fork of DV ICE 6

✓ Published0🌍 Public

Last edited Mar 10, 2023

Created on Mar 10, 2023

Forked from 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.

AI-generated description

This bar chart shows population of the top 10 most revenue atheletes. It also demonstrates customization of D3 axes.

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Fork of Data Visualization - ICE-6 - Bar chart

This visualization displays a horizontal bar chart of the world’s top 10 revenue-generating athletes, with bars sized by total pay in millions of dollars. The React component uses `useState` and `useEffect` to load CSV data via D3’s `csv` method, then renders SVG rectangles scaled with `scaleBand` and `scaleLinear`. Custom axes are drawn manually, including tick lines and labels, while CSS styles colored bars red and tick text blue. Data originates from a GitHub Gist, loaded asynchronously before rendering the chart.

NNHRK555

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

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

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

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

82% match

Loading thumbnail…

ICE - 6: Rendering Marks and Channels

This example displays a horizontal bar chart of the top 10 most paid celebrities in 2020, with earnings in USD millions. The chart uses React with D3.js version 5, rendering SVG rectangles for bars and manually drawn axes with gridlines via `scaleBand` and `scaleLinear`. Data is loaded asynchronously from a CSV file using `d3.csv`, and the visualization includes custom tick labels and red vertical gridlines. The code initializes React state with `useState` and `useEffect` to fetch and process the dataset, demonstrating a clean composition of React components with D3 scales and marks.

RRajeevMukhesh

81% match

Loading thumbnail…

Data Visualization - ICE-6 - Bar chart

This bar chart displays the revenue of the world’s top 10 biggest companies in billion dollars, sourced from a CSV file. It highlights how custom D3 axes can be styled with red gridlines, blue tick labels, and adjusted tick font sizes. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and rendering rect elements in SVG. Axes are manually constructed by mapping tick values, avoiding the default axis generators.

Ssuchitra2602

81% match