29:null 2a:["$","title",null,{"children":"Gender Pay Gap Over Time for Registered Nurses and Engineers | Columbia Dataviz | Observable"}] 2f:T1695,viewof svg = { const trimmedOccupation = selectedOccupation.trim(); const data = cleanedData.filter( (d) => d["Occupational-Category"].trim() === trimmedOccupation ); const width = 700; const height = 540; const margin = { top: 60, right: 30, bottom: 60, left: 80 }; const svg = d3.create("svg").attr("width", width).attr("height", height); // Title 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 ${trimmedOccupation} by Gender`); const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const availableYears = Array.from(new Set(data.map((d) => d.Year))).sort( (a, b) => a - b ); const x = d3 .scaleLinear() .domain(d3.extent(availableYears)) .range([0, innerWidth]); const maleData = data.filter((d) => d["Male-median-earnings"] != null); const femaleData = data.filter((d) => d["Women-median-earnings"] != null); const yMin = d3.min([ d3.min(maleData, (d) => d["Male-median-earnings"]), d3.min(femaleData, (d) => d["Women-median-earnings"]) ]); const yMax = d3.max([ d3.max(maleData, (d) => d["Male-median-earnings"]), d3.max(femaleData, (d) => d["Women-median-earnings"]) ]); const y = d3 .scaleLinear() .domain([yMin * 0.95, yMax * 1.05]) .range([innerHeight, 0]); const line = (key) => d3 .line() .x((d) => x(d.Year)) .y((d) => y(d[key])); // X Axis g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call( d3.axisBottom(x).tickValues(availableYears).tickFormat(d3.format("d")) ); // X Label g.append("text") .attr("x", innerWidth / 2) .attr("y", innerHeight + 40) .attr("text-anchor", "middle") .attr("font-size", "12px") .text("Year"); // Y Axis with $ formatting g.append("g").call(d3.axisLeft(y).tickFormat((d) => `$${d3.format(",")(d)}`)); // Animate line function animatePath(path) { const totalLength = path.node().getTotalLength(); path .attr("stroke-dasharray", `${totalLength} ${totalLength}`) .attr("stroke-dashoffset", totalLength) .transition() .duration(3500) .ease(d3.easeCubic) .attr("stroke-dashoffset", 0); } // Male line if (maleData.length > 0) { const pathMale = g .append("path") .datum(maleData) .attr("fill", "none") .attr("stroke", "blue") .attr("stroke-width", 2.5) .attr("d", line("Male-median-earnings")); animatePath(pathMale); } if (maleData.length > 0) { const pathMale = g .append("path") .datum(maleData) .attr("fill", "none") .attr("stroke", "blue") .attr("stroke-width", 2.5) .attr("d", line("Male-median-earnings")); animatePath(pathMale); const emojiMale = g.append("text").text("👨‍⚕️").attr("font-size", "16px"); const totalLength = pathMale.node().getTotalLength(); emojiMale .transition() .duration(3500) .ease(d3.easeCubic) .attrTween("transform", function () { return function (t) { const point = pathMale.node().getPointAtLength(t * totalLength); return `translate(${point.x},${point.y})`; }; }); } // Female line if (femaleData.length > 0) { const pathFemale = g .append("path") .datum(femaleData) .attr("fill", "none") .attr("stroke", "pink") .attr("stroke-width", 2.5) .attr("d", line("Women-median-earnings")); animatePath(pathFemale); } if (femaleData.length > 0) { const pathFemale = g .append("path") .datum(femaleData) .attr("fill", "none") .attr("stroke", "pink") .attr("stroke-width", 2.5) .attr("d", line("Women-median-earnings")); animatePath(pathFemale); const emojiFemale = g .append("text") .text("👩‍⚕️") .attr("font-size", "16px"); const totalLength = pathFemale.node().getTotalLength(); emojiFemale .transition() .duration(3500) .ease(d3.easeCubic) .attrTween("transform", function() { return function(t) { const point = pathFemale.node().getPointAtLength(t * totalLength); return `translate(${point.x},${point.y})`; }; }); } // Legend const legend = g .append("g") .attr("transform", `translate(${innerWidth - 160}, 10)`); legend .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 12) .attr("height", 12) .attr("fill", maleData.length > 0 ? "blue" : "#ccc"); legend .append("text") .attr("x", 20) .attr("y", 10) .style("font-size", "12px") .text("Men" + (maleData.length === 0 ? " (no data)" : "")); legend .append("rect") .attr("x", 0) .attr("y", 20) .attr("width", 12) .attr("height", 12) .attr("fill", femaleData.length > 0 ? "pink" : "#ccc"); legend .append("text") .attr("x", 20) .attr("y", 30) .style("font-size", "12px") .text("Women" + (femaleData.length === 0 ? " (no data)" : "")); if (maleData.length === 0 && femaleData.length > 0) { legend .append("text") .attr("x", 0) .attr("y", 50) .style("font-size", "11px") .style("font-style", "italic") .text("(all-female role)"); } if (femaleData.length === 0 && maleData.length > 0) { legend .append("text") .attr("x", 0) .attr("y", 50) .style("font-size", "11px") .style("font-style", "italic") .text("(all-male role)"); } return svg.node(); }30:T586,{ // Filter data based on the selected category const filteredData = data2.filter(d => d["Occupational Category"] === selectedCategory); // Create the plot return Plot.plot({ title: `Women's Pay as % of Men's Pay Over Time`, subtitle: `For ${selectedCategory}`, marks: [ Plot.line(filteredData, { x: "Year", y: "%Women Pay", stroke: "steelblue", // Optional: set line color strokeWidth: 2 // Optional: set line thickness }), Plot.dot(filteredData, { // Optional: add points to the line x: "Year", y: "%Women Pay", fill: "steelblue" }), Plot.tip(filteredData, Plot.pointerX({ // Optional: add tooltips x: "Year", y: "%Women Pay", title: d => `${d.Year}`, // Show Year in tooltip title format: { // Format the tooltip content "%Women Pay": d => `${d.toFixed(1)}%` // Show %Women Pay with one decimal } })) ], x: { label: "Year", type: "linear", // Treat year as linear for plotting scale tickFormat: "d" // Format year ticks as integers (e.g., 2023) }, y: { label: "% Women's Pay of Men's Pay", grid: true, // Add horizontal grid lines domain: Plot.niceY // Optional: Adjust Y-axis domain nicely }, style: { // Optional: Add some basic styling fontSize: "12px" } }); }31: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; }32:T476,// Cell 3: Create the scatterplot Plot.plot({ title: "Change in Gender Pay Gap vs. Average % Women in Occupation", subtitle: `Comparing earliest (${d3.min(processedData, d => d.startYear)}) and latest (${d3.max(processedData, d => d.endYear)}) available data years for each occupation.`, grid: true, marks: [ Plot.dot(processedData, { x: "avgPercentWomen", y: "payChange", fill: "steelblue", // Color of the dots r: 5, // Radius of the dots title: d => `${d["Occupational Category"]}\nAvg % Women: ${d.avgPercentWomen.toFixed(1)}%\nPay Change: ${d.payChange.toFixed(1)}% (${d.startYear}-${d.endYear})` // Tooltip on hover }), Plot.ruleY([0], {strokeDasharray: "2,2", stroke: "grey"}) // Add a zero line for reference ], x: { label: "Average % Women Workers (across all years)", tickFormat: d => `${d}%` // Format ticks as percentages }, y: { label: "Change in Women's Pay as % of Men's (Latest Year - Earliest Year)", tickFormat: d => `${d > 0 ? '+' : ''}${d.toFixed(1)}%` // Show sign and format as percentage change }, style: { fontSize: "12px" } })33: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; }34:T641,// Cell 3: Create the scatterplot (Avg Number of Women vs Pay Change) Plot.plot({ title: "Change in Gender Pay Gap vs. Average Number of Women in Occupation", subtitle: `Comparing earliest (${d3.min(processedDataAvgNum, d => d.startYear)}) and latest (${d3.max(processedDataAvgNum, d => d.endYear)}) available data years for each occupation.`, grid: true, marks: [ Plot.dot(processedDataAvgNum, { // Use the newly processed data x: "avgNumWomen", // --- CHANGE: Use average number for X --- y: "payChange", fill: "steelblue", r: 5, // --- CHANGE: Reverted to using title for browser tooltips --- title: d => `${d["Occupational Category"]}\nAvg Women Workers: ${d3.format(",.0f")(d.avgNumWomen)}\nPay Change: ${d.payChange.toFixed(1)}% (${d.startYear}-${d.endYear})` // Updated tooltip content // --- END CHANGE --- }), Plot.ruleY([0], {strokeDasharray: "2,2", stroke: "grey"}) // Zero line for reference // Plot.tip removed as requested ], x: { label: "Average Number of Women Workers (across all years)", // --- CHANGE: Updated X label --- // Optional: Add formatting for large numbers (e.g., 'k' for thousands, 'M' for millions) tickFormat: d3.format("~s") // Use SI prefix format (e.g., 1.5M) // tickFormat: "," // Alternative: Format with commas (e.g., 1,500,000) }, y: { label: "Change in Women's Pay as % of Men's (Latest Year - Earliest Year)", tickFormat: d => `${d > 0 ? '+' : ''}${d.toFixed(1)}%` // Show sign and format as percentage change }, style: { fontSize: "12px" } })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:T5e6,// Cell 3: Create the scatterplot (Avg Median Salary vs Pay Change) Plot.plot({ title: "Change in Gender Pay Gap vs. Average Median Salary by Occupation", subtitle: `Comparing earliest (${d3.min(processedDataAvgSalary, d => d.startYear)}) and latest (${d3.max(processedDataAvgSalary, d => d.endYear)}) available data years for each occupation.`, grid: true, marks: [ Plot.dot(processedDataAvgSalary, { // Use the newly processed data x: "avgMedianSalary", // --- CHANGE: Use average median salary for X --- y: "payChange", fill: "steelblue", r: 5, // --- CHANGE: Update tooltip for avgMedianSalary (formatted as currency) --- title: d => `${d["Occupational Category"]}\nAvg Median Salary: ${d3.format("$,.0f")(d.avgMedianSalary)}\nPay Change: ${d.payChange.toFixed(1)}% (${d.startYear}-${d.endYear})` // --- END CHANGE --- }), Plot.ruleY([0], {strokeDasharray: "2,2", stroke: "grey"}) // Zero line for reference ], x: { label: "Average Median Salary (across all years)", // --- CHANGE: Updated X label --- // --- CHANGE: Format X-axis ticks as currency --- tickFormat: d3.format("$,.0f") // Format as US dollars, comma separator, no decimals // --- END CHANGE --- }, y: { label: "Change in Women's Pay as % of Men's (Latest Year - Earliest Year)", tickFormat: d => `${d > 0 ? '+' : ''}${d.toFixed(1)}%` // Show sign and format as percentage change (same as before) }, style: { fontSize: "12px" } })37:Td12,// Cell 2: Create the Bar Chart with Dots and Color Shading Plot.plot({ // --- Title & Subtitle --- title: "Income Disparities by Occupation", subtitle: `Data for ${latestYearData[0]?.Year || "Latest Year"}. Bar height = Overall Median. Color = % Women. Dots = Men/Women Medians.`, // --- X Axis (Occupations) --- x: { label: "Occupational Category", domain: latestYearData.map(d => d["Occupational Category"]), // Use sorted order from Cell 1 axis: "bottom", tickRotate: -40, // Rotate labels if names are long labelAnchor: "center", // Adjust label position if rotating labelOffset: 65 // Increase offset if rotating to avoid overlap }, // --- Y Axis (Income) --- y: { label: "Median Annual Income", grid: true, nice: true, // Extend domain nicely tickFormat: d3.format("$,.0f") // Format ticks as currency }, // --- Color Scale (for Bar Fill based on % Women) --- color: { type: "linear", // Or "sequential" scheme: "Oranges", // Use the Oranges color scheme domain: [0, 100], // Map % women (0-100) to the color scheme label: "% Women Workers", legend: true // Show color legend }, // --- Margins (adjust if needed for labels/legend) --- marginTop: 40, marginRight: 50, marginBottom: 80, // Increase bottom margin for rotated labels marginLeft: 70, // --- Marks (Bars and Dots) --- marks: [ // Bars representing Overall Median Salary, colored by % Women Plot.barY(latestYearData, { x: "Occupational Category", y: "Median Salary", fill: "%women workers", // Color fill based on % women title: d => `${d["Occupational Category"]}\nOverall Median: ${d3.format("$,.0f")(d["Median Salary"])}\n% Women: ${d["%women workers"].toFixed(1)}%` // Tooltip for bars }), // Blue dots representing Men's Median Pay Plot.dot(latestYearData, { x: "Occupational Category", y: "Men Median Pa", fill: "blue", // Men's dot color r: 4, // Dot radius stroke: "white", // Optional: white outline for visibility strokeWidth: 1, title: d => `${d["Occupational Category"]}\nMen Median Pay: ${d3.format("$,.0f")(d["Men Median Pa"])}` // Tooltip for blue dots }), // Red dots representing Women's Median Pay Plot.dot(latestYearData, { x: "Occupational Category", y: "Women Median Pay", fill: "red", // Women's dot color r: 4, // Dot radius stroke: "white", // Optional: white outline for visibility strokeWidth: 1, title: d => `${d["Occupational Category"]}\nWomen Median Pay: ${d3.format("$,.0f")(d["Women Median Pay"])}` // Tooltip for red dots }), // Optional: Rule to highlight the gap (uncomment to add) // Plot.ruleY(latestYearData, { // x: "Occupational Category", // y1: "Women Median Pay", // y2: "Men Median Pa", // stroke: "grey", // strokeWidth: 0.5 // }) ], // --- Accessibility --- ariaLabel: "Bar chart showing income by occupation", ariaDescription: `Each bar represents an occupation's overall median salary for ${latestYearData[0]?.Year || "the latest year"}, ordered by salary. Bar color indicates the percentage of women workers (see legend). A blue dot shows men's median pay and a red dot shows women's median pay for that occupation.` })38:Tab6,// Cell 2: Create the multi-line plot based on selected categories { // Filter data to include only rows where Occupational Category is in selectedCategories const filteredData = data2.filter(d => selectedCategories.includes(d["Occupational Category"])); // Create the plot return Plot.plot({ title: "Women's Pay as % of Men's Pay Over Time", subtitle: `Showing selected occupations. ${filteredData.length === 0 ? "Select categories above." : ""}`, // --- Color scale for lines (automatically uses category names) --- color: { legend: true, // Show a legend mapping colors to categories // Optional: specify a color scheme if you don't like the default // scheme: "category10" label: "Occupational Category" // Add label to legend }, marks: [ // --- Lines for each selected category --- Plot.line(filteredData, { x: "Year", y: "%Women Pay", stroke: "Occupational Category", // Color lines by category strokeWidth: 2 }), // --- Optional: Dots for data points --- Plot.dot(filteredData, { x: "Year", y: "%Women Pay", fill: "Occupational Category", // Color dots by category r: 3, title: d => `${d["Occupational Category"]}\n${d.Year}: ${d["%Women Pay"].toFixed(1)}%` // Simple tooltip on hover }), // --- Optional: More advanced tooltips (replace dot 'title' above if using this) --- // Plot.tip(filteredData, Plot.pointer({ // x: "Year", // y: "%Women Pay", // channels: { // Define data for the tip // Occupation: "Occupational Category", // Year: "Year", // "% Women Pay": d => d["%Women Pay"]?.toFixed(1) + "%" // Format the percentage // }, // format: { // Control what's shown // x: false, // Hide raw x/y // y: false, // stroke: false, // Hide default stroke channel // Occupation: {label:"Occupation"}, // Label channel nicely // Year: true, // "% Women Pay": true // } // })) ], x: { label: "Year", type: "linear", tickFormat: "d" // Integer format for year }, y: { label: "% Women's Pay of Men's Pay", grid: true, nice: true, // Adjust Y-axis domain nicely zero: false // Don't necessarily force y-axis to start at 0 if data is far above }, style: { fontSize: "12px" }, // --- Accessibility --- ariaLabel: "Multi-line chart showing pay gap trends", ariaDescription: "Each line represents an occupational category selected via checkboxes, showing the trend of women's pay as a percentage of men's pay over the years." }); }39:Tc84,// Cell 2: Plot Men's vs. Women's Pay Trends (Corrected Tooltips & Margin) { // Filter data based on the selected category const filteredData = data2.filter(d => d["Occupational Category"] === selectedCategorySingle) .sort((a, b) => a.Year - b.Year); // Ensure data is sorted by year // Create the plot return Plot.plot({ title: `Men's vs Women's Median Pay Over Time`, subtitle: `For ${selectedCategorySingle}. Blue = Men, Red = Women. Hover for details & % gap.`, // --- ADJUST MARGINS --- // Increase marginLeft to prevent Y-axis labels being cut off marginLeft: 85, // Increased from 70 (adjust further if needed) marginBottom: 40, // Standard bottom margin marginRight: 30, // Standard right margin marginTop: 40, // Standard top margin for title/subtitle marks: [ // --- Men's Median Pay Line (Blue) --- Plot.line(filteredData, { x: "Year", y: "Men Median Pa", stroke: "blue", strokeWidth: 2 }), Plot.dot(filteredData, { x: "Year", y: "Men Median Pa", fill: "blue", r: 3 }), // --- Women's Median Pay Line (Red) --- Plot.line(filteredData, { x: "Year", y: "Women Median Pay", stroke: "red", strokeWidth: 2 }), Plot.dot(filteredData, { x: "Year", y: "Women Median Pay", fill: "red", r: 3 }), // --- CORRECTED Tooltip --- // Using Plot.pointer instead of Plot.pointerX // Nominally link y to Women Median Pay for hover detection area Plot.tip(filteredData, Plot.pointer({ x: "Year", y: "Women Median Pay", // Link y for hover detection channels: { // Define data for the tip (same as before) Year: "Year", "Men Median": "Men Median Pa", "Women Median": "Women Median Pay", "% Women Pay": "%Women Pay" }, format: { // Format how channels appear in the tooltip (same as before) x: false, y: false, Year: true, "Men Median": { label: "Men Median", value: d => d3.format("$,.0f")(d) }, "Women Median": { label: "Women Median", value: d => d3.format("$,.0f")(d) }, "% Women Pay": { label: "% Women Pay", value: d => d?.toFixed(1) + "%" } }, // Basic styling for the tooltip box stroke: "black", fill: "rgba(255, 255, 255, 0.95)", // Slightly less transparent pointerEvents: "none" // Ensure tip doesn't block hovering underlying elements })) ], x: { label: "Year", type: "linear", tickFormat: "d" // Integer format for year }, y: { label: "Median Annual Pay", grid: true, nice: true, tickFormat: d3.format("$,.0f") // Format axis ticks as currency }, style: { fontSize: "12px" }, // --- Accessibility --- ariaLabel: `Men's versus Women's pay comparison chart`, ariaDescription: `Line chart comparing median annual pay for men (blue line) and women (red line) over the years for the selected occupation: ${selectedCategorySingle}.` }); }3a:Tf46,// Cell 3: Create the Horizontal Dumbbell Plot (with connecting lines) { // --- Step 1: Clean & prepare data (same as before) --- const processedData = yearSpecificData .map(d => { const menPay = +d["Men Median Pa"]; const womenPay = +d["Women Median Pay"]; const percPay = +d["%Women Pay"]; if (isNaN(menPay) || isNaN(womenPay)) return null; return { "Occupational Category": d["Occupational Category"], "Men Median Pa": menPay, "Women Median Pay": womenPay, "%Women Pay": isNaN(percPay) ? null : percPay, "Absolute Gap": menPay - womenPay }; }) .filter(d => d) .sort((a, b) => a["Occupational Category"].localeCompare(b["Occupational Category"])); if (!processedData.length) { const msg = yearSpecificData.length === 0 ? `No data available for ${selectedYear}.` : `No valid numeric data for ${selectedYear}.`; return html`

${msg}

`; } // --- Step 2: Define your scales/domains --- const xMax = d3.max(processedData, d => d["Men Median Pa"]); const xDomain = [0, xMax * 1.05]; // pad a little beyond the largest men’s pay // --- Step 3: Plot with ruleY for horizontal lines --- return Plot.plot({ title: "Gender Pay Gap by Occupation", subtitle: `Median Pay for Year: ${selectedYear} (Blue = Men; Red = Women)`, // X axis: quantitative pay x: { label: "Median Annual Income", grid: true, nice: true, domain: xDomain, tickFormat: d3.format("$,.0f"), axis: "bottom" }, // Y axis: categorical occupations y: { label: null, domain: processedData.map(d => d["Occupational Category"]), axis: "left", tickSize: 6 }, marginTop: 50, marginRight: 30, marginBottom: 50, marginLeft: 300, marks: [ // 1) Horizontal connecting line Plot.ruleY(processedData, { // At each occupation (y), draw a line from x1 to x2 y: "Occupational Category", x1: "Women Median Pay", x2: "Men Median Pa", stroke: "grey", strokeWidth: 1.5, strokeOpacity: 0.8 }), // ← ruleY supports x1/x2 for horizontal lines :contentReference[oaicite:0]{index=0} // 2) Draw the dots on top Plot.dot(processedData, { y: "Occupational Category", x: "Men Median Pa", fill: "blue", r: 4.5, stroke: "white", strokeWidth: 1 }), Plot.dot(processedData, { y: "Occupational Category", x: "Women Median Pay", fill: "red", r: 4.5, stroke: "white", strokeWidth: 1 }), // 3) Tooltip Plot.tip(processedData, Plot.pointer({ y: "Occupational Category", x: "Men Median Pa", channels: { Occupation: "Occupational Category", "Men Median": "Men Median Pa", "Women Median": "Women Median Pay", "Absolute Gap": "Absolute Gap", "% Women Pay": "%Women Pay" }, format: { x: false, y: false, Occupation: { label: "Occupation" }, "Men Median": { label: "Men Median", value: d => d3.format("$,.0f")(d) }, "Women Median": { label: "Women Median", value: d => d3.format("$,.0f")(d) }, "Absolute Gap": { label: "Gap", value: d => d3.format("$,.0f")(d) }, "% Women Pay": { label: "% Women Pay", value: d => d == null ? "N/A" : d.toFixed(1) + "%" } }, dx: 10, dy: -10, stroke: "black", fill: "rgba(255,255,255,0.95)" })) ], ariaLabel: "Horizontal dumbbell plot showing gender pay gap by occupation", ariaDescription: `Each line connects the women’s (left dot) to men’s (right dot) median pay for that occupation.` }); }3b:T1493,viewof svg2 = { const trimmedOccupation = selectedEngOccupation.trim(); const data = engineeringData.filter( (d) => d["Occupational-Category"].trim() === trimmedOccupation ); const width = 700; const height = 540; const margin = { top: 60, right: 30, bottom: 60, left: 80 }; const svg = d3.create("svg").attr("width", width).attr("height", height); // Title 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 ${trimmedOccupation} by Gender`); const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const availableYears = Array.from(new Set(data.map((d) => d.Year))).sort( (a, b) => a - b ); const x = d3 .scaleLinear() .domain(d3.extent(availableYears)) .range([0, innerWidth]); const maleData = data.filter((d) => d["Male-median-earnings"] != null); const femaleData = data.filter((d) => d["Women-median-earnings"] != null); const yMin = d3.min([ d3.min(maleData, (d) => d["Male-median-earnings"]), d3.min(femaleData, (d) => d["Women-median-earnings"]) ]); const yMax = d3.max([ d3.max(maleData, (d) => d["Male-median-earnings"]), d3.max(femaleData, (d) => d["Women-median-earnings"]) ]); const y = d3 .scaleLinear() .domain([yMin * 0.95, yMax * 1.05]) .range([innerHeight, 0]); const line = (key) => d3 .line() .x((d) => x(d.Year)) .y((d) => y(d[key])); // X Axis g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call( d3.axisBottom(x).tickValues(availableYears).tickFormat(d3.format("d")) ); // X Label g.append("text") .attr("x", innerWidth / 2) .attr("y", innerHeight + 40) .attr("text-anchor", "middle") .attr("font-size", "12px") .text("Year"); // Y Axis with $ formatting g.append("g").call(d3.axisLeft(y).tickFormat((d) => `$${d3.format(",")(d)}`)); // Animate line function animatePath(path) { const totalLength = path.node().getTotalLength(); path .attr("stroke-dasharray", `${totalLength} ${totalLength}`) .attr("stroke-dashoffset", totalLength) .transition() .duration(3500) .ease(d3.easeCubic) .attr("stroke-dashoffset", 0); } // Male line if (maleData.length > 0) { const pathMale = g .append("path") .datum(maleData) .attr("fill", "none") .attr("stroke", "blue") .attr("stroke-width", 2.5) .attr("d", line("Male-median-earnings")); animatePath(pathMale); const emojiMale = g.append("text").text("👨‍💻").attr("font-size", "16px"); const totalLength = pathMale.node().getTotalLength(); emojiMale .transition() .duration(3500) .ease(d3.easeCubic) .attrTween("transform", function () { return function (t) { const point = pathMale.node().getPointAtLength(t * totalLength); return `translate(${point.x},${point.y})`; }; }); } // Female line if (femaleData.length > 0) { const pathFemale = g .append("path") .datum(femaleData) .attr("fill", "none") .attr("stroke", "pink") .attr("stroke-width", 2.5) .attr("d", line("Women-median-earnings")); animatePath(pathFemale); const emojiFemale = g.append("text").text("👩‍💻").attr("font-size", "16px"); const totalLength = pathFemale.node().getTotalLength(); emojiFemale .transition() .duration(3500) .ease(d3.easeCubic) .attrTween("transform", function () { return function (t) { const point = pathFemale.node().getPointAtLength(t * totalLength); return `translate(${point.x},${point.y})`; }; }); } // Legend const legend = g .append("g") .attr("transform", `translate(${innerWidth - 160}, 10)`); legend .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 12) .attr("height", 12) .attr("fill", maleData.length > 0 ? "blue" : "#ccc"); legend .append("text") .attr("x", 20) .attr("y", 10) .style("font-size", "12px") .text("Men" + (maleData.length === 0 ? " (no data)" : "")); legend .append("rect") .attr("x", 0) .attr("y", 20) .attr("width", 12) .attr("height", 12) .attr("fill", femaleData.length > 0 ? "pink" : "#ccc"); legend .append("text") .attr("x", 20) .attr("y", 30) .style("font-size", "12px") .text("Women" + (femaleData.length === 0 ? " (no data)" : "")); if (maleData.length === 0 && femaleData.length > 0) { legend .append("text") .attr("x", 0) .attr("y", 50) .style("font-size", "11px") .style("font-style", "italic") .text("(all-female role)"); } if (femaleData.length === 0 && maleData.length > 0) { legend .append("text") .attr("x", 0) .attr("y", 50) .style("font-size", "11px") .style("font-style", "italic") .text("(all-male role)"); } return svg.node(); } 3c:T12c0,{ const cleaned = latestYearData .filter(d => d["Occupational Category"] && !isNaN(+d["Men Median Pa"]) && !isNaN(+d["Women Median Pay"]) && !isNaN(+d["%women workers"]) ) .map(d => ({ Occupation: d["Occupational Category"], Men_Earnings: +d["Men Median Pa"], Women_Earnings: +d["Women Median Pay"], AverageIncome: (+d["Men Median Pa"] + +d["Women Median Pay"]) / 2, FemalePct: +d["%women workers"], MalePct: 100 - +d["%women workers"] })); const sorted = cleaned.sort((a, b) => a.AverageIncome - b.AverageIncome); const width = 900; const height = 550; const margin = { top: 60, right: 20, bottom: 180, left: 80 }; 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]); const color = d3.scaleSequential() .domain([0, 100]) .interpolator(d3.interpolateRgb("#fce4ec", "#880e4f")); // 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 by Occupation"); // 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 => color(d.FemalePct)) .style("opacity", 0.9) .style("cursor", "pointer"); // 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 => d.Occupation); // Gradient Legend const legendWidth = 200; const legendHeight = 12; const legendX = width / 2 - legendWidth / 2; const legendY = margin.top; const defs = svg.append("defs"); const gradient = defs.append("linearGradient") .attr("id", "female-gradient") .attr("x1", "0%") .attr("x2", "100%"); gradient.append("stop").attr("offset", "0%").attr("stop-color", "#fce4ec"); gradient.append("stop").attr("offset", "100%").attr("stop-color", "#880e4f"); const legendGroup = svg.append("g").attr("transform", `translate(${legendX}, ${legendY})`); legendGroup.append("rect") .attr("width", legendWidth) .attr("height", legendHeight) .attr("fill", "url(#female-gradient)") .attr("stroke", "gray") .attr("stroke-width", 0.5); legendGroup.append("text") .attr("x", 0) .attr("y", -4) .attr("text-anchor", "start") .style("font-size", "10px") .text("0% women"); legendGroup.append("text") .attr("x", legendWidth) .attr("y", -4) .attr("text-anchor", "end") .style("font-size", "10px") .text("100% women"); // Tooltip with Font Awesome icons 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; } 3d:[{"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":1745364227249.727,"size":18590},{"id":"9ec9eca5f2cf3f5eb4e15d359d91904878bffdb81a1618e0828ab606a495e13c377e7a3d490e1a0b4ad982ce577c5cf2db1d39c7440ab0eb4991985d4e8eb61b","href":"https://static.observableusercontent.com/files/9ec9eca5f2cf3f5eb4e15d359d91904878bffdb81a1618e0828ab606a495e13c377e7a3d490e1a0b4ad982ce577c5cf2db1d39c7440ab0eb4991985d4e8eb61b","name":"ACS_Cleaned_ByYear.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1745523566256.945,"size":11682},{"id":"e5a72bd30294493732604e6a4e1263376d084ddc676bd692f7498987672d6a57d046c5cf46afb101250a03de1b0e9f3f46ec824eff5a67cb7413bc1503206f4a","href":"https://static.observableusercontent.com/files/e5a72bd30294493732604e6a4e1263376d084ddc676bd692f7498987672d6a57d046c5cf46afb101250a03de1b0e9f3f46ec824eff5a67cb7413bc1503206f4a","name":"ACS_Cleaned_ByYear_1.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1745524794835.036,"size":17601},{"id":"8034670a416c67e04f777800ebab485a93670d664a36febfdd03b06acf9ca7f3daceb04832130a1a2da8e9fceacc3be7fce6cd48452d44e75c2f0c62711d678e","href":"https://static.observableusercontent.com/files/8034670a416c67e04f777800ebab485a93670d664a36febfdd03b06acf9ca7f3daceb04832130a1a2da8e9fceacc3be7fce6cd48452d44e75c2f0c62711d678e","name":"MEDIAN_EARNINGS_BY_GENDER_IN_ENG_2013-2023.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1745524907262.384,"size":23668},{"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":1745525505392.06,"size":23372},{"id":"6314390440f0aca674ad2a0ff6c57b0d6a27dab4345fb27a1987015b3073c7d46d4dc9d0a256c1b6d04bbfe63089d5332280e3caffcf4cf3e7bd1efdc70b94c5","href":"https://static.observableusercontent.com/files/6314390440f0aca674ad2a0ff6c57b0d6a27dab4345fb27a1987015b3073c7d46d4dc9d0a256c1b6d04bbfe63089d5332280e3caffcf4cf3e7bd1efdc70b94c5","name":"ACS_Cleaned_ByYear_1@1.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1745528162320.384,"size":37345}] 2d:{"id":"aedf8fb944ad8c0d","slug":null,"title":"Gender Pay Gap Over Time for Registered Nurses and Engineers","thumbnail":"1c8fd5c32e6ae56e3ae3c8a5bebad9a9ae13c8aca6c33a52a9d6b0d1dc4e7f86","access_level":"public","create_time":"$D2025-04-22T22:22:21.417Z","update_time":"$D2025-04-28T19:54:46.172Z","view_time":null,"first_public_time":"$D2025-05-12T23:42:24.613Z","fork":false,"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":316,"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":4,"collection":null,"type":"notebook","body":{"title":"Gender Pay Gap Over Time for Registered Nurses and Engineers","cells":[{"id":0,"value":"# Gender Pay Gap Over Time for Registered Nurses and Engineers\n","pinned":false,"hidden":false,"mode":"md","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":117,"value":"cleanedData = {\n const trimmedOccupation = selectedOccupation.trim();\n\n const grouped = d3.group(\n nursingData.filter(d => d[\"Occupational-Category\"]?.trim() === trimmedOccupation),\n d => +d.Year // Group by numeric year\n );\n\n return Array.from(grouped, ([year, rows]) => {\n const maleEarnings = rows\n .map(d => d[\"Male-median-earnings\"])\n .filter(d => d != null);\n\n const femaleEarnings = rows\n .map(d => d[\"Women-median-earnings\"])\n .filter(d => d != null);\n\n return {\n Year: year,\n \"Male-median-earnings\": maleEarnings.length ? d3.mean(maleEarnings) : null,\n \"Women-median-earnings\": femaleEarnings.length ? d3.mean(femaleEarnings) : null,\n \"Occupational-Category\": trimmedOccupation\n };\n }).sort((a, b) => a.Year - b.Year); // Ensure correct x-axis order\n}\n","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":83,"value":"nursingData = data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"data1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"viewof selectedOccupation = Inputs.select(\n Array.from(new Set(nursingData.map(d => d[\"Occupational-Category\"]))),\n { label: \"Select Occupation\", value: \"Registered nurses\" }\n)\n","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":148,"value":"viewof selectedCategory = Inputs.select(\n // Get unique categories from data1\n [...new Set(data2.map(d => d[\"Occupational Category\"]))].sort(),\n {label: \"Select Occupational Category\"}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"$30","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"data3 = data2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":188,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":191,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"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":235,"value":"$36","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":242,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"// Cell 1: Create checkboxes for Occupational Categories\nviewof selectedCategories = Inputs.checkbox(\n // Get unique categories from data2 and sort them\n [...new Set(data2.map(d => d[\"Occupational Category\"]))].sort(),\n {\n label: \"Select Occupational Categories to Display:\",\n // Optionally set default checked values:\n // value: [\"Business and Financial Operations Occupations:\", \"Construction and Extraction Occupations:\"]\n }\n) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"// Cell 1: Create dropdown for Occupational Category\nviewof selectedCategorySingle = Inputs.select(\n // Get unique categories from data2 and sort them\n [...new Set(data2.map(d => d[\"Occupational Category\"]))].sort(),\n {\n label: \"Select Occupational Category:\",\n // Optionally set a default value:\n // value: \"Business and Financial Operations Occupations:\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":256,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":269,"value":"// Cell 1: Year Slider Input (Corrected Format)\nviewof selectedYear = Inputs.range(\n d3.extent(data2, d => d.Year), // Min/max years\n {\n label: \"Select Year:\",\n step: 1,\n value: d3.max(data2, d => d.Year), // Default to latest year\n // --- CORRECTION: Explicitly use d3.format ---\n format: d3.format(\"d\") // Pass the d3 formatting function for integers\n // --- END CORRECTION ---\n }\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":301,"value":"$3a","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":173,"value":"data4 = workbook3.sheet(0, {\n headers: false,\n // range: \"A1:J10\"\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"engineeringData = data4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"viewof selectedEngOccupation = Inputs.select(\n engineeringData.map(d => d[\"Occupational-Category\"]),\n { label: \"Select Occupation\", unique: true }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":195,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 2e:"$2d:body"