29:null 2a:["$","title",null,{"children":"Exploring the Gender Pay Gap | Columbia Dataviz | Observable"}] 2f:T873,animatedBarChart = { const data = [ { gender: "Men", value: 1 }, { gender: "Women", value: 0.83 } ]; const width = 900, height = 300, margin = { top: 60, right: 20, bottom: 40, left: 140 }; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif"); // Scales const x = d3.scaleLinear() .domain([0, 1]) .range([margin.left, width - margin.right]); const y = d3.scaleBand() .domain(data.map(d => d.gender)) .range([margin.top, height - margin.bottom]) .padding(0.4); // Y-axis with larger labels svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text") .attr("font-size", "16px") .attr("font-weight", "bold") ); // Bars (start at zero width) const bars = svg.selectAll("rect") .data(data) .join("rect") .attr("x", margin.left) .attr("y", d => y(d.gender)) .attr("height", y.bandwidth()) .attr("width", 0) .attr("fill", d => d.gender === "Men" ? "steelblue" : "#f5649c"); // Animate bars: 1s delay, 4s duration bars.transition() .delay(1000) .duration(4000) .attr("width", d => x(d.value) - margin.left); // Prepare multi-line label, initially invisible const womenVal = data.find(d => d.gender === "Women").value; const textX = x(womenVal) + 10; const textY = y("Women") + y.bandwidth() / 2 + 5; const label = svg.append("text") .attr("x", textX) .attr("y", textY-20) .attr("font-size", "18px") .attr("font-weight", "bold") .attr("fill", "#333") .style("opacity", 0); const lines = [ "In 2023, women", "only earned", "84¢ per dollar" ]; lines.forEach((line, i) => { label.append("tspan") .attr("x", textX) .attr("dy", i === 0 ? "0em" : "1.2em") .text(line); }); // Fade in the label over 1s, after the bars finish (1s + 4s = 5000ms) label.transition() .delay(5000) .duration(1000) .style("opacity", 1); return svg.node(); }30:T184c,barChart = { const cleaned = latestYearData .filter(d => d["Occupational Category"] && !isNaN(+d["Men Median Pa"]) && !isNaN(+d["Women Median Pay"]) && !isNaN(+d["%women workers"]) && !isNaN(+d["Median Salary"]) ) .map(d => ({ Occupation: d["Occupational Category"], Men_Earnings: +d["Men Median Pa"], Women_Earnings: +d["Women Median Pay"], AverageIncome: +d["Median Salary"], FemalePct: +d["%women workers"], MalePct: 100 - +d["%women workers"] })); const sorted = cleaned.sort((a, b) => a.AverageIncome - b.AverageIncome); const width = 900; const height = 650; const margin = { top: 60, right: 50, bottom: 250, left: 100 }; const svg = d3.create("svg") .attr("width", width) .attr("height", height); const x = d3.scaleBand() .domain(sorted.map(d => d.Occupation)) .range([margin.left, width - margin.right]) .padding(0.2); const y = d3.scaleLinear() .domain([0, d3.max(sorted, d => d.AverageIncome)]).nice() .range([height - margin.bottom, margin.top + 40]); // --- ✅ Two separate color scales const blueScale = d3.scaleLinear() .domain([50, 0]) // 50% women (light blue) → 0% women (dark blue) .range(["#cce5ff", "#004080"]); // light blue to dark blue const pinkScale = d3.scaleLinear() .domain([50, 100]) // 50% women (light pink) → 100% women (dark pink) .range(["#ffe6f2", "#cc0052"]); // light pink to dark pink function colorFn(femalePct) { if (femalePct < 50) return blueScale(femalePct); else if (femalePct > 50) return pinkScale(femalePct); else return "#f2f2f2"; // exactly 50%, neutral pale } // Title svg.append("text") .attr("x", width / 2) .attr("y", margin.top - 30) .attr("text-anchor", "middle") .style("font-size", "18px") .style("font-weight", "bold") .text("Average Income Per Occupation (2023)"); // Y Axis svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(6).tickFormat(d3.format("$.0f"))); // Bars const bars = svg.selectAll("rect") .data(sorted) .join("rect") .attr("x", d => x(d.Occupation)) .attr("y", d => y(d.AverageIncome)) .attr("width", x.bandwidth()) .attr("height", d => y(0) - y(d.AverageIncome)) .attr("fill", d => colorFn(d.FemalePct)) .style("opacity", 0.9) .style("cursor", "pointer"); // Labels under bars // Labels under bars svg.selectAll("text.label") .data(sorted) .join("text") .attr("class", "label") .attr("x", d => x(d.Occupation) + x.bandwidth() / 2) .attr("y", height - margin.bottom + 10) .attr("transform", d => `rotate(-60, ${x(d.Occupation) + x.bandwidth() / 2}, ${height - margin.bottom + 10})` ) .attr("text-anchor", "end") .attr("font-size", 10) .text(d => // strip off any trailing "occupation" or "occupations" d.Occupation.replace(/\s*occupations:?$/i, "") ); // --- ✅ Manual Legend (Blue half and Pink half) const legendWidth = 220; const legendHeight = 12; const legendX = width / 2 - legendWidth / 2; const legendY = margin.top; const legend = svg.append("g").attr("transform", `translate(${legendX}, ${legendY})`); // Left half (blue) legend.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", legendWidth / 2) .attr("height", legendHeight) .attr("fill", "url(#blue-gradient)"); // Right half (pink) legend.append("rect") .attr("x", legendWidth / 2) .attr("y", 0) .attr("width", legendWidth / 2) .attr("height", legendHeight) .attr("fill", "url(#pink-gradient)"); // Create gradients const defs = svg.append("defs"); const blueGradient = defs.append("linearGradient") .attr("id", "blue-gradient") .attr("x1", "0%") .attr("x2", "100%"); blueGradient.append("stop").attr("offset", "0%").attr("stop-color", "#004080"); // dark blue blueGradient.append("stop").attr("offset", "100%").attr("stop-color", "#cce5ff"); // light blue const pinkGradient = defs.append("linearGradient") .attr("id", "pink-gradient") .attr("x1", "0%") .attr("x2", "100%"); pinkGradient.append("stop").attr("offset", "0%").attr("stop-color", "#ffe6f2"); // light pink pinkGradient.append("stop").attr("offset", "100%").attr("stop-color", "#cc0052"); // dark pink // Legend Labels legend.append("text") .attr("x", 0) .attr("y", -4) .attr("text-anchor", "start") .style("font-size", "10px") .text("100% men"); legend.append("text") .attr("x", legendWidth / 2) .attr("y", -4) .attr("text-anchor", "middle") .style("font-size", "10px") .text("50/50"); legend.append("text") .attr("x", legendWidth) .attr("y", -4) .attr("text-anchor", "end") .style("font-size", "10px") .text("100% women"); // Tooltip const tooltip = html``; document.body.appendChild(tooltip); const container = html`

`; container.appendChild(svg.node()); bars .on("mouseover", function (event, d) { d3.select(this).style("opacity", 1.8); tooltip.innerHTML = ` ${d.FemalePct.toFixed(1)}% women
${d.MalePct.toFixed(1)}% men
💰 Women earn: $${d.Women_Earnings.toLocaleString()}
💰 Men earn: $${d.Men_Earnings.toLocaleString()} `; tooltip.style.display = "block"; }) .on("mousemove", function (event) { tooltip.style.left = event.pageX + 12 + "px"; tooltip.style.top = event.pageY - 28 + "px"; }) .on("mouseout", function () { tooltip.style.display = "none"; bars.style("opacity", 0.9); }); return container; } 31:T27c0,dumbbell = { // read the sort choice const order = sortOrder; // “Alphabetical” or “% Women” // filter to a safe year const yearsAvailable = new Set(dumbbellData2.map((d) => d.Year)); const safeYear = yearsAvailable.has(selectedYear) ? selectedYear : 2019; const yearSpecificData = dumbbellData2.filter((d) => d.Year === safeYear); if (!yearSpecificData.length) return globalThis.lastValidPlot; // clean & project const raw = yearSpecificData .map((d) => { const men = +d["Inflation Men Salary"], women = +d["Inflation Women Salary"], pctW = +d["% Women Pay Inflation"]; if (isNaN(men) || isNaN(women) || isNaN(pctW)) return null; const cat = d["Occupational Category"].trim().replace(/\s+\S+$/, ""); return { category: cat, men, women, gap: men - women, start: Math.min(men, women), end: Math.max(men, women), pctWomen: pctW }; }) .filter(Boolean); // sort & record orders if (order === "% Women") { raw.sort((a, b) => d3.descending(a.pctWomen, b.pctWomen)); } else { raw.sort((a, b) => d3.ascending(a.category, b.category)); } const newOrder = raw.map((d) => d.category); const oldOrder = globalThis._dumbbellOrder || newOrder; globalThis._dumbbellOrder = newOrder; // Dimensions & scales const fixedMax = 160000, width = 1200, margin = { top: 80, right: 300, bottom: 40, left: 250 }, height = raw.length * 30 + margin.top + margin.bottom; const x = d3 .scaleLinear() .domain([0, fixedMax]) .range([margin.left, width - margin.right]); const yOld = d3 .scaleBand() .domain(oldOrder) .range([margin.top, height - margin.bottom]) .padding(0.3); const yNew = d3 .scaleBand() .domain(newOrder) .range([margin.top, height - margin.bottom]) .padding(0.3); const bandOld = yOld.bandwidth(), bandNew = yNew.bandwidth(); // create SVG (allow overflow for rightmost label) const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif") .style("overflow", "visible"); // — Top grid & thick axis, with tickPadding to raise labels svg .append("g") .attr("transform", `translate(0,${margin.top - 10})`) .call( d3 .axisTop(x) .tickValues(d3.range(0, fixedMax + 1, 20000)) .tickFormat(d3.format("$,")) .tickSize(-height + margin.top + margin.bottom) .tickPadding(10) ) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll("line").attr("stroke-opacity", 0.2)); // — Top thin ticks (no labels) svg .append("g") .attr("transform", `translate(0,${margin.top - 10})`) .call( d3 .axisTop(x) .tickValues(d3.range(0, fixedMax + 1, 5000)) .tickFormat("") .tickSize(6) ) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll("line").attr("stroke-opacity", 0.5)); // — Left axis at old positions const axisLeftG = svg .append("g") .attr("class", "axis-left") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yOld)) .call((g) => g.select(".domain").remove()); // draw each occupation-group at its old Y via a transform const occupationGroup = svg .append("g") .selectAll("g") .data(raw, (d) => d.category) .join("g") .attr("class", "occupation-group") .attr("transform", (d) => `translate(0,${yOld(d.category)})`); // lines occupationGroup .append("line") .attr("x1", (d) => x(d.women)) .attr("x2", (d) => x(d.men)) .attr("y1", bandOld / 2) .attr("y2", bandOld / 2) .attr("stroke", "black") .attr("stroke-width", 4) .attr("stroke-opacity", 1); // women circles occupationGroup .append("circle") .attr("class", "circle-women") .attr("cx", (d) => x(d.women)) .attr("cy", bandOld / 2) .attr("r", 5) .attr("fill", "#f5649c"); // men circles occupationGroup .append("circle") .attr("class", "circle-men") .attr("cx", (d) => x(d.men)) .attr("cy", bandOld / 2) .attr("r", 5) .attr("fill", "steelblue"); // tooltips (positioned relative to group) occupationGroup.each(function (d) { const group = d3.select(this); const xMid = (x(d.women) + x(d.men)) / 2; const labelText = `${d.category}: `; const valueText = `$${Math.abs(d.gap).toLocaleString()}`; const textGroup = group .append("text") .attr("class", "tooltip-text") .attr("x", xMid) .attr("y", -15) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("fill", "black") .style("opacity", 0) .style("pointer-events", "none"); textGroup.append("tspan").attr("font-weight", "normal").text(labelText); textGroup.append("tspan").attr("font-weight", "bold").text(valueText); textGroup .append("tspan") .attr("font-weight", "normal") .text(" Gap (2023 USD)"); requestAnimationFrame(() => { const bbox = textGroup.node().getBBox(); group .insert("rect", ".tooltip-text") .attr("class", "tooltip-bg") .attr("x", bbox.x - 10) .attr("y", bbox.y - 5) .attr("width", bbox.width + 20) .attr("height", bbox.height + 10) .attr("rx", 6) .attr("fill", "white") .attr("stroke", "black") .attr("stroke-width", 0.5) .style("opacity", 0) .style("pointer-events", "none"); }); }); // hover rects & interactions occupationGroup .append("rect") .attr("class", "hover-rect") .attr("x", (d) => x(d.start)) .attr("width", (d) => Math.max(1, x(d.end) - x(d.start))) .attr("y", bandOld / 2 - 20) .attr("height", 40) .attr("fill", "transparent") .style("pointer-events", "all") .style("cursor", "pointer") .on("mouseover", function (_, d) { d3.select(this).raise(); d3.select(this.parentNode) .select("line") .transition() .duration(150) .attr("stroke-opacity", 0.3); d3.select(this.parentNode) .select(".tooltip-bg") .transition() .duration(150) .style("opacity", 0.95); d3.select(this.parentNode) .select(".tooltip-text") .transition() .duration(150) .style("opacity", 1); }) .on("mouseout", function () { d3.select(this.parentNode) .select("line") .transition() .duration(150) .attr("stroke-opacity", 1); d3.select(this.parentNode) .select(".tooltip-bg") .transition() .duration(150) .style("opacity", 0); d3.select(this.parentNode) .select(".tooltip-text") .transition() .duration(150) .style("opacity", 0); }); // click handler occupationGroup.on("click", function (event, d) { const clickedHeader = combined_earnings .find((row) => { const header = row["Header"]?.trim().replace(/\s*occupations:?$/i, ""); const category = row["Occupational Category"] ?.trim() .replace(/\s+\S+$/, ""); return category === d.category; }) ?.["Header"]?.trim() .replace(/\s*occupations:?$/i, ""); if (!clickedHeader) return console.warn("Could not find matching header!"); const occSelect = viewof selectedOccupation; occSelect.value = clickedHeader; occSelect.dispatchEvent(new Event("input")); setTimeout(() => { const options = combined_earnings .filter((row) => { const h = row["Header"]?.trim().replace(/\s*occupations:?$/i, ""); return ( h === clickedHeader && row["Occupational Category"] && !row["Occupational Category"].endsWith(":") ); }) .map((row) => row["Occupational Category"].trim()) .filter((v, i, a) => a.indexOf(v) === i) .sort(); if (options.length) { const target = options[0]; const retry = (t, n = 10) => { const vals = Array.from( viewof selectedSubcategory.querySelectorAll("option") ).map((o) => o.value); if (vals.includes(t)) { viewof selectedSubcategory.value = t; viewof selectedSubcategory.dispatchEvent(new Event("input")); } else if (n) { requestAnimationFrame(() => retry(t, n - 1)); } else { console.warn("Failed to set subcategory:", t); } }; retry(target); } }, 150); const anchor = document.getElementById("lineChartAnchor"); if (anchor) setTimeout( () => anchor.scrollIntoView({ behavior: "smooth", block: "start" }), 200 ); }); // wrap in container with sort control & arrow label const container = html`

`; viewof sortOrder.style.position = "absolute"; viewof sortOrder.style.top = "8px"; viewof sortOrder.style.left = "0px"; viewof sortOrder.style.background = "white"; viewof sortOrder.style.display = "inline-flex"; viewof sortOrder.style.alignItems = "center"; viewof sortOrder.style.columnGap = "0px"; viewof sortOrder.style.fontSize = "16px"; viewof sortOrder.style.padding = "6px 10px"; viewof sortOrder.style.border = "none"; container.appendChild(viewof sortOrder); if (order === "% Women") { container.appendChild(html`

⬆ Highest % at top

`); } container.appendChild(svg.node()); // transition everything: axis and groups axisLeftG .transition() .duration(750) .call(d3.axisLeft(yNew)) .call((g) => g.select(".domain").remove()); occupationGroup .transition() .duration(750) .attr("transform", (d) => `translate(0,${yNew(d.category)})`); // store & return globalThis.lastValidPlot = container; return container; }32:T1ccb,svg10 = { // 1. filter data for the selected subcategory const occupation = selectedSubcategory; const data = dataFinal.filter( (d) => d["Occupational Category"]?.trim() === occupation ); console.log("Available columns:", Object.keys(dataFinal[0])); console.log("Filtered rows for", occupation, data.length); console.log( "Raw ‘Inflation Women Adjusted’ values:", data.map((d) => d["Inflation Women Adjusted"]) ); // 2. dimensions const width = 900, height = 700; const margin = { top: 60, right: 30, bottom: 60, left: 80 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; // 3. SVG + title const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif"); svg .append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "bold") .text(`Median Earnings of ${occupation} by Gender (in 2023 USD)`); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // 4. Scales const years = Array.from(new Set(data.map((d) => +d.Year))).sort( (a, b) => a - b ); const x = d3.scaleLinear().domain(d3.extent(years)).range([0, innerWidth]); // 4. clean & filter male/female data const maleData = data .map((d) => { const raw = String(d["Inflation Men Adjusted"] ?? ""); const clean = raw.replace(/[^0-9.\-]+/g, ""); return { Year: +d.Year, Earnings: parseFloat(clean) }; }) .filter((d) => !isNaN(d.Earnings)); const femaleData = data .map((d) => { const raw = String(d["Inflation Women Adjusted"] ?? ""); const clean = raw.replace(/[^0-9.\-]+/g, ""); return { Year: +d.Year, Earnings: parseFloat(clean) }; }) .filter((d) => !isNaN(d.Earnings)); console.log("▶ maleData:", maleData); //debugging console.log("▶ femaleData:", femaleData); //debugging const allEarnings = maleData .map((d) => d.Earnings) .concat(femaleData.map((d) => d.Earnings)); const yMin = d3.min(allEarnings), yMax = d3.max(allEarnings); if (!isFinite(yMin) || !isFinite(yMax)) { svg .append("text") .attr("x", width / 2) .attr("y", height / 2) .attr("text-anchor", "middle") .attr("font-size", "16px") .text("No earnings data available."); return svg.node(); } const y = d3 .scaleLinear() .domain([yMin * 0.95, yMax * 1.05]) .range([innerHeight, 0]); // 5. axes g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(x).tickValues(years).tickFormat(d3.format("d"))); g.append("text") .attr("x", innerWidth / 2) .attr("y", innerHeight + 40) .attr("text-anchor", "middle") .attr("font-size", "12px") .text("Year"); g.append("g").call(d3.axisLeft(y).tickFormat((d) => `$${d3.format(",")(d)}`)); // 6. line generator & animator const lineGen = d3 .line() .x((d) => x(d.Year)) .y((d) => y(d.Earnings)); function animatePath(path) { const L = path.node().getTotalLength(); path .attr("stroke-dasharray", `${L} ${L}`) .attr("stroke-dashoffset", L) .transition() .duration(4000) .ease(d3.easeCubic) .attr("stroke-dashoffset", 0); } // 7. male curve if (maleData.length > 1) { const pathMale = g .append("path") .datum(maleData) .attr("fill", "none") .attr("stroke", "blue") .attr("stroke-width", 2.5) .attr("d", lineGen(maleData)); const maleNode = pathMale.node(); const lenMale = maleNode.getTotalLength(); animatePath(pathMale); const emojiM = g.append("text").text("👨‍💼").attr("font-size", "16px"); emojiM .transition() .duration(4000) .ease(d3.easeCubic) .attrTween("transform", () => (t) => { const p = maleNode.getPointAtLength(t * lenMale); return `translate(${p.x},${p.y})`; }); } else if (maleData.length === 1) { // single‑point fallback g.append("circle") .attr("cx", x(maleData[0].Year)) .attr("cy", y(maleData[0].Earnings)) .attr("r", 4) .attr("fill", "blue"); } // 8. female curve if (femaleData.length > 1) { const pathFem = g .append("path") .datum(femaleData) .attr("fill", "none") .attr("stroke", "deeppink") .attr("stroke-width", 2.5) .attr("d", lineGen(femaleData)); const femNode = pathFem.node(); const lenFem = femNode.getTotalLength(); animatePath(pathFem); const emojiF = g.append("text").text("👩‍💼").attr("font-size", "16px"); emojiF .transition() .duration(4000) .ease(d3.easeCubic) .attrTween("transform", () => (t) => { const p = femNode.getPointAtLength(t * lenFem); return `translate(${p.x},${p.y})`; }); } else if (femaleData.length === 1) { g.append("circle") .attr("cx", x(femaleData[0].Year)) .attr("cy", y(femaleData[0].Earnings)) .attr("r", 4) .attr("fill", "deeppink"); } // 9. climbing gap number if (maleData.length && femaleData.length) { const common = years.filter( (y) => maleData.some((d) => d.Year === y) && femaleData.some((d) => d.Year === y) ); const latest = d3.max(common); const mVal = maleData.find((d) => d.Year === latest).Earnings; const fVal = femaleData.find((d) => d.Year === latest).Earnings; if (mVal != null && fVal != null) { const interp = d3.interpolateNumber(0, mVal - fVal); const txt = svg .append("text") .attr("x", width / 2) .attr("y", 55) .attr("text-anchor", "middle") .attr("font-size", "14px") .style("font-weight", "bold"); const start = Date.now(), dur = 4000; d3.timer(() => { const t = Math.min((Date.now() - start) / dur, 1); txt.text(`${latest} Pay Gap: $${d3.format(",.0f")(interp(t))}`); return t === 1; }); } } // 10. legend const legend = g .append("g") .attr("transform", `translate(${innerWidth - 160},10)`); legend .append("rect") .attr("width", 12) .attr("height", 12) .attr("fill", maleData.length ? "blue" : "#ccc"); legend .append("text") .attr("x", 20) .attr("y", 10) .style("font-size", "12px") .text(`Men${maleData.length ? "" : " (no data)"}`); legend .append("rect") .attr("x", 0) .attr("y", 20) .attr("width", 12) .attr("height", 12) .attr("fill", femaleData.length ? "deeppink" : "#ccc"); legend .append("text") .attr("x", 20) .attr("y", 30) .style("font-size", "12px") .text(`Women${femaleData.length ? "" : " (no data)"}`); if (!maleData.length && femaleData.length) { legend .append("text") .attr("x", 0) .attr("y", 50) .style("font-size", "11px") .style("font-style", "italic") .text("(all-female role)"); } if (!femaleData.length && maleData.length) { legend .append("text") .attr("x", 0) .attr("y", 50) .style("font-size", "11px") .style("font-style", "italic") .text("(all-male role)"); } return svg.node(); }33:T4dc,// Cell 2: Process data for the scatterplot processedData = { // Use d3.group (Observable's standard library includes d3) const groupedByCategory = d3.group(data2, d => d["Occupational Category"]); // Calculate metrics for each category const results = []; for (const [category, entries] of groupedByCategory) { if (entries.length < 2) continue; // Need at least two data points (years) to calculate change // Sort entries by year to easily find earliest and latest entries.sort((a, b) => a.Year - b.Year); const earliestEntry = entries[0]; const latestEntry = entries[entries.length - 1]; // Calculate average % women workers const sumPercentWomen = d3.sum(entries, d => d["%women workers"]); const avgPercentWomen = sumPercentWomen / entries.length; // Calculate change in % Women Pay const payChange = latestEntry["%Women Pay"] - earliestEntry["%Women Pay"]; results.push({ "Occupational Category": category, "avgPercentWomen": avgPercentWomen, "payChange": payChange, "startYear": earliestEntry.Year, "endYear": latestEntry.Year, "startPay": earliestEntry["%Women Pay"], "endPay": latestEntry["%Women Pay"] }); } return results; }34:T566,// Cell 2: Process data for the scatterplot (using average number) processedDataAvgNum = { // Use d3.group (Observable's standard library includes d3) const groupedByCategory = d3.group(data2, d => d["Occupational Category"]); // Assumes data2 is your data variable // Calculate metrics for each category const results = []; for (const [category, entries] of groupedByCategory) { if (entries.length < 2) continue; // Need at least two data points (years) to calculate change // Sort entries by year to easily find earliest and latest entries.sort((a, b) => a.Year - b.Year); const earliestEntry = entries[0]; const latestEntry = entries[entries.length - 1]; // --- CHANGE: Calculate average NUMBER of women workers --- const sumNumWomen = d3.sum(entries, d => d["Women Workers"]); const avgNumWomen = sumNumWomen / entries.length; // --- END CHANGE --- // Calculate change in % Women Pay (same as before) const payChange = latestEntry["%Women Pay"] - earliestEntry["%Women Pay"]; results.push({ "Occupational Category": category, "avgNumWomen": avgNumWomen, // Store average number "payChange": payChange, "startYear": earliestEntry.Year, "endYear": latestEntry.Year, "startPay": earliestEntry["%Women Pay"], "endPay": latestEntry["%Women Pay"] }); } return results; }35:T581,// Cell 2: Process data for the scatterplot (using average median salary) processedDataAvgSalary = { // Use d3.group (Observable's standard library includes d3) const groupedByCategory = d3.group(data2, d => d["Occupational Category"]); // Assumes data2 is your data variable // Calculate metrics for each category const results = []; for (const [category, entries] of groupedByCategory) { if (entries.length < 2) continue; // Need at least two data points (years) to calculate change // Sort entries by year to easily find earliest and latest entries.sort((a, b) => a.Year - b.Year); const earliestEntry = entries[0]; const latestEntry = entries[entries.length - 1]; // --- CHANGE: Calculate average Median Salary --- const sumMedianSalary = d3.sum(entries, d => d["Median Salary"]); const avgMedianSalary = sumMedianSalary / entries.length; // --- END CHANGE --- // Calculate change in % Women Pay (same as before) const payChange = latestEntry["%Women Pay"] - earliestEntry["%Women Pay"]; results.push({ "Occupational Category": category, "avgMedianSalary": avgMedianSalary, // Store average median salary "payChange": payChange, "startYear": earliestEntry.Year, "endYear": latestEntry.Year, "startPay": earliestEntry["%Women Pay"], "endPay": latestEntry["%Women Pay"] }); } return results; }36:[{"id":"6314390440f0aca674ad2a0ff6c57b0d6a27dab4345fb27a1987015b3073c7d46d4dc9d0a256c1b6d04bbfe63089d5332280e3caffcf4cf3e7bd1efdc70b94c5","href":"https://static.observableusercontent.com/files/6314390440f0aca674ad2a0ff6c57b0d6a27dab4345fb27a1987015b3073c7d46d4dc9d0a256c1b6d04bbfe63089d5332280e3caffcf4cf3e7bd1efdc70b94c5","name":"ACS_Cleaned_ByYear_1@1.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1745988048431.407,"size":37345},{"id":"9ec9eca5f2cf3f5eb4e15d359d91904878bffdb81a1618e0828ab606a495e13c377e7a3d490e1a0b4ad982ce577c5cf2db1d39c7440ab0eb4991985d4e8eb61b","href":"https://static.observableusercontent.com/files/9ec9eca5f2cf3f5eb4e15d359d91904878bffdb81a1618e0828ab606a495e13c377e7a3d490e1a0b4ad982ce577c5cf2db1d39c7440ab0eb4991985d4e8eb61b","name":"ACS_Cleaned_ByYear.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1745988048431.407,"size":11682},{"id":"55f5c2122f04491999fcfc7801ee24ce20e1adcc7d104936238d41807e6ef0b39992e4a657a12b6bccf2d44282c3df35827472e0230f580538e128abe7a3f825","href":"https://static.observableusercontent.com/files/55f5c2122f04491999fcfc7801ee24ce20e1adcc7d104936238d41807e6ef0b39992e4a657a12b6bccf2d44282c3df35827472e0230f580538e128abe7a3f825","name":"MEDIAN_EARNINGS_BY_GENDER_IN_ENG_2013-2023@1.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1745988048431.407,"size":23372},{"id":"07fdbf893cf8d42549cfb4c49213f032523e429ff9dd5d784bf3d97e27c05b38d47e3dbae140a335c025f219f43843e0aadd7b768ee038e88e27ac700c71fa41","href":"https://static.observableusercontent.com/files/07fdbf893cf8d42549cfb4c49213f032523e429ff9dd5d784bf3d97e27c05b38d47e3dbae140a335c025f219f43843e0aadd7b768ee038e88e27ac700c71fa41","name":"MEDIAN_EARNINGS_BY_GENDER_IN_NURSING_2013-2023@3.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1745988048431.407,"size":18590},{"id":"83615c12dbcabca656a058b18074d132c4c42e1e58be6b8e0d1e39793482ff48581048f08a44ae971192af1a93e2c8f5e5f30535253171749a09b248bb0d05d9","href":"https://static.observableusercontent.com/files/83615c12dbcabca656a058b18074d132c4c42e1e58be6b8e0d1e39793482ff48581048f08a44ae971192af1a93e2c8f5e5f30535253171749a09b248bb0d05d9","name":"combined_median_earnings.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1745988068573.654,"size":506306},{"id":"aad88b016a790be221199ddde80d246c5f435d8683777b0d240864b91e2e9718c8c75c9fab988ba72683ca98f165c522bb39abd3f7843280797f7544f828c1e9","href":"https://static.observableusercontent.com/files/aad88b016a790be221199ddde80d246c5f435d8683777b0d240864b91e2e9718c8c75c9fab988ba72683ca98f165c522bb39abd3f7843280797f7544f828c1e9","name":"combined_median_earnings@2.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1746559506001.399,"size":1032212},{"id":"d6ef047b8a7aa30496db4da57770ae75d91d6332e735edc9ede07f63b10671a5f494c2879cff86bde89c022128f47811c25062494d77fd8d92be6e07ec6320ea","href":"https://static.observableusercontent.com/files/d6ef047b8a7aa30496db4da57770ae75d91d6332e735edc9ede07f63b10671a5f494c2879cff86bde89c022128f47811c25062494d77fd8d92be6e07ec6320ea","name":"combined_median_earnings@3.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1746718471005.823,"size":1035844},{"id":"9e3a7d504e5b8c0647a528937a547ef8196c50556f778c87a164df62c246cb9c974066834d614512e6a7ff113a0e193ffa7977be72ab34c74e45da3ee3942762","href":"https://static.observableusercontent.com/files/9e3a7d504e5b8c0647a528937a547ef8196c50556f778c87a164df62c246cb9c974066834d614512e6a7ff113a0e193ffa7977be72ab34c74e45da3ee3942762","name":"dumbbell-data2.numbers","type":"application/zip","lastModified":1746726911585.945,"size":384027},{"id":"fbbdee6373678ee6658540c7cc110e07a2fb7d72a0eaddea32e86e8f31263b943cd1079f14454e26a7db1e556479996e114e13ccd5ee63a18b2eb382ffa33077","href":"https://static.observableusercontent.com/files/fbbdee6373678ee6658540c7cc110e07a2fb7d72a0eaddea32e86e8f31263b943cd1079f14454e26a7db1e556479996e114e13ccd5ee63a18b2eb382ffa33077","name":"dumbbell-data2.csv","type":"text/csv","lastModified":1746727022270.255,"size":39888}] 2d:{"id":"31114f1b46459cb1","slug":null,"title":"Exploring the Gender Pay Gap","thumbnail":"6e4e12fc3574f746c03a73fe99e7869126884adc063ead6485012d1017b3da6b","access_level":"public","create_time":"$D2025-04-30T04:40:48.431Z","update_time":"$D2026-01-29T05:28:56.517Z","view_time":null,"first_public_time":"$D2025-05-12T21:49:05.376Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024"},"version":1473,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3be457f38ff490c6","login":"lucy-hecht","name":"Lucy Hecht","avatar_url":"https://avatars-next.observableusercontent.com/fd3fa2f3c198d07c02008bd9e30a8848da758ed3dd6213c32c0bd22a0b6ce0d2","tier":null}],"members":[{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024","role":"editor"},{"type":"individual","id":"3be457f38ff490c6","login":"lucy-hecht","name":"Lucy Hecht","avatar_url":"https://avatars-next.observableusercontent.com/fd3fa2f3c198d07c02008bd9e30a8848da758ed3dd6213c32c0bd22a0b6ce0d2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Exploring the Gender Pay Gap","cells":[{"id":0,"value":"# Exploring the Gender Pay Gap\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1449,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":568,"value":"Historically, women have earned less than men in nearly every field, but the size of that gap has shifted over time—and it isn’t the same everywhere. In this report, we explore the gender pay gap across a range of occupations over the past decade. We brainstormed criteria that might point to a smaller or shrinking gap, thinking in particular about whether the balance of men and women in a field could play a role. We asked ourselves: Maybe occupations with a higher percentage of female employees see pay that’s closer to equal?\n\nBelow is a bar graph that portrays the proportion of male and female workers in each occupation—highlighting which fields lean heavily male, which lean heavily female, and which remain balanced, setting the stage for our pay‐gap analysis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":543,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":479,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1086,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":924,"value":"From this breakdown, it’s clear that some occupations are strongly gendered. Fields like Healthcare Support and Healthcare Practitioners are predominantly held by women, while Construction and Maintenance remain overwhelmingly male-dominated. Other categories, such as Legal and Business & Finance, stood out as they hovered just above 50% female, which challenged some of our individual assumptions.\n\nThis observation led us to our next exploration: does the percentage of women in an occupation relate to how large or small the gender pay gap is within that field? Are female-dominated industries more equitable when it comes to compensation—or does the gap persist regardless of gender representation? How has that gap changed in the past decade?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1088,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":527,"value":"# Explore the Gap over Time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":928,"value":"*Use the slider to explore trends over time.
Click on a dumbbell to see more detailed information about the sub-occupations within that field.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":506,"value":"viewof selectedYear = Inputs.range(\n d3.extent(data2, d => d.Year),\n {\n \n step: 1,\n value: 2016,\n format: d3.format(\"d\")\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":922,"value":"While the dumbbell chart shows the pay gap in broad fields over time, it doesn’t capture how that gap might differ across specific roles within the same occupation. For example, how does pay differ between judges and lawyers by gender, and how do those numbers contribute to the overall gap in the legal field. Our final visual breaks down each occupation into its subcategories, allowing for a closer look at how individual roles within a field shape the broader trends.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":813,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":611,"value":"viewof selectedOccupation = Inputs.select(\n headers,\n {\n label: \"Select Occupation\",\n value: headers[0],\n unique: true\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":779,"value":"viewof selectedSubcategory = Inputs.select(\n subcategories,\n {\n label: \"Select Subcategory\",\n value: subcategories[0],\n unique: true\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":614,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":936,"value":"## Conclusion\n\nAcross these visuals, we find little evidence of consistent progress in narrowing the gender pay gap. While there are cases where men’s and women’s earnings appear to converge, this is often due to declines in men’s wages rather than meaningful gains for women. Gaps persist across broad occupational fields, but to fully understand the extent of the disparity, we had to look within those fields—comparing people in the same exact roles. Ultimately, the data reveals that the gender pay gap endures across industries and career paths, continuing to follow women regardless of the choices they make.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":565,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":849,"value":"# Source Code & Datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":634,"value":"headers = Array.from(\n new Set(\n combined_earnings\n .map(d => d.Header?.trim())\n .filter(h => h)\n .map(h => h.replace(/\\s*occupations:?$/i, \"\"))\n )\n).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":795,"value":"subcategories = Array.from(\n new Set(\n combined_earnings\n .filter(d => {\n const raw = d.Header?.trim()\n if (!raw) return false\n return raw.replace(/\\s*occupations:?$/i, \"\") === selectedOccupation\n })\n .map(d => d[\"Occupational Category\"]?.trim())\n .filter(s => s && !s.endsWith(\":\"))\n )\n).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":594,"value":"workbook4 = FileAttachment(\"combined_median_earnings.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":595,"value":"workbook4.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":596,"value":"data4 = workbook4.sheet(0, {\n headers: false,\n // range: \"A1:J10\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":597,"value":"combined_earnings = data4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"yourMom = data1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"workbook1 = FileAttachment(\"ACS_Cleaned_ByYear.xlsx\").xlsx()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"data1 = workbook1.sheet(0, {\n headers: true,\n // range: \"A1:J10\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"workbook1.sheetNames","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"workbook2 = FileAttachment(\"ACS_Cleaned_ByYear_1@1.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"workbook2.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"data2 = workbook2.sheet(0, {\n headers: true,\n // range: \"A1:J10\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"data2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":188,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":239,"value":"// Cell 1: Filter and sort data for the latest year\n\nlatestYearData = {\n // Find the latest year present in the data\n const latestYear = d3.max(data2, d => d.Year);\n\n // Filter data for that year\n const filtered = data2.filter(d => d.Year === latestYear);\n\n // Sort the filtered data (e.g., by Median Salary descending)\n // This determines the order of bars on the x-axis. Change sort key if needed.\n filtered.sort((a, b) => b[\"Median Salary\"] - a[\"Median Salary\"]);\n\n return filtered;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":271,"value":"// Cell 2: Filter and sort data for the selected year\nyearSpecificData = {\n // Filter data for the selected year\n const filtered = data2.filter(d => d.Year === selectedYear);\n\n // Sort the filtered data alphabetically by category for consistent axis order\n filtered.sort((a, b) => a[\"Occupational Category\"].localeCompare(b[\"Occupational Category\"]));\n\n return filtered;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"workbook3 = FileAttachment(\"MEDIAN_EARNINGS_BY_GENDER_IN_ENG_2013-2023@1.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"workbook3.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"import {Plot} from \"@observablehq/plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"// Cell 0: Ensure D3 is loaded (usually not needed in Observable)\nd3 = require(\"d3@7\") // Uncomment this line if d3 is undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"workbook = FileAttachment(\"MEDIAN_EARNINGS_BY_GENDER_IN_NURSING_2013-2023@3.xlsx\").xlsx()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"workbook.sheetNames","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"data = workbook.sheet(0, {\n headers: false,\n // range: \"A1:J10\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1103,"value":"viewof sortOrder = Inputs.radio(\n [\"Alphabetical\", \"% Women\"],\n {\n value: \"Alphabetical\",\n label: \"Sort by:\",\n description: \"Toggle sort order\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1229,"value":"workbook6 = FileAttachment(\"combined_median_earnings@3.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1230,"value":"workbook6.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1231,"value":"data3 = workbook6.sheet(0, {\n headers: false,\n // range: \"A1:J10\"\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1232,"value":"dataFinal = data3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1424,"value":"dumbbellData2 = await FileAttachment(\"dumbbell-data2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2e:"$2d:body"