ICE-6

100%

✓ Published0🌍 Public

Last edited Oct 19, 2025

Created on Oct 18, 2025

This interactive bar chart ranks the top ten departments by average salary, displaying each as a rounded rectangle labeled on the left and colored on a cyan-to-teal gradient. The visualization is built with React and D3 v7, using a `scaleBand` for the categorical axis, a `scaleLinear` for the quantitative range, and a `scaleLinear` color scale for the gradient fill. Data is loaded from a local CSV file with `d3.csv` and grouped by department via a `d3.rollup` operation, with tooltips exposing exact salary values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6-BALAJI/BARGRAPH

This bar chart visualizes the average salary distribution by department using D3.js within a React application. The data is loaded from a CSV file and processed on the client side. The visualization uses `scaleBand` and `scaleLinear` to map department names and average salaries to positions and bar lengths, respectively. Grid lines and text labels are rendered for both axes, with the chart positioned inside margins. The code demonstrates a data-driven approach to render horizontal bars, converting string salary values to numbers and grouping them by department before calculating averages.

Ppeddubalaji@gmail.com

86% match

Loading thumbnail…

Rudhrani ICE-6

This bar chart displays employee salary distribution by department, with each department listed on the vertical axis and its corresponding salary represented by a horizontal bar. The data is loaded from a CSV file using `d3.csv`, sorted in descending order, and rendered as React components within an SVG. It uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with grid lines and axis labels generated via D3 scale methods.

Mmogantirudhrani@gmail.com

85% match

Loading thumbnail…

ICE-6 - Bar Chart - 11641166

This interactive bar chart displays the maximum salary for each of the first 20 employee locations from a CSV file. The visualization uses React to manage state and D3.js v5 for rendering, with `d3.csv` fetching the remote data and `d3.scaleBand`/`d3.scaleLinear` mapping categorical locations and salary values to SVG rectangles. Axes and gridlines are drawn manually via D3’s scale objects, and the chart updates asynchronously after data loading.

SSuresh John Wesly

84% match

Loading thumbnail…

ICE-6 Application of Marks and Channels

This interactive bar chart visualizes the salary distribution of the first fifteen records from a CSV dataset, plotting salary amounts against years of experience. The visualization uses orange rectangles as marks, with the horizontal axis encoding salary values through position and length. Built with React and D3.js v5, the application loads data via the `csv` function from a GitHub gist, then uses `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. The chart includes red gridlines and styled tick labels to enhance readability.

NNavaneeth-Ragi

83% match

Loading thumbnail…

ICE 6: Bar chart showing salary based on experiences

This bar chart visualizes the relationship between years of experience and annual salary, with each bar's height representing salary and its color intensity mapped from a green color scale. The visualization uses D3 v7 to render SVG elements, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleQuantize` with ColorBrewer's Greens palette for encoding salary values. Data is loaded asynchronously from a CSV file via `d3.csv`, and a color legend is generated using the d3-legend library.

SShreeti Upreti

83% match

Loading thumbnail…

ICE-6 Data

This example displays a bar chart of salary hikes for the top 20 countries, with each bar’s length proportional to a population value from a CSV file. The visualization uses React to manage state and render the SVG, while D3 v5’s `csv` loader, `scaleBand`, `scaleLinear`, and `max` functions handle data parsing, scaling, and layout. Green rectangles represent the bars, with blue gridlines and tick labels generated manually from the scales. The data is fetched from a GitHub-hosted CSV via a raw URL.

Aarcothanmukha

82% match

Loading thumbnail…

ICE-6_Shanmukha

This bar chart shows the distribution of employees across departments, with each bar representing a department's headcount. The visualization loads CSV data from a remote URL and processes it using D3's `csv` and `scaleBand`/`scaleLinear` to map department names to bar positions and employee counts to bar heights. React manages the component state and rendering lifecycle, while D3 handles the SVG coordinate system, axes, and tick formatting. The chart includes labeled x-axis categories, a y-axis with gridlines, and uses a fixed width/height with margins for clean spacing.

Sshanmukhadatta4040@gmail.com

82% match

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

A bar chart displays average salary against country for the first 20 rows of a CSV dataset, using horizontal rectangles to encode the quantitative salary values. The visualization is built with React and D3 v5, rendering SVG marks. The code uses `scaleBand` for the categorical country axis, `scaleLinear` for the numeric salary axis, and maps the loaded CSV data into `rect` elements.

AAnanyaSamala

81% match