29:null 2a:["$","title",null,{"children":"USA Population Pyramid | Lao | Observable"}] 2f:T4f5,pyramid1Year = { let year = rangePyramid1 let data = data1Year.filter( d => d.year == year) const colors = ["#CCCCCC", "#5B9DBA", "#0071BC", "#FBB03B", "#CCCCCC"] let colorScale = (value) => { if (value >= 0 && value <= 14) return colors[0]; if (value >= 15 && value < 18) return colors[1]; if (value >= 18 && value <= 66) return colors[2]; if (value >= 67 && value <= 100) return colors[3]; return colors[4] } return Plot.plot({ title:`${rangePyramid1} US population pyramid, UN data`, width: 400, height: 600, x: { tickFormat: Math.abs, domain: [-3000000, 3000000], grid:true }, y: { reverse: true, domain: Array.from(Array(101).keys()), }, marks: [ Plot.barX(data, { x: (d) => d.population * (d.sex === "male" ? -1 : 1), y: "age", z: 'sex', r:5, fill: d => colorScale(d.age), stroke: d => colorScale(d.age), strokeWidth:.2, tip:true }), Plot.axisY({ x: y => -data.find(d => d.sex=='male' && d.age==y).population, insetLeft: -5, textStroke: "white", ticks:[0,10,15,18,20,30,40,50,60,67,70,80,90,100]}), Plot.ruleX([0], {strokeWidth:3}), ] }) }30:T80e,percentChange1Year = { let clampAge = 100 let maxAge1 = 100, maxAge2 = 100 let dateRange1 = [1950,2023], dateRange2 = [2023, 2023] let totalRange = {start:dateRange1[0], end:dateRange2[1] } // load birth years represented in 1 year data let array = [] let maxYear for(let i=dateRange1[0]-maxAge1; i<=dateRange1[1]; i++){ array.push( {birth:i, sex:'male', data:[] } ) array.push( {birth:i, sex:'female', data:[] } ) maxYear = i } let sexData = { male: cleaned1Year.filter( e => e.sex == 'male'), female: cleaned1Year.filter( e => e.sex == 'female') } let sex, data, last, now, age for( let i=0; i e.year == j-1 ) now = data.filter( e => e.year == j ) age = j - array[i].birth if( age > clampAge ){ continue } if( now.length == 0 ){ continue } if( last.length == 0 || last[0][age] == undefined || isNaN(last[0][age]) ){ array[i].data.push({ series: array[i].birth + '-' + array[i].sex, year: j, age: age, population:now[0][age], change: null, sex: array[i].sex }) continue } last = last[0][age] now = now[0][age] if( now == undefined || isNaN(now) ){ continue } array[i].data.push({ series: array[i].birth + '-' + array[i].sex, year: j, age: age, population:now, change: (last-now)/last, sex: array[i].sex }) } } for( let i=0; i d.change ) / array[i].data.length for( let j=0; j e.age < 85 ) //return data let plot = Plot.plot({ title:'Percent difference from previous year', subtitle:'Most lines are fairly smooth', width: width, height: 1000, y: {grid: true, domain:[-.16,.07], tickFormat:'%'}, color: { range: ["steelblue ", "lightcoral"] }, marks: [ //Plot.areaY(stDev1Year, {x:'age', y1:'y1', y2:'y2', fill:'grey', opacity:.6}), Plot.line(data, { x: 'age', y: 'change', z: 'series', strokeWidth: 1, opacity: 1, stroke: 'sex', tip:true, }), Plot.dot(data, { x: 'age', y: 'change', z: 'series', r: 1, opacity: 1, fill: 'sex', }), Plot.ruleY([0], {stroke: "black", strokeWidth:2}), Plot.line(stDev1Year, {x:'age', y:'mean', strokeWidth:4}), ] }) /*d3.select(plot) .selectAll("path") .on("pointerenter", function () { d3.select(plot).selectAll("path").attr("opacity", 0.1).attr('stroke-width',1) d3.select(this).attr("opacity", 1).attr('stroke-width',2); }); d3.select(plot).on("pointerleave", function () { d3.select(plot).selectAll("path").attr("opacity", .4) .attr('stroke-width',1) });*/ return plot; }32:T724,chart2 = { let count = 0 let data = data1Year data.filter( e => e.age < 85 ) //return data let plot = Plot.plot({ title:"Deviation from average", subtitle:'The deviation from the average is less than 1% for most lines', width: width, height: 500, y: {domain: [-.05, .05], grid: true, tickFormat: (d, i, _) => d>=0 ? `+${d*100}%` : `${d*100}%` }, color: { range: ["steelblue ", "lightcoral"] }, marks: [ Plot.line(data, { filter: d => d.deviation != null, x: 'age', y: 'deviation', z: 'series', strokeWidth: .5, strokeDasharray:[5,3], opacity: 1, stroke: 'sex', //mixBlendMode: 'multiply' }), Plot.line(data, { x: 'age', y: 'deviation', z: 'series', strokeWidth: .5, opacity: 1, stroke: 'sex', className:'mouseOver', tip:true, //mixBlendMode: 'multiply' }), Plot.dot(data, { x: 'age', y: 'deviation', z: 'series', r: 1, opacity:1, fill: 'sex', className:'mouseOver', //mixBlendMode: 'multiply' }), Plot.areaY(stDev1Year, {x:'age', y1:'y3', y2:'y4', fill:'black', opacity:.2}), Plot.areaY(stDev1Year, {x:'age', y1:'y3', y2:'y4', fill:'none', stroke:'white'}), Plot.ruleY([0], {stroke: "black"}), ] }) /*d3.select(plot) .selectAll("path") .on("pointerenter", function () { d3.select(plot).selectAll("path").attr("opacity", 0.1).attr('stroke-width',1) d3.select(this).attr("opacity", 1).attr('stroke-width',2); }); d3.select(plot).on("pointerleave", function () { d3.select(plot).selectAll("path").attr("opacity", .4) .attr('stroke-width',1) });*/ return plot; }33:T75d,workersToBeneficiaries2 = { let end=2040 let data = ratioData .filter( e => 1960 <= e.year && e.year <= end) let slider = 1960 let plot = Plot.plot({ width:width, title:"The ratio of workers to OASI beneficiaries has steadily declined", subtitle:'Number of workers per beneficiary', height: 200, color: { range: ["black", "steelblue", "#F2C300", "#00A99D"] }, x:{label:null, tickFormat: 'd'}, y:{label:null}, marginLeft:15, marginRight:100, marks: [ Plot.areaY(data, { x: 'year', y2: 'ratio', z: 'type', opacity: .1, fill: 'Type', }), Plot.line(data, { x: 'year', y: 'ratio', z: 'type', strokeWidth: 2, opacity: 1, stroke: 'Type', }), Plot.line(data, { x: 'year', y: 'ratio', z: 'type', strokeWidth: 2, opacity: .2, stroke: 'Type', }), Plot.ruleX([2023]), Plot.dotY(data.filter(e => e.year==end), { x: 'year', y: 'ratio', z: 'type', opacity: 1, fill: 'Type', }), Plot.text(data.filter(e => e.year==end), { x: "year", y: "ratio", text: d=>d.ratio+' workers', textAnchor: 'start', lineAnchor: "middle", fontWeight:600, fontSize:16, dx: 10, fill:'Type', stroke:'white', strokeWidth:4, }) ] }) /*d3.select(plot) .selectAll("path") .on("pointerenter", function () { d3.select(plot).selectAll("path").attr("opacity", 0.1).attr('stroke-width',1) d3.select(this).attr("opacity", 1).attr('stroke-width',2); }); d3.select(plot).on("pointerleave", function () { d3.select(plot).selectAll("path").attr("opacity", .4) .attr('stroke-width',1) });*/ return plot; }34:T2a9b,ss_pp_2023 = { let w = 600 let h = 600 let year = rangePyramid2 const dy = -9; const dx = -40 const xLabel = 5 const iconWidth = 40; const iconHeight = 80; const scaleB = 2.7; // Create SVG with fixed dimensions const svg = d3.create("svg") .attr("width", w) .attr("height", h) .style("background", "#ddd") // 291A1E // Constants for visualization const maxAge = 100; const maxPopulation = 3e6; const padding = { top: 10, right: 130, bottom: 0, left: 130 }; const retirementAge = d3.scaleLinear() .domain([1940, 2002, 2008, 2020, 2026]) .range([65, 65, 66, 66, 67]); // Create scales const width = w; const height = h; const hBar = (height - padding.top - padding.bottom) / (maxAge + 1); const hChart = hBar * maxAge; const xScale = d3.scaleLinear() .domain([-maxPopulation, maxPopulation]) .range([padding.left, width - padding.right]); const yScale = d3.scaleLinear() .domain([maxAge, 0]) .range([padding.top, padding.top + hChart]); // Get year data const yearData = ss_data_1950_2023_v2.find(d => d.year === year); const pyramidData = yearData.pyramid; const ratioData = yearData.ratio; const currentRetirementAge = retirementAge(year); // Define age groups and colors const ageGroups = [ { color: '#6B6B6B', group: 'kids', min: 0, max: 15 }, { color: '#568488', group: 'teens', min: 15, max: 18 }, { color: '#429EA6', group: 'adults', min: 18, max: 62 }, { color: '#F2C300', group: 'retired-full-ss', min: currentRetirementAge+5, max: 100 } ]; // Create gradient const defs = svg.append("defs"); const gradient = defs.append("linearGradient") .attr("id", "barGradient") .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", padding.top + hChart) .attr("x2", 0) .attr("y2", padding.top); // Add gradient stops ageGroups.forEach(group => { gradient.append("stop") .attr("offset", group.min + "%") .attr("stop-color", group.color); gradient.append("stop") .attr("offset", group.max + "%") .attr("stop-color", group.color); }); // Helper function to create rounded rectangles function roundRect(ageVal, value, height, sex) { height = height -.25 const flip = (sex === "male") ? -1 : 1; const actualValue = flip * Math.abs(value); const baseX = (sex === "male") ? xScale(0) : xScale(0)-1; const outerX = xScale(actualValue); const wBar = Math.abs(outerX - baseX); const y = yScale(ageVal); const r = Math.min(wBar, height) / 2; const arcStart = outerX - flip * r; const sweepDirection = (flip === 1) ? 0 : 1; return "M" + baseX + "," + y + " H" + arcStart + " A" + r + "," + r + " 0 0," + sweepDirection + " " + arcStart + "," + (y - height) + " H" + baseX + " Z"; } // Draw population bars const bars = svg.selectAll("path.bar") .data(pyramidData) .enter() .append("path") .attr("class", "bar") .attr("d", d => roundRect(d.age, d.pop0, hBar, d.sex)) .attr("fill", "url(#barGradient)") // .attr("stroke", "black") // .attr("stroke-width", 0.1); // Draw lines for age markers const lineGenerator = d3.line() .x(d => d.x) .y(d => d.y); const lines = [ { id: 'l-x-axis', stroke: "#fff", w: 1, o: 1, points: [{ x: 0, y: yScale(0) }, { x: width, y: yScale(0) }] }, { id: 'l-adult', stroke: "#fff", w: 1, o: 1, points: [{ x: 0, y: yScale(18) }, { x: width - padding.right, y: yScale(18) }] }, { id: 'l-nra', stroke: "#fff", w: 1, o: 1, points: [{ x: 0, y: yScale(currentRetirementAge) }, { x: width - padding.right, y: yScale(currentRetirementAge) }] } ]; // Add callout lines for worker/beneficiary counts const xCallout = Math.min(185, width/5+60); lines.push( { id: 'l-w-callout', stroke: "#429EA6", w: 1, o: 1, points: [{ x: xCallout+dx+5, y: yScale(41.5) }, { x: xScale(0), y: yScale(41.5) }] }, { id: 'l-b-callout', stroke: "#F2C300", w: 1, o: 1, points: [{ x: xCallout+dx+5, y: yScale(82.5) }, { x: xScale(0), y: yScale(82.5) }] } ); svg.selectAll("path.line") .data(lines) .enter() .append("path") .attr("class", d => d.id) .attr("d", d => lineGenerator(d.points)) .attr("stroke", d => d.stroke) .attr("stroke-width", d => d.w) .attr("stroke-opacity", d => d.o); // Add text labels const labels = [ { id: 't-birth', x: xLabel, y: yScale(0) + dy, anchor: 'start', text: "Birth" }, { id: 't-adult', x: xLabel, y: yScale(18) + dy, anchor: 'start', text: "Adult" }, { id: 't-retire', x: xLabel, y: yScale(currentRetirementAge) + dy, anchor: 'start', text: "Normal retirement" }, { id: 't-ratio-a', x: width - padding.right/2-5, y: yScale(currentRetirementAge) - 25, anchor: 'middle', text: "1 beneficiary" }, { id: 't-ratio-b', x: width - padding.right/2-5, y: yScale(currentRetirementAge), anchor: 'middle', text: "for every" }, { id: 't-ratio-c', x: width - padding.right/2-5, y: yScale(currentRetirementAge) + 25, anchor: 'middle', text: ratioData.ratio + " workers" }, // Worker and beneficiary count labels { id: 't-w1', x: xCallout+dx, y: yScale(41.5) -13, anchor: 'end', color:'#429EA6', text: d3.format(",r")(ratioData.workers) }, { id: 't-b1', x: xCallout+dx, y: yScale(82.5) -13, anchor: 'end', color:'#F2C300', text: d3.format(",r")(ratioData.beneficiaries) }, { id: 't-w2', x: xCallout+dx, y: yScale(41.5) +13, anchor: 'end', color:'#429EA6', text: 'workers' }, { id: 't-b2', x: xCallout+dx, y: yScale(82.5) +13, anchor: 'end', color:'#F2C300', text: 'beneficiaries' } ]; svg.selectAll("text.label") .data(labels) .enter() .append("text") .attr("class", "label") .attr("x", d => d.x) .attr("y", d => d.y) .attr("text-anchor", d => d.anchor) .attr("dominant-baseline", "middle") .attr("fill", d => d.color || "white") .attr("font-size", width/25 + "px") // .attr("stroke", "#291A1E") // .attr("stroke-width", 6) // .attr("stroke-linejoin", "round") // .attr("paint-order", "stroke") .style("font-family", "Jost, sans-serif") .text(d => d.text); // Add beneficiary icon directly with SVG paths const beneficiaryX = width - padding.right/2 - scaleB*iconWidth/2; const beneficiaryY = yScale(currentRetirementAge) - scaleB*iconHeight + 70; const beneficiaryGroup = svg.append("g") .attr("class", "beneficiary") .attr("transform", `translate(${beneficiaryX},${beneficiaryY}) scale(${scaleB})`); // Add beneficiary SVG paths directly beneficiaryGroup.append("path") .attr("fill", "#f2c300") .attr("d", "M7.87,25.31c1.58-.59,2.38-2.34,1.79-3.92-.59-1.58-2.34-2.38-3.92-1.79-1.58.59-2.38,2.34-1.79,3.92s2.34,2.38,3.92,1.79Z"); beneficiaryGroup.append("path") .attr("fill", "#f2c300") .attr("d", "M11.62,22.2l-1.17,1.8c-.45.7-.25,1.62.45,2.07.25.16.53.24.81.24.49,0,.97-.24,1.26-.69l2.95-4.56c.32-.49.32-1.13,0-1.62-.32-.49-.89-.76-1.47-.68l-3.16.45c-.82.12-1.39.88-1.27,1.7.11.79.81,1.34,1.6,1.28Z"); beneficiaryGroup.append("path") .attr("fill", "#f2c300") .attr("d", "M35.35,23.55c-.16-.22-.48-.27-.7-.1-1.61,1.2-3.2,2.19-4.75,3.03-.07-.76-.71-1.36-1.49-1.36h-4.71c-.09,0-.17.02-.25.04.01-.02.03-.04.05-.07.39-.73.11-1.64-.62-2.03l-2.43-1.29c-.4-.21-.88-.23-1.29-.06-.42.18-.73.53-.86.96l-1.57,5.44-.71-.41.41-.53c.51-.65.39-1.6-.26-2.1-.65-.51-1.6-.39-2.1.26l-2.26,2.91-1.85-2.3c-.52-.65-1.46-.75-2.11-.23-.4.32-.59.8-.55,1.27-2.49-1.44-4.64-3.33-6.4-5.46-.18-.21-.49-.24-.7-.07-.21.18-.24.49-.07.7,2.18,2.64,4.94,4.94,8.17,6.5l2.36,2.93c.29.35.71.56,1.17.56h.01c.46,0,.89-.22,1.17-.58l.84-1.08c.45.08.91.15,1.37.2l1.69.96c.07.04.15.06.22.09.24.14.5.22.77.22.29,0,.58-.08.83-.25l1.55-1.04c4.6-.53,9.63-2.5,14.96-6.45.22-.16.27-.48.1-.7ZM20.67,25.28l.79.42c.21.11.42.16.64.17l-1.99,1.33.55-1.92ZM24.16,28.12h2.22c-1.38.53-2.72.93-4.03,1.21l1.81-1.21Z"); beneficiaryGroup.append("path") .attr("fill", "#f2c300") .attr("d", "M20.56,3.94l1.61-3.94,1.61,3.94,3.92-1.65-1.65,3.92,3.94,1.61-3.94,1.61,1.65,3.92-3.92-1.65-1.61,3.94-1.61-3.94-3.92,1.65,1.65-3.92-3.94-1.61,3.94-1.61-1.65-3.92,3.92,1.65ZM25.58,6.41c-.78-1.88-2.94-2.78-4.82-2s-2.78,2.94-2,4.82,2.94,2.78,4.82,2,2.78-2.94,2-4.82Z"); // Add worker icons const ratioValue = +ratioData.ratio; const fullCount = Math.floor(ratioValue); const fraction = ratioValue - fullCount; const columns = 3; const workerIconsData = []; for (let i = 0; i < fullCount; i++) { workerIconsData.push({ full: true, fraction: 1, index: i }); } if (fraction > 0) { workerIconsData.push({ full: false, fraction: fraction, index: fullCount }); } // Create worker icons const workers = svg.selectAll("g.worker") .data(workerIconsData) .enter() .append("g") .attr("class", "worker") .attr("transform", function(d) { const col = d.index % columns; const row = Math.floor(d.index / columns); const x = width - padding.right/2 - iconWidth*columns/2 + col*iconWidth - 5; const y = yScale(currentRetirementAge) + 5 + row*iconHeight + 40; return `translate(${x}, ${y})`; }); // Add worker SVG paths directly to each group workers.each(function(d) { const workerGroup = d3.select(this); // Create a group for the worker icon const contentGroup = workerGroup.append("g") .attr("class", "worker-content"); // Add circle and path directly contentGroup.append("circle") .attr("fill", "#429ea6") .attr("cx", "73.23") .attr("cy", "39.34") .attr("r", "28.88") .attr("transform", "scale(0.273, 0.281)"); // Scale to fit in iconWidth x iconHeight contentGroup.append("path") .attr("fill", "#429ea6") .attr("d", "M111.49,78.36H34.96c-12.79,0-23.16,10.37-23.16,23.17v74.64c0,6.96,5.64,12.6,12.6,12.6s12.6-5.64,12.6-12.6v-57.57h0s0,0,0,0c0-2.03,1.65-3.68,3.68-3.68s3.68,1.65,3.68,3.68c0,0,0,0,0,0h0v144.05c0,6.96,5.64,12.6,12.6,12.6s12.6-5.64,12.6-12.6v-75.24h0c0-2.02,1.65-3.66,3.67-3.66s3.66,1.64,3.67,3.66h0v75.24c0,6.96,5.64,12.6,12.6,12.6s12.6-5.64,12.6-12.6V118.6h0s0,0,0,0c0-2.03,1.65-3.68,3.68-3.68s3.67,1.65,3.67,3.68c0,0,0,0,0,0h0v57.57c0,6.96,5.64,12.6,12.6,12.6s12.6-5.64,12.6-12.6v-74.64c0-12.79-10.37-23.17-23.17-23.17Z") .attr("transform", "scale(0.273, 0.281)"); // Scale to fit in iconWidth x iconHeight // Add clipping for partial workers if (!d.full) { const clipId = "clip-worker-" + d.index; defs.append("clipPath") .attr("id", clipId) .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", iconWidth * d.fraction) .attr("height", iconHeight); contentGroup.attr("clip-path", `url(#${clipId})`); } }); return svg.node(); }35:Tade,{ // Data extracted from the chart const data = [ { scenario: "Payroll tax paid by median earner at 12.4%", baseAmount: 8263, additionalAmount: 0, totalAmount: 8263, percentageLabel: "" }, { scenario: "Payroll tax paid by median earner at 16.05% (75-year solvency)", baseAmount: 8263, additionalAmount: 2432, totalAmount: 10695, percentageLabel: "+29%" }, { scenario: "Payroll tax paid by median earner at 17.6% (infinite horizon)", baseAmount: 8263, additionalAmount: 3465, totalAmount: 11728, percentageLabel: "+42%" } ]; // Transform data for stacked bar chart const stackedData = data.flatMap(d => [ { scenario: d.scenario, category: "Tax amount at 12.4%", value: d.baseAmount, order: 1 }, { scenario: d.scenario, category: "Additional tax needed to keep Social Security solvent", value: d.additionalAmount, order: 2 } ]); // Create the chart return Plot.plot({ width: 800, height: 500, marginBottom: 120, marginLeft: 80, y: { domain: [0, 12000], label: "Payroll tax, US dollars", tickFormat: d => `$${d.toLocaleString()}`, grid: true }, x: { domain: data.map(d => d.scenario), label: null, tickRotate: 0 }, color: { domain: ["Tax amount at 12.4%", "Additional tax needed to keep Social Security solvent"], range: ["#9999cc", "#333366"], legend: true }, marks: [ // Stacked bars Plot.barY(stackedData, Plot.groupX( {y: "sum"}, { x: "scenario", y: "value", fill: "category", sort: {x: null, color: null}, tip: true } ) ), // Base amount labels Plot.text(data, { x: "scenario", y: d => d.baseAmount / 2, text: d => `$${d.baseAmount.toLocaleString()}`, fill: "white", fontSize: 14, fontWeight: "bold" }), // Additional amount labels with percentage Plot.text(data.filter(d => d.additionalAmount > 0), { x: "scenario", y: d => d.baseAmount + (d.additionalAmount / 2), text: d => `$${d.additionalAmount.toLocaleString()}\n(${d.percentageLabel})`, fill: "white", fontSize: 14, fontWeight: "bold", lineHeight: 1.3 }), // Total amount labels at top Plot.text(data, { x: "scenario", y: "totalAmount", text: d => `$${d.totalAmount.toLocaleString()}`, fill: "black", fontSize: 14, fontWeight: "bold", dy: -5 }) ] }) }36:[{"id":"0a8a3e4855a7478242b460e5b1f37a96edf8422a39463f3c61b5bb495c262a331cc97c2fccf2d8d64e5617e8709824c43c93a5b5f4a3120c2ef1770ab1f97257","href":"https://static.observableusercontent.com/files/0a8a3e4855a7478242b460e5b1f37a96edf8422a39463f3c61b5bb495c262a331cc97c2fccf2d8d64e5617e8709824c43c93a5b5f4a3120c2ef1770ab1f97257","name":"ss_beneficiary_to_worker_ratio.csv","type":"text/csv","lastModified":1742163053761.406,"size":889},{"id":"8b4cc6e755a7edc881f56e711b12cef80d0e0326fda45d1d889c58ca94d0d13a45f035e974cef233d058275a9696cde9f48c9f5c3e619349c8dc9fbde9ef656c","href":"https://static.observableusercontent.com/files/8b4cc6e755a7edc881f56e711b12cef80d0e0326fda45d1d889c58ca94d0d13a45f035e974cef233d058275a9696cde9f48c9f5c3e619349c8dc9fbde9ef656c","name":"UN_1950-2023@1.csv","type":"text/csv","lastModified":1742163552389.025,"size":1301},{"id":"3dda1b6199616ad85b69545462d1fa0134939d234d7ca2efcd5259aec3ba09e207ed71a4903749196e9181c9740324f45183931aefeeb5a2cf110bef53eaebf1","href":"https://static.observableusercontent.com/files/3dda1b6199616ad85b69545462d1fa0134939d234d7ca2efcd5259aec3ba09e207ed71a4903749196e9181c9740324f45183931aefeeb5a2cf110bef53eaebf1","name":"UN_1950-2023.csv","type":"text/csv","lastModified":1739371997177.72,"size":130496},{"id":"59996bbd13fcccd0f294d29abbcfb713e05ababd1a82168f5683af834c7a6a6c6093ebc8fc4314878c06f4b168bd984d532068152fb1301cfa9c463076925f13","href":"https://static.observableusercontent.com/files/59996bbd13fcccd0f294d29abbcfb713e05ababd1a82168f5683af834c7a6a6c6093ebc8fc4314878c06f4b168bd984d532068152fb1301cfa9c463076925f13","name":"worker-beneficiary-number-ratio-v2.csv","type":"text/csv","lastModified":1744809093319.932,"size":11807},{"id":"14ce6daa845724272a5089fae15cf2d13ff043ffab97e8f98ebeebd5f1f139e3ee35390ced1552bc1abb668d1f79e0959ae863b9bca27fc1508f6acb4c71cfc6","href":"https://static.observableusercontent.com/files/14ce6daa845724272a5089fae15cf2d13ff043ffab97e8f98ebeebd5f1f139e3ee35390ced1552bc1abb668d1f79e0959ae863b9bca27fc1508f6acb4c71cfc6","name":"ss_worker_beneficiary_numbers_v1.csv","type":"text/csv","lastModified":1744810744539.495,"size":2910},{"id":"2e2b9b28804fe20ce3c0a8df9c34a547604516f8d064299d67742a2d0d75dc0527bfd345eca9c1a02c1530859d4df2b7354623bedd005ad1634b6e2c71986227","href":"https://static.observableusercontent.com/files/2e2b9b28804fe20ce3c0a8df9c34a547604516f8d064299d67742a2d0d75dc0527bfd345eca9c1a02c1530859d4df2b7354623bedd005ad1634b6e2c71986227","name":"ss_worker_beneficiary_numbers_v3.csv","type":"text/csv","lastModified":1745265969088.475,"size":6245}] 2d:{"id":"b7d9430fcb8d5446","slug":null,"title":"USA Population Pyramid","thumbnail":"f5cf789715100e5aa8dde8a9f0ed97393cbb8cf913ea4646d51eb777079a231f","access_level":"public","create_time":"$D2025-02-06T17:41:30.001Z","update_time":"$D2025-10-03T17:21:50.185Z","view_time":null,"first_public_time":"$D2025-02-12T18:45:56.548Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":1052,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"USA Population Pyramid","cells":[{"id":0,"value":"# USA Population Pyramid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":457,"value":"viewof rangePyramid1 = Scrubber(d3.range(1950, 2024, 1), {\n loopDelay: 1000,\n delay:100,\n label: \"Unfold:\",\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":551,"value":"### Data Processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":19,"value":"combined1Year = await FileAttachment(\"UN_1950-2023.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"cleaned1Year = {\n let csv = []\n for( let i=0; i d.age) +1\n let array = []\n let filtered, mean, std1, std2\n for( let i=0; i< maxAge; i++){\n filtered = data1Year.filter( e => e.age == i )\n mean = d3.mean( filtered, d => d.change )\n std1 = d3.deviation( filtered, d => d.change )\n std2 = d3.deviation( filtered, d => d.deviation )\n array.push({\n age: i,\n mean: mean,\n y1: mean + stdRange * std1,\n y2: mean - stdRange * std1,\n y3: stdRange * std2,\n y4: - stdRange * std2,\n })\n }\n return array\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"// the mean of half of a bell curve\nmeanDeviation = Math.sqrt( 2 / Math.PI ) // * σ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"viewof stdRange = Inputs.range([0, 2], {label: \"± standard deviation\", step: .01, value:meanDeviation})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":602,"value":"## Data for Export","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":605,"value":"ss_beneficiary_to_worker_ratio = await FileAttachment(\"ss_beneficiary_to_worker_ratio.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":557,"value":"us_population_1950_to_2023 = {\n let d = []\n let n = data1Year.length\n for(let i=0; ie.year==data1Year[i].year), e=>e.population)}\n )\n }\n return d\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":608,"value":"ss__ratio_1945_to_2023 = ss_beneficiary_to_worker_ratio","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":613,"value":"un_195020231 = await FileAttachment(\"UN_1950-2023@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":614,"value":"retirement_age_1935_to_2030 = {\n let d = []\n for( let i=0; ie.year===i)\n let r2 = ss_worker_beneficiary_numbers_v1.find(e=>e.date===i)\n let retirement = retirement_age_1935_to_2030.find(e=>e.year===i-65)\n retirement = retirement==undefined ? {year: i-65, age: \"65.00\", text: \"65\"} : retirement\n data.push({\n year:i,\n retirement:retirement,\n pyramid:us_population_1950_to_2023 .filter(e=>e.year===i),\n ratio: {year:r1.year, ratio:r1.ratio, workers:r2.workers, beneficiaries:r2.beneficiaries}\n })\n }\n return data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":635,"value":"workerBeneficiaryNumberRatio = await FileAttachment(\"ss_worker_beneficiary_numbers_v3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":638,"value":"ratioData = workerBeneficiaryNumberRatio","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":640,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":724,"value":"ss_worker_beneficiary_numbers_v1 = await FileAttachment(\"ss_worker_beneficiary_numbers_v1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":725,"value":"ss_worker_beneficiary_numbers = ss_worker_beneficiary_numbers_v1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":752,"value":"{\n // Data\n const data = [\n {id: \"A0\", category: \"A\", value: 74.7},\n {id: \"B0\", category: \"B\", value: 95.3},\n {id: \"B1\", category: \"B\", value: 10},\n {id: \"C0\", category: \"C\", value: 35.7},\n {id: \"C1\", category: \"C\", value: 39.6},\n {id: \"D0\", category: \"D\", value: 35.1},\n {id: \"D1\", category: \"D\", value: 95.3},\n {id: \"D2\", category: \"D\", value: 10},\n {id: \"D3\", category: \"D\", value: 16.9},\n ];\n \n // Create a stacked bar chart\n return Plot.plot({\n marginLeft: 60,\n height: 400,\n width: 600,\n marks: [\n Plot.barY(data, {\n x: \"category\",\n y: \"value\",\n fill: \"id\",\n stack: true\n }),\n Plot.ruleY([0])\n ],\n x: {\n label: \"Category\"\n },\n y: {\n label: \"Value\"\n },\n color: {\n legend: true\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":767,"value":"retirementAge= d3.scaleLinear()\n .domain([1940, 2002, 2008, 2020, 2026])\n .range([65, 65, 66, 66, 67])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":770,"value":"retirementAge(2005)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":794,"value":"viewof rangePyramid2 = Scrubber(d3.range(1960, 2024, 1), {\n loopDelay: 1000,\n delay:100,\n label: \"Unfold:\",\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":774,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1048,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2e:"$2d:body"