Skip to main content
SimilarExport ZIP
100%

Gender Pay Gap Dumbbell Chart

✓ Published0🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Mar 15, 2025

This dumbbell chart displays the gender pay gap across 30 US occupations from 2016, with pink circles representing women's average salaries and blue circles representing men's, connected by horizontal lines. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map salaries and occupations, while `d3.axisBottom` and `d3.axisLeft` render the axes. The `d3.selection.join()` pattern manages the SVG elements dynamically, and `ResizeObserver` enables responsive dimensions. The chart includes interactive y-axis labels that dim non-related dumbbell groups on hover, and grid lines from `renderGridLines` improve readability.

AI-generated description

Gender Pay Gap Visualization with D3.js

This project visualizes the gender pay gap across various occupations using a dumbbell chart created with D3.js. It highlights disparities in salaries between men and women for different job categories.

What is D3?

D3 (Data-Driven Documents) is a JavaScript library that enables dynamic, interactive data visualizations in web browsers using HTML, SVG, and CSS.

About This Project

This visualization uses salary data for men and women across multiple occupations to illustrate differences in earnings. Each dumbbell represents an occupation, with endpoints showing the average salaries of men and women, and a line connecting them to depict the pay gap.

How This Works

The Code Structure

This project consists of the following key files:

  • index.js: The main entry point that loads data and orchestrates rendering.
  • data.js: Handles loading and formatting the salary dataset.
  • renderSVG.js: Creates and configures the SVG container.
  • renderDumbbellChart.js: Contains logic for rendering the dumbbell chart.
  • observeDimensions.js: Enables responsiveness by tracking container size.
  • config.js: Stores layout and appearance settings.
  • theme.js: Defines color schemes and font styles.
  • styles.css: Contains CSS styles for the visualization.

Key D3 Concepts Used

  1. Scales: Mapping data values (salary amounts) to visual properties.
  2. Axes: Creating labeled axes for better readability.
  3. Data Joins: Using selection.data().join() to dynamically update elements.
  4. Transitions & Animations: Implementing smooth updates when data changes.

Getting Started with D3

If you're new to D3, here are some helpful resources:

MIT Licensed

Similar vizzes

Loading thumbnail…

Pay Gap Between Men and Women

This dumbbell chart shows the difference in average annual salary between women and men across twelve U.S. occupations, with each job’s two salary points connected by a horizontal line. The visualization uses d3.scaleLinear for the x-axis, d3.scalePoint for the y-axis categories, and d3.axisLeft/axisBottom for labeling. Data comes from a local CSV file, rendered as SVG circles and lines, with salary values formatted using d3.format. The chart excludes one occupation from the dataset.

BbeauMarko
89% match
Loading thumbnail…

Pay Gap Between Men and Women

This dumbbell chart displays the pay gap between men and women across twelve professional categories, plotting each gender’s average salary as paired circles connected by horizontal lines. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear` for the salary axis, `scalePoint` for categorical positioning, and `csv` to load the data. The chart highlights the salary disparity, with the exception of Health Technicians, which is filtered out before rendering.

Ppnarciso1
88% match
Loading thumbnail…

Visualization for the Gender Wage Gap in the US

Using d3.v5 and SVG, this example visualizes the gender wage gap in the US by plotting average yearly earnings against eight occupation categories for 2017. It shows income differences across three groups: females, males, and persons overall. The visualization uses d3.csv to load the data, filters for a single year, and then employs d3.scaleOrdinal and d3.schemeCategory10 for color coding. Linear scales (d3.scaleLinear) and axes (d3.axisLeft, d3.axisBottom) render the chart, with gridlines from the left and bottom axes.

Xxiaoma1002
79% match
Loading thumbnail…

Visualization for the Gender Wage Gap in the US

This visualization compares the gender wage gap across eight occupations in the US for the year 2017, plotting income on the x-axis and job categories on the y-axis. Three colored lines represent females, males, and all persons, with a legend identifying each group. The chart uses D3 v5 to load the CSV data, filter by year, and render an SVG with linear scales for both axes, gridlines, and axis labels. The code employs `d3.csv`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to construct the visualization.

Xxiaoma1002
78% match
Loading thumbnail…

2017 Gender Wage Gap in the US

This visualization compares the 2017 average earnings of men and women across a wide range of professional and technical occupations. It uses a horizontal dot plot with pink and light blue dots to represent female and male average incomes, enabling direct visual comparison of the wage gap for each job role. The chart is built with D3 v5, using `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the income x-axis, and `d3.axisLeft` and `d3.axisBottom` for axis generation, all rendered as SVG within a React framework.

KKeerthiKandadai
78% match
Loading thumbnail…

2017 Gender Wage Gap in the US

The visualization compares 2017 average earnings for females and males across seven occupational categories, showing the gender wage gap through paired pink and light blue circles connected by black lines. It uses a scatterplot-style layout with a linear x-axis for income and a categorical y-axis for job types. Built with D3.js v5 within a React framework, the SVG rendering uses `d3.csv` and `d3.autoType` to load data from a CSV file, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisLeft` and `d3.axisBottom` for labels and gridlines.

KKeerthiKandadai
78% match
Loading thumbnail…

2017 Gender Wage Gap in the US

The visualization compares 2017 median hourly earnings across eight occupations for females, males, and all persons in the US. It uses a horizontal dot plot with a band scale for job categories and a linear scale for earnings, rendered as SVG via D3 v5. Each gender is color-coded using `d3.scaleOrdinal` with `d3.schemeCategory10`, and the data comes from `earning_averages_by_year.csv`. The chart includes gridlines and a custom legend to distinguish the three groups.

Xxiaoma1002
77% match
Loading thumbnail…

2017 Gender Wage Gap in the US

This visualization displays the gender wage gap in the US for 2017, comparing average hourly earnings between women and men across eight occupational categories, such as managers, professionals, and sales workers. It uses a horizontal dot plot with pink circles for female earnings and light blue for male earnings, positioned along a linear scale from $20 to $60, enabling direct visual comparison of income differences. The data is loaded from a CSV file using the D3 v5 library and rendered as SVG elements within a React framework. The chart includes labeled axes, gridlines, and a legend to support interpretation.

Xxiaoma1002
77% match