// Create the visualization chartEarnings = { // Get container width (with fallback) - use full window width const containerWidth = window.innerWidth; // Create SVG container const svg = d3 .create("svg") .attr("width", containerWidth) .attr("height", 500) .attr("viewBox", `0 0 ${containerWidth} 500`) .style("max-width", "100%") .style("height", "auto") .style("font-family", "sans-serif"); // Create tooltip as a div that will be appended to the same container const container = d3.create("div").style("position", "relative"); container.node().appendChild(svg.node()); const tooltip = container .append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "rgba(0, 0, 0, 0.9)") .style("color", "white") .style("padding", "10px") .style("border-radius", "5px") .style("font-size", "12px") .style("font-family", "sans-serif") .style("pointer-events", "none") .style("z-index", "100") .style("box-shadow", "0 2px 4px rgba(0,0,0,0.2)"); // Set up margins and dimensions const margin = { top: 100, right: 100, bottom: 60, left: 80 }; const width = containerWidth - margin.left - margin.right; const height = 500 - margin.top - margin.bottom; // Create main group const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Get unique systems for color coding const systems = [...new Set(rpuData.map((d) => d.System))]; const systemOrder = [ "Public Independent", "TAMUS", "TSUS", "TTUS", "TWU", "UHS", "UNTS", "UTS", "Out-of-State" ]; // Color scale for systems const colorScale = d3 .scaleOrdinal() .domain(systemOrder) .range([ "#6a51a3", "#500000", "#8e7449", "#CC0000", "#E3D353", "#888b8d", "#00853E", "#F47920", "rgba(200, 200, 200, 0.3)" ]); // X scale - using saec_earnings with range from 0 to max value const maxEarnings = d3.max(rpuData, (d) => d.saec_earnings); const xScale = d3.scaleLinear().domain([0, maxEarnings]).range([0, width]); // Y scale for RPU groups (0 and 1) - adjusted for half-violins and beeswarm const yScale = d3.scaleBand().domain([0, 1]).range([0, height]).padding(0.2); // Function to create kernel density estimation function kernelDensityEstimator(kernel, X) { return function (V) { return X.map(function (x) { return [ x, d3.mean(V, function (v) { return kernel(x - v); }) ]; }); }; } function kernelEpanechnikov(k) { return function (v) { return Math.abs((v /= k)) <= 1 ? (0.75 * (1 - v * v)) / k : 0; }; } // Function to format dollar amounts with commas function formatDollar(amount) { return `$${Math.round(amount).toLocaleString()}`; } // // Create tooltip // const tooltip = d3 // .select("body") // .append("div") // .attr("class", "tooltip") // .style("position", "absolute") // .style("visibility", "hidden") // .style("background", "rgba(0, 0, 0, 0.8)") // .style("color", "white") // .style("padding", "8px") // .style("border-radius", "4px") // .style("font-size", "12px") // .style("font-family", "sans-serif") // .style("pointer-events", "none") // .style("z-index", "1000"); // Create half-violin plots and beeswarm plots for each RPU group const rpuGroups = [0, 1]; rpuGroups.forEach((rpu) => { const groupData = rpuData.filter((d) => d.rpu === rpu); const values = groupData.map((d) => d.saec_earnings); // Create KDE const kde = kernelDensityEstimator( kernelEpanechnikov(2000), xScale.ticks(100) ); const density = kde(values); // Scale density values for half-violin width const maxDensity = d3.max(density, (d) => d[1]); const densityScale = d3 .scaleLinear() .domain([0, maxDensity]) .range([0, yScale.bandwidth() * 0.4]); // Use 40% of band for violin // Create half-violin shape (area) - only upper half const area = d3 .area() .x((d) => xScale(d[0])) .y0(yScale(rpu) + yScale.bandwidth() * 0.4) // Start at 40% down from top .y1((d) => yScale(rpu) + yScale.bandwidth() * 0.4 - densityScale(d[1])) // Extend upward .curve(d3.curveBasis); // Add half-violin shape g.append("path") .datum(density) .attr("d", area) .attr("fill", "lightblue") .attr("fill-opacity", 0.6) .attr("stroke", "steelblue") .attr("stroke-width", 1); // Calculate mean and add mean line for violin // const mean = d3.mean(values); // g.append("line") // .attr("x1", xScale(mean)) // .attr("x2", xScale(mean)) // .attr("y1", yScale(rpu)) // .attr("y2", yScale(rpu) + yScale.bandwidth() * 0.4) // .attr("stroke", "black") // .attr("stroke-width", 2); // Calculate mean and add mean line for violin const mean = d3.mean(values); g.append("line") .attr("x1", xScale(mean)) .attr("x2", xScale(mean)) .attr("y1", yScale(rpu)) .attr("y2", rpu === 0 ? height : yScale(rpu) + yScale.bandwidth() * 0.4) .attr("stroke", "black") .attr("stroke-width", 2); // Add mean label with full dollar formatting g.append("text") .attr("x", xScale(mean)) .attr("y", yScale(rpu) - 5) .attr("text-anchor", "middle") .style("font-size", "12px") .style("font-weight", "bold") .style("font-family", "sans-serif") .text(`Mean = ${formatDollar(mean)}`); // Create beeswarm plot below the half-violin const beeswarmY = yScale(rpu) + yScale.bandwidth() * 0.5; // Start at 50% down const beeswarmHeight = yScale.bandwidth() * 0.4; // Use remaining 40% for beeswarm // Create density-based jittering const binWidth = 2000; // Adjusted for earnings scale const bins = d3 .bin() .domain(xScale.domain()) .thresholds(d3.range(0, maxEarnings, binWidth))(values); // Separate out-of-state and other data for layering const outOfStateData = groupData.filter((d) => d.System === "Out-of-State"); const otherData = groupData.filter((d) => d.System !== "Out-of-State"); // Function to create jittered positions based on density function createJitteredPositions(data) { const positions = []; bins.forEach((bin) => { const binData = data.filter( (d) => d.saec_earnings >= bin.x0 && d.saec_earnings < bin.x1 ); if (binData.length === 0) return; const binCenter = (bin.x0 + bin.x1) / 2; const binDensity = binData.length; // Calculate jitter width based on density (more points = wider spread) const maxJitterWidth = beeswarmHeight * 0.8; const jitterWidth = Math.min(maxJitterWidth, binDensity * 4); binData.forEach((d, i) => { let yPos; if (binData.length === 1) { yPos = beeswarmY + beeswarmHeight / 2; } else { // Distribute points vertically within the jitter width const step = jitterWidth / (binData.length - 1); yPos = beeswarmY + (beeswarmHeight - jitterWidth) / 2 + i * step; } positions.push({ data: d, x: xScale(d.saec_earnings), y: yPos }); }); }); return positions; } // Add out-of-state points first (so they appear behind) const outOfStatePositions = createJitteredPositions(outOfStateData); g.selectAll(`.points-out-${rpu}`) .data(outOfStatePositions) .enter() .append("circle") .attr("class", `points-out-${rpu}`) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", 4) .attr("fill", (d) => colorScale(d.data.System)) .attr("stroke", "white") .attr("stroke-width", 0.5) .attr("opacity", 0.8) .on("mouseover", function (event, d) { tooltip.style( "visibility", "visible" ).html(`${d.data.name || "Unknown Institution"}
System: ${d.data.System}
Earnings Ratio: ${d.data.earnings_ratio.toFixed(2)}
Median Earnings: $${ d.data.saec_earnings ? d.data.saec_earnings.toLocaleString() : "N/A" }
RPU: ${d.data.rpu === 1 ? "Yes" : "No"}`); }) .on("mousemove", function (event) { // Get tooltip dimensions const tooltipNode = tooltip.node(); const tooltipRect = tooltipNode.getBoundingClientRect(); const tooltipWidth = tooltipRect.width || 200; // fallback width const tooltipHeight = tooltipRect.height || 100; // fallback height // Get window dimensions const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; // Calculate initial position let left = event.pageX + 10; let top = event.pageY - 10; // Adjust horizontal position if tooltip would go off-screen if (left + tooltipWidth > windowWidth) { left = event.pageX - tooltipWidth - 10; } // Adjust vertical position if tooltip would go off-screen if (top + tooltipHeight > windowHeight) { top = event.pageY - tooltipHeight - 10; } // Ensure tooltip doesn't go above or to the left of the screen left = Math.max(5, left); top = Math.max(5, top); tooltip.style("top", top + "px").style("left", left + "px"); }) .on("mouseout", function () { tooltip.style("visibility", "hidden"); }); // Add other points on top const otherPositions = createJitteredPositions(otherData); g.selectAll(`.points-other-${rpu}`) .data(otherPositions) .enter() .append("circle") .attr("class", `points-other-${rpu}`) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", 4) .attr("fill", (d) => colorScale(d.data.System)) .attr("stroke", "white") .attr("stroke-width", 0.5) .attr("opacity", 0.8) .on("mouseover", function (event, d) { tooltip.style( "visibility", "visible" ).html(`${d.data.name || "Unknown Institution"}
System: ${d.data.System}
Earnings Ratio: ${d.data.earnings_ratio.toFixed(2)}
Median Earnings: $${ d.data.saec_earnings ? d.data.saec_earnings.toLocaleString() : "N/A" }
RPU: ${d.data.rpu === 1 ? "Yes" : "No"}`); }) .on("mousemove", function (event) { // Get tooltip dimensions const tooltipNode = tooltip.node(); const tooltipRect = tooltipNode.getBoundingClientRect(); const tooltipWidth = tooltipRect.width || 200; // fallback width const tooltipHeight = tooltipRect.height || 100; // fallback height // Get window dimensions const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; // Calculate initial position let left = event.pageX + 10; let top = event.pageY - 10; // Adjust horizontal position if tooltip would go off-screen if (left + tooltipWidth > windowWidth) { left = event.pageX - tooltipWidth - 10; } // Adjust vertical position if tooltip would go off-screen if (top + tooltipHeight > windowHeight) { top = event.pageY - tooltipHeight - 10; } // Ensure tooltip doesn't go above or to the left of the screen left = Math.max(5, left); top = Math.max(5, top); tooltip.style("top", top + "px").style("left", left + "px"); }) .on("mouseout", function () { tooltip.style("visibility", "hidden"); }); }); // Add axes with custom formatting const xAxis = d3 .axisBottom(xScale) .tickValues([0, 25000, 50000, 75000, 100000]) .tickFormat((d) => { if (d === 0) return "$0"; return `$${d / 1000}K`; }); g.append("g") .attr("transform", `translate(0,${height})`) .call(xAxis) .selectAll("text") .style("font-size", "14px") .style("font-family", "sans-serif"); // Add Y axis labels g.append("text") .attr("x", -10) .attr("y", yScale(0) + yScale.bandwidth() / 2) .attr("dy", "0.35em") .attr("text-anchor", "end") .style("font-size", "16px") .style("font-weight", "bold") .style("font-family", "sans-serif") .text("Non-RPU"); g.append("text") .attr("x", -10) .attr("y", yScale(1) + yScale.bandwidth() / 2) .attr("dy", "0.35em") .attr("text-anchor", "end") .style("font-size", "16px") .style("font-weight", "bold") .style("font-family", "sans-serif") .text("RPU"); // Add axis labels g.append("text") .attr("transform", `translate(${width / 2}, ${height + 50})`) .style("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .style("font-family", "sans-serif") .text("Median Earnings 8 Years After Entry"); // Add title svg .append("text") .attr("x", containerWidth / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "20px") .style("font-weight", "bold") .style("font-family", "sans-serif") .text("Distribution of Median Student Earnings by RPU Status"); // Add subtitle svg .append("text") .attr("x", containerWidth / 2) .attr("y", 55) .attr("text-anchor", "middle") .style("font-size", "14px") .style("fill", "#666") .style("font-family", "sans-serif") .text( "The average median student earnings for RPUs was 29% higher than the average median student earnings for Non-RPUs." ); // Create legend - moved above the chart const legend = svg .append("g") .attr("transform", `translate(${margin.left}, 75)`); // Legend labels with shortened "Public Independent" const legendLabels = [ "Public Ind.", "TAMUS", "TSUS", "TTUS", "TWU", "UHS", "UNTS", "UTS", "Out-of-State" ]; systemOrder.forEach((system, i) => { const legendRow = legend .append("g") .attr("transform", `translate(${i * 90}, 0)`); legendRow .append("circle") .attr("cx", 8) .attr("cy", 0) .attr("r", 6) .attr("fill", colorScale(system)); legendRow .append("text") .attr("x", 20) .attr("y", 0) .attr("dy", "0.35em") .style("font-size", "12px") .style("font-family", "sans-serif") .text(legendLabels[i]); }); // display(svg.node()); return container.node(); }