jschart = { const years = Array.from({length: 125}, (_, i) => 1900 + i) const W = 800, H = 580 const M = {top: 20, right: 20, bottom: 65, left: 55} const iW = W - M.left - M.right const iH = H - M.top - M.bottom // Build stack keys: native then immigrant for each gen const keys = jsGENS.flatMap(g => [g.name + "_n", g.name + "_i"]) const stackData = years.map((yr, i) => { const row = {year: yr} jsGENS.forEach(g => { row[g.name + "_n"] = jsNAT[g.name][i] || 0 row[g.name + "_i"] = jsIMM[g.name][i] || 0 }) return row }) const stack = d3.stack().keys(keys).value((d, k) => d[k])(stackData) const maxTotal = d3.max(stackData, d => jsGENS.reduce((s, g) => s + d[g.name+"_n"] + d[g.name+"_i"], 0)) const xScale = d3.scaleLinear().domain([1900, 2024]).range([0, iW]) const yScale = d3.scaleLinear().domain([0, maxTotal * 1.02]).range([iH, 0]) const area = d3.area() .x(d => xScale(d.data.year)) .y0(d => yScale(d[0])) .y1(d => yScale(d[1])) .curve(d3.curveBasis) const svg = d3.create("svg") .attr("viewBox", `0 0 ${W} ${H}`) .attr("width", "100%") .attr("font-family", "sans-serif") const g = svg.append("g").attr("transform", `translate(${M.left},${M.top})`) // Grid lines g.selectAll(".yg") .data(yScale.ticks(6)) .join("line") .attr("x1", 0).attr("x2", iW) .attr("y1", d => yScale(d)).attr("y2", d => yScale(d)) .attr("stroke", "#e0e0e0").attr("stroke-width", 0.5) // Stacked areas stack.forEach((layer, i) => { const gi = Math.floor(i / 2) const isImm = i % 2 === 1 g.append("path").datum(layer) .attr("fill", isImm ? jsGENS[gi].dark : jsGENS[gi].light) .attr("fill-opacity", 0.92) .attr("stroke", "rgba(255,255,255,0.3)") .attr("stroke-width", isImm ? 0 : 0.4) .attr("d", area) }) // Generation start lines const markers = [ {y: 1901, label: "Greatest"}, {y: 1928, label: "Silent"}, {y: 1946, label: "Boomers"}, {y: 1965, label: "Gen X"}, {y: 1981, label: "Millennials"}, {y: 1997, label: "Gen Z"}, {y: 2013, label: "Alpha"} ] markers.forEach(({y, label}) => { g.append("line") .attr("x1", xScale(y)).attr("x2", xScale(y)) .attr("y1", 0).attr("y2", iH) .attr("stroke", "rgba(0,0,0,0.12)").attr("stroke-width", 1) .attr("stroke-dasharray", "3,3") g.append("text") .attr("x", xScale(y) + 3).attr("y", 14) .attr("fill", "#999").attr("font-size", 10) .text(label) }) // Axes g.append("g").attr("transform", `translate(0,${iH})`) .call(d3.axisBottom(xScale).tickFormat(d3.format("d")).ticks(13)) g.append("g") .call(d3.axisLeft(yScale).ticks(6).tickFormat(d => d + "M")) g.append("text") .attr("transform", "rotate(-90)") .attr("x", -iH / 2).attr("y", -42) .attr("text-anchor", "middle") .attr("fill", "#666").attr("font-size", 11) .text("Living population (millions)") // Tooltip const TIP_W = 230 const tip = d3.select(document.body).append("div") .style("position", "fixed") .style("pointer-events", "none") .style("background", "#fff") .style("border", "1px solid rgba(0,0,0,0.12)") .style("border-radius", "6px") .style("padding", "10px 13px") .style("font-size", "12px") .style("font-family", "sans-serif") .style("color", "#222") .style("display", "none") .style("z-index", "9999") .style("min-width", TIP_W + "px") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.12)") // Crosshair + hover const vline = g.append("line").attr("class", "vl") .attr("y1", 0).attr("y2", iH) .attr("stroke", "rgba(0,0,0,0.3)").attr("stroke-width", 1) .style("display", "none") g.append("rect") .attr("width", iW).attr("height", iH) .attr("fill", "none").attr("pointer-events", "all") .on("mousemove", function(event) { const [mx] = d3.pointer(event, this) const yr = Math.round(xScale.invert(mx)) if (yr < 1900 || yr > 2024) return const idx = yr - 1900 let tN = 0, tI = 0 let html = `

${yr}

` ;[...jsGENS].reverse().forEach(gen => { const nat = jsNAT[gen.name][idx] || 0 const imm = jsIMM[gen.name][idx] || 0 const tot = nat + imm if (tot < 0.1) return tN += nat; tI += imm html += `

${gen.name} ${nat.toFixed(1)}+${imm.toFixed(1)} ${tot.toFixed(1)}M

` }) html += `

native ${tN.toFixed(1)}M · immigrant ${tI.toFixed(1)}M ${(tN + tI).toFixed(1)}M

` tip.html(html).style("display", "block") const tipNode = tip.node() const tipW = tipNode ? tipNode.offsetWidth || TIP_W : TIP_W const offset = 14 const wouldOverflow = (event.clientX + offset + tipW) > window.innerWidth tip .style("left", (wouldOverflow ? event.clientX - offset - tipW : event.clientX + offset) + "px") .style("top", (event.clientY - 10) + "px") vline.style("display", null).attr("x1", xScale(yr)).attr("x2", xScale(yr)) }) .on("mouseleave", () => { tip.style("display", "none") vline.style("display", "none") }) // Legend — generation colors row, then nativity key row below const legendG = svg.append("g").attr("transform", `translate(${M.left}, ${H - 32})`) // Row 1: generation swatches jsGENS.forEach((gen, i) => { const lx = i * (iW / jsGENS.length) const lg = legendG.append("g").attr("transform", `translate(${lx}, 0)`) lg.append("rect").attr("width", 8).attr("height", 10).attr("rx", 1).attr("fill", gen.light) lg.append("rect").attr("x", 9).attr("width", 4).attr("height", 10).attr("rx", 1).attr("fill", gen.dark) lg.append("text").attr("x", 15).attr("y", 9) .attr("font-size", 9).attr("fill", "#666") .text(gen.name) }) // Row 2: nativity key legendG.append("rect").attr("y", 16).attr("width", 10).attr("height", 10).attr("rx", 1).attr("fill", "#aaaaaa").attr("fill-opacity", 0.5) legendG.append("rect").attr("x", 11).attr("y", 16).attr("width", 5).attr("height", 10).attr("rx", 1).attr("fill", "#555555") legendG.append("text").attr("x", 20).attr("y", 25) .attr("font-size", 9).attr("fill", "#888") .text("light = native-born · dark = immigrant") // Cleanup tooltip when cell is re-run invalidation.then(() => tip.remove()) return svg.node() }