// Create the visualization chartAccessScores = { // 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") .style("position", "relative"); // 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", "1000") .style("box-shadow", "0 2px 4px rgba(0,0,0,0.2)"); // Set up margins and dimensions const margin = { top: 100, right: 200, 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 - extended to 3.5 const xScale = d3.scaleLinear().domain([0, 3.5]).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; }; } // 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.access_ratio); // Create KDE const kde = kernelDensityEstimator( kernelEpanechnikov(0.15), 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); // Add mean label 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 = ${mean.toFixed(2)}`); // 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 = 0.05; const bins = d3 .bin() .domain(xScale.domain()) .thresholds(d3.range(0, 3.5, 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.access_ratio >= bin.x0 && d.access_ratio < 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.access_ratio), 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}
Access Ratio: ${d.data.access_ratio.toFixed(2)}
Pell % (2023): ${ d.data.pell_2023 ? d.data.pell_2023.toFixed(1) + "%" : "N/A" }
RPU: ${d.data.rpu === 1 ? "Yes" : "No"}`); }) .on("mousemove", function (event) { const containerRect = container.node().getBoundingClientRect(); const x = event.clientX - containerRect.left; const y = event.clientY - containerRect.top; tooltip.style("left", x + 10 + "px").style("top", y - 10 + "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}
Access Ratio: ${d.data.access_ratio.toFixed(2)}
Pell % (2023): ${ d.data.pell_2023 ? d.data.pell_2023.toFixed(1) + "%" : "N/A" }
RPU: ${d.data.rpu === 1 ? "Yes" : "No"}`); }) .on("mousemove", function (event) { const containerRect = container.node().getBoundingClientRect(); const x = event.clientX - containerRect.left; const y = event.clientY - containerRect.top; tooltip.style("left", x + 10 + "px").style("top", y - 10 + "px"); }) .on("mouseout", function () { tooltip.style("visibility", "hidden"); }); }); // Add axes const xAxis = d3.axisBottom(xScale).tickFormat(d3.format(".1f")); 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("Access Score"); // 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 Access Scores 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 Access Score for RPUs was almost 60% higher than the average Access Score 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]); }); return container.node(); }