ICE6-BarChart

100%

✓ Published0🌍 Public

Last edited Mar 9, 2026

Created on Mar 9, 2026

This visualization shows average salaries by employee role as horizontal-free vertical bars, with a color-coded bar for each role and corresponding value labels above them. The data comes from a CSV file hosted in a GitHub gist, and the code uses D3 v7 to load and process the data. The visualization uses `d3.rollups` to compute mean salaries per role, `d3.scaleBand` for the x-axis positioning, `d3.scaleLinear` for the y-axis, and `d3.schemeTableau10` for color encoding. It renders as an SVG with gridlines, rotated x-axis labels, and axis titles, all created via D3's selection and axis APIs.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE6 - Combined bar+line chart

This dashboard visualizes employee salary trends by age using two synchronized SVG charts. The first chart displays multi-series lines for average, minimum, and maximum salaries, while the second combines bars for employee counts with an overlaid line for average salary. Built with D3.js v7, the visualization loads CSV data, groups records by age, and uses `d3.rollups` for aggregation, `d3.line` for path generation, and `d3.axisBottom`/`d3.axisLeft` for scales and axes. Gridlines and legends are rendered programmatically, with salary values parsed from formatted strings.

Bbrodyoneal10@gmail.com

86% match

Loading thumbnail…

ICE-6

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.

Mmendemrudula@gmail.com

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

84% match

Loading thumbnail…

ICE6_11703795_BARGRAPH

This bar chart visualization displays the distribution of job roles across a small dataset, with each bar representing the frequency of a specific role such as Software Engineer or Data Analyst. The chart uses D3 v6's `d3.rollup` to aggregate role counts, then renders bars as SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with rotated category labels. The dark green bars transition to hot pink on hover, while the chart sits on a light coral SVG background within a dark gradient page.

MMeghanaChowdaryVelaga@my.unt.edu

84% match

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

83% match

Loading thumbnail…

ICE-6

This example visualizes the relationship between years of experience and salary compensation using a bar chart built with D3 v7. It shows how salary values scale across different experience levels, with the y-axis formatted in dollars and the x-axis displaying experience values. The visualization loads data from a CSV file via `d3.csv`, then uses `d3.scaleBand` and `d3.scaleLinear` to map the data to screen coordinates. Bars are rendered as SVG `<rect>` elements, while axes are generated using `d3.axisBottom` and `d3.axisLeft` for clear quantitative comparison.

AArun

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

82% match

Loading thumbnail…

ICE7 Q1

A scatterplot shows employee salaries plotted against age, with points colored by job role across six categories. The chart renders as an SVG using D3 v7, with a reusable `scatterPlot` module employing `scaleLinear`, `axisLeft`, and `axisBottom` for axes. A D3 data join renders circles, while a legend and dark-themed styling with Share Tech font present the salary distribution and role comparisons.

Bbrodyoneal10@gmail.com

81% match