Skip to main content
SimilarExport ZIP
100%

ICE6 - Combined bar+line chart

✓ Published0🌍 Public
Bbrodyoneal10@gmail.com
Last edited Mar 9, 2026
Created on Mar 9, 2026
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7 Q3

A line chart visualizes average salary against age, using aggregated employee data from a CSV file linked in the script. The D3.js code computes the mean salary for each distinct age value with `d3.rollups` and `d3.mean`, then sorts the results by age. The chart is rendered as an SVG, with axes created via `d3.axisBottom` and `d3.axisLeft`, and the trend line drawn using a `d3.line` generator. Points, a legend, and labels are added as SVG elements, with the chart's visual identity defined in the `styles.css` file.

Bbrodyoneal10@gmail.com
87% match
Loading thumbnail…

ICE6-BarChart

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.

Bbrodyoneal10@gmail.com
86% 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
83% match
Loading thumbnail…

ICE6-Nitheesh-Sama

This example displays a horizontal bar chart of employee salaries across different ages, using data from a CSV file loaded via `d3.csv`. The visualization renders as an SVG, with `d3.scaleBand` positioning the age categories on the y-axis and `d3.scaleLinear` mapping salary values to bar widths on the x-axis. React manages the state and lifecycle, fetching the data and slicing it to the first 15 records. Gridlines and tick labels are generated programmatically using D3’s scale methods, while the bars themselves are drawn as SVG `<rect>` elements.

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

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
82% match
Loading thumbnail…

ICE-6(multi series)

This example combines bar and line charts to compare sales and profit across seven months, with bars encoding sales and a monotone line tracking profit. The SVG visualization is built with D3 v7, using `d3.scaleBand`, `d3.scaleLinear`, and `d3.line` with `d3.curveMonotoneX`. Interactive tooltips appear on bar and dot hover via mouse events, while gridlines, axis labels, and a custom legend clarify the dual-series data loaded from a CSV file.

Vvydeeshm@gmail.com
82% match