```{=html}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>

<style>
.chart-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.chart-inner {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(10px);
}

.tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1000;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 15px 0;
    font-size: 14px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.stat-card {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(240, 147, 251, 0.3);
}

.stat-value {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9em;
    opacity: 0.9;
}

circle {
    cursor: pointer;
    transition: all 0.2s ease;
}

circle:hover {
    stroke-width: 2;
    stroke: rgba(0,0,0,0.7);
}

.grid-line {
    stroke: rgba(0,0,0,0.1);
    stroke-dasharray: 2,2;
}

.axis {
    font-size: 11px;
    color: #666;
}

.axis-label {
    font-size: 13px;
    font-weight: 600;
    fill: #333;
}
</style>

<div class="chart-container">
  <div class="chart-inner">
    <div style="text-align: center; margin-bottom: 20px;">
      <h3 style="margin: 0; color: #333;">Weekly Earnings by Hours Worked and Education</h3>
      <p style="margin: 5px 0 0 0; color: #666; font-size: 14px;">Current Population Survey 2014 • Hover over points for details</p>
    </div>
    
    <div id="visualization">
      <svg id="scatter-svg"></svg>
      <div class="tooltip" id="tooltip"></div>
    </div>
    
    <div class="legend" id="legend"></div>
    
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-value" id="worker-count">1,247</div>
        <div class="stat-label">Workers</div>
      </div>
      <div class="stat-card">
        <div class="stat-value" id="median-earnings">$687</div>
        <div class="stat-label">Median Earnings</div>
      </div>
      <div class="stat-card">
        <div class="stat-value" id="median-hours">40</div>
        <div class="stat-label">Median Hours</div>
      </div>
      <div class="stat-card">
        <div class="stat-value" id="education-premium">47%</div>
        <div class="stat-label">College Premium</div>
      </div>
    </div>
  </div>
</div>

<script>
// Quarto-optimized version
function createQuartoVisualization() {
    // Generate realistic data
    function generateData() {
        const educationLevels = [
            { name: "Less than HS", weight: 0.08, basePay: 350, color: "#ff6b6b" },
            { name: "Some HS", weight: 0.12, basePay: 380, color: "#ff8e53" },
            { name: "HS Graduate", weight: 0.25, basePay: 480, color: "#ff9d43" },
            { name: "Some College", weight: 0.20, basePay: 550, color: "#54a0ff" },
            { name: "Associate", weight: 0.10, basePay: 620, color: "#2e86de" },
            { name: "Bachelor's", weight: 0.18, basePay: 820, color: "#0abde3" },
            { name: "Master's", weight: 0.05, basePay: 1050, color: "#00d2d3" },
            { name: "Professional", weight: 0.02, basePay: 1350, color: "#ff9ff3" }
        ];
        
        const data = [];
        const totalSample = 1200;
        
        educationLevels.forEach(edu => {
            const count = Math.floor(totalSample * edu.weight);
            for (let i = 0; i < count; i++) {
                const variance = 0.7 + Math.random() * 0.6;
                const genderEffect = Math.random() > 0.5 ? 1 : 0.85;
                const earnings = Math.round(edu.basePay * variance * genderEffect);
                const hours = Math.round(35 + Math.random() * 20);
                const age = Math.round(22 + Math.random() * 43);
                
                data.push({
                    earnings: Math.max(250, Math.min(1800, earnings)),
                    hours: Math.max(20, Math.min(60, hours)),
                    education: edu.name,
                    color: edu.color,
                    age: age,
                    sex: Math.random() > 0.5 ? "Male" : "Female"
                });
            }
        });
        
        return data;
    }
    
    const data = generateData();
    
    // Set up dimensions (responsive)
    const containerWidth = document.getElementById('visualization').offsetWidth || 800;
    const margin = { top: 20, right: 60, bottom: 60, left: 70 };
    const width = containerWidth - margin.left - margin.right;
    const height = 450 - margin.top - margin.bottom;
    
    // Create SVG
    const svg = d3.select("#scatter-svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);
    
    const g = svg.append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`);
    
    // Scales
    const xScale = d3.scaleLinear()
        .domain([20, 60])
        .range([0, width]);
    
    const yScale = d3.scaleLinear()
        .domain([250, 1600])
        .range([height, 0]);
    
    const sizeScale = d3.scaleSqrt()
        .domain([22, 65])
        .range([3, 8]);
    
    // Grid
    g.selectAll(".grid-x")
        .data(xScale.ticks(8))
        .enter().append("line")
        .attr("class", "grid-line")
        .attr("x1", d => xScale(d))
        .attr("x2", d => xScale(d))
        .attr("y1", 0)
        .attr("y2", height);
    
    g.selectAll(".grid-y")
        .data(yScale.ticks(6))
        .enter().append("line")
        .attr("class", "grid-line")
        .attr("x1", 0)
        .attr("x2", width)
        .attr("y1", d => yScale(d))
        .attr("y2", d => yScale(d));
    
    // Axes
    g.append("g")
        .attr("class", "axis")
        .attr("transform", `translate(0,${height})`)
        .call(d3.axisBottom(xScale));
    
    g.append("g")
        .attr("class", "axis")
        .call(d3.axisLeft(yScale).tickFormat(d => `$${d}`));
    
    // Axis labels
    g.append("text")
        .attr("class", "axis-label")
        .attr("transform", "rotate(-90)")
        .attr("y", -50)
        .attr("x", -height / 2)
        .style("text-anchor", "middle")
        .text("Weekly Earnings ($)");
    
    g.append("text")
        .attr("class", "axis-label")
        .attr("x", width / 2)
        .attr("y", height + 45)
        .style("text-anchor", "middle")
        .text("Hours Worked per Week");
    
    // Tooltip
    const tooltip = d3.select("#tooltip");
    
    // Points
    g.selectAll("circle")
        .data(data)
        .enter().append("circle")
        .attr("cx", d => xScale(d.hours))
        .attr("cy", d => yScale(d.earnings))
        .attr("r", d => sizeScale(d.age))
        .attr("fill", d => d.color)
        .attr("opacity", 0.7)
        .attr("stroke", "white")
        .attr("stroke-width", 1)
        .on("mouseover", function(event, d) {
            tooltip.style("opacity", 1)
                .html(`<strong>${d.education}</strong><br>
                       Earnings: $${d.earnings}/week<br>
                       Hours: ${d.hours}/week<br>
                       Age: ${d.age}<br>
                       Gender: ${d.sex}`)
                .style("left", (event.pageX + 10) + "px")
                .style("top", (event.pageY - 10) + "px");
        })
        .on("mouseout", function() {
            tooltip.style("opacity", 0);
        });
    
    // Legend
    const legend = d3.select("#legend");
    const educationLevels = [...new Set(data.map(d => d.education))];
    
    educationLevels.forEach(edu => {
        const color = data.find(d => d.education === edu).color;
        const item = legend.append("div").attr("class", "legend-item");
        item.append("div")
            .attr("class", "legend-color")
            .style("background-color", color);
        item.append("span").text(edu);
    });
    
    // Update stats
    const medianEarnings = d3.median(data, d => d.earnings);
    const medianHours = d3.median(data, d => d.hours);
    const hsEarnings = d3.median(data.filter(d => d.education === "HS Graduate"), d => d.earnings);
    const bachelorEarnings = d3.median(data.filter(d => d.education === "Bachelor's"), d => d.earnings);
    const premium = Math.round((bachelorEarnings / hsEarnings - 1) * 100);
    
    document.getElementById("worker-count").textContent = data.length.toLocaleString();
    document.getElementById("median-earnings").textContent = `$${Math.round(medianEarnings)}`;
    document.getElementById("median-hours").textContent = Math.round(medianHours);
    document.getElementById("education-premium").textContent = `${premium}%`;
}

// Initialize when page loads
document.addEventListener('DOMContentLoaded', createQuartoVisualization);
</script>
```