29:null 2a:["$","title",null,{"children":"How Long Will You Live? | russelllim22 | Observable"}] 2f:T1e7e,chart = { // 1. Prepare the data let yearlyDeathProb = (new Array(17).fill(0)) .concat(d3.quantize(d3.interpolateBasis(extendedLifeTable.map(d => d[gender])),85) .map(d => +d.toFixed(6))) let medianLifeExp = 0; let yearlyData = []; const updateData = (age) =>{ yearlyData = []; medianLifeExp = 0; let cumulProb = 1; for(let i=0; i event.preventDefault()) .style("font-family","Helvetica"); // 3. Axes const xAxis = d3.axisBottom() .scale(xScale) .tickSizeInner(-400 + margin.top + margin.bottom) .tickSizeOuter(0); svg.append('g') .attr('transform', `translate(0, ${400 - margin.bottom})`) .call(xAxis) .attr("color","rgb(0,0,0,0.8)") .style("stroke-dasharray", "15 15"); svg.append('text') .attr("x",width - 30) .attr("y",400 - 10) .text("Age") .attr("fill","rgb(0,0,0,0.8)") .attr("font-size",12); const yAxis = d3.axisLeft() .scale(yScale) .ticks(5) .tickSizeInner(-width + margin.left + margin.right) .tickSizeOuter(0); svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(yAxis); svg.append('text') .attr("x", margin.left - 15) .attr("y", margin.top - 10) .text("% chance") .attr("fill","rgb(0,0,0,0.8)") .attr("font-size",12); // 4. Legend svg.append("rect") .attr("x", width - margin.right - 140) .attr("y", 20) .attr("width", 10) .attr("height", 10) .attr('stroke', 'rgba(26, 137, 23, 1)') .attr('fill', 'rgba(26, 137, 23, 0.3)') svg.append('text') .attr("x", width - margin.right - 125) .attr("y", 30) .text("% chance you are alive") .attr("fill","rgb(0,0,0,0.8)") .attr("font-size",12); // 5. Area chart const areaFunc = d3.area() .x((d,i) => xScale(i)) .y1(d => yScale(d*100)) .y0(yScale(0)); svg.append("path") .datum(yearlyData) .classed("areaChart",true) .attr('d', areaFunc) .attr('stroke', 'rgba(26, 137, 23, 1)') .attr('fill', 'rgba(26, 137, 23, 0.3)') const updateChart = (data) => { svg.selectAll(".areaChart") .datum(data) .transition(5000) .attr('d', areaFunc) } // 6. "Your current age" label (draggable) const dragstarted = (event) => { svg.select("#yourAgeBorder").attr("stroke", "rgba(26, 137, 23, 0.7)"); } const dragended = () => { svg.select("#yourAgeBorder").attr("stroke", "rgba(0,0,0,0.1)"); updateChart(yearlyData); svg.selectAll('.hoverLine, .hoverPoint, .hoverTextBoxShadow, .hoverTextBox, .hoverText1,.hoverText2, .hoverText3') .transition() .duration(800) .style("opacity",1) } const dragged = (event, d) => { yourAge[0] = Math.round(xScale.invert(event.x + 80)); yourAge[0] = Math.max(yourAge , 15); yourAge[0] = Math.min(yourAge , 85); updateData(yourAge[0]); svg.selectAll('.hoverLine, .hoverPoint, .hoverTextBoxShadow, .hoverTextBox, .hoverText1,.hoverText2, .hoverText3') .style("opacity",0) updateYourAge(yourAge[0]); } const drag = d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); svg.append('circle') .attr("id", "yourAgeCircle") .attr('r', '4') .attr('fill', 'rgba(26, 137, 23, 1)') .attr('stroke', 'white'); svg.append('rect') .attr("id", "yourAgeBorder") .attr("width", 142) .attr("height", 37) .attr("stroke", "rgb(0,0,0,0.06)") .attr("stroke-width",2) .attr("fill","transparent") .attr("rx",6) svg.append('rect') .attr("id", "yourAgeRect") .attr("width", 140) .attr("height", 35) .attr("stroke", "rgb(0,0,0,0.12)") .attr("fill","white") .attr("rx",5) .style("cursor","grab") .call(drag); svg.append("text") .attr("id", "yourAgeText") .attr("fill","rgba(26, 137, 23, 1)") .style("font-size",14) .style("text-anchor","end") .style("cursor","grab") .call(drag); const updateYourAge = (age) => { svg.selectAll("#yourAgeCircle") .attr('cx', xScale(age)) .attr('cy', yScale(yearlyData[age]*100)) svg.selectAll("#yourAgeRect") .attr("x", xScale(age) - 150) .attr("y", yScale(yearlyData[age]*100) - 15) svg.selectAll("#yourAgeBorder") .attr("x", xScale(age) - 151) .attr("y", yScale(yearlyData[age]*100) - 16) svg.selectAll("#yourAgeText") .text("Your current age: " + age) .attr("x", xScale(age) - 17) .attr("y", yScale(yearlyData[age]*100) + 5) } updateYourAge(yourAge[0]) // 7. Median line & tooltips svg.append('line').classed('hoverLine', true) .attr('y1', margin.top) .attr('y2', 400 - margin.bottom) .attr('stroke', 'rgba(26, 137, 23, 1)'); svg.append("rect").classed('hoverTextBox', true) .attr("width", 140) .attr("height", 75) .attr("stroke", "rgb(0,0,0,0.12)") .attr("fill","white") .attr("rx",5); svg.append("rect").classed('hoverTextBoxShadow', true) .attr("width", 142) .attr("height", 77) .attr("stroke", "rgb(0,0,0,0.06)") .attr("stroke-width",2) .attr("fill","transparent") .attr("rx",6); svg.append('circle').classed('hoverPoint', true) .attr('r', '2') .attr('fill', 'rgba(26, 137, 23, 1)') .attr('stroke', 'white'); for(let i=1; i<4; i++){ svg.append("text").classed('hoverText'+i, true) .attr("fill","rgb(0,0,0,0.8)") .style("font-size",14) .style("text-anchor","end"); } const pointermoved = (event) => { let age = medianLifeExp; if(event){ age = Math.round(xScale.invert(d3.pointer(event)[0])); age = Math.min(age, 100); if(age <= yourAge){ age = medianLifeExp; } } svg.select('.hoverLine') .attr('x1', xScale(Math.max(age , yourAge))) .attr('x2', xScale(Math.max(age , yourAge))) ; svg.select('.hoverPoint') .attr('cx', xScale(age)) .attr('cy', yScale(yearlyData[age]*100)); if(yourAge < age){ svg.select('.hoverTextBoxShadow') .attr("x", Math.max(xScale(age) - 146 , 4)) .attr("y", Math.min(yScale(yearlyData[age]*100) - 21, (400 - 71))) svg.select('.hoverTextBox') .attr("x", Math.max(xScale(age) - 145 , 5)) .attr("y", Math.min(yScale(yearlyData[age]*100) - 20, (400 - 70))); svg.select('.hoverText1') .text("You have about "+Math.round(yearlyData[age]*100) +"%") .attr("x", Math.max(xScale(age) - 10 , 140)) .attr("y", Math.min(yScale(yearlyData[age]*100) , (400 - 50))); svg.select('.hoverText2') .text("chance of living") .attr("x", Math.max(xScale(age) - 10 , 140)) .attr("y", Math.min(yScale(yearlyData[age]*100) + 20 , (400 - 30))); svg.select('.hoverText3') .text("to at least "+age) .attr("x", Math.max(xScale(age) - 10 , 140)) .attr("y", Math.min(yScale(yearlyData[age]*100) + 40 , (400 - 10))); } } svg.on("pointerenter pointermove", pointermoved); pointermoved(null); svg.call(style); return svg.node(); }30:[{"id":"68aa5d4f95463fa262bdf1af1418ea4e2c13bf486543e4f5fabac67d7fc5bd4517be2842a4dc0189a359c83d65152e25bf46589d15a91c922298d97fa85d83a3","href":"https://static.observableusercontent.com/files/68aa5d4f95463fa262bdf1af1418ea4e2c13bf486543e4f5fabac67d7fc5bd4517be2842a4dc0189a359c83d65152e25bf46589d15a91c922298d97fa85d83a3","name":"WHO life table data.csv","type":"text/csv","lastModified":1647895839216.481,"size":88587}] 2d:{"id":"1de26d18787c4ba5","slug":"how-long-will-you-live","title":"How Long Will You Live?","thumbnail":"f9e6be991bee016dc5b1764284598b6bea7be7fd9c673d2a2b0c1e8c0fb13fb9","access_level":"public","create_time":"$D2022-03-20T11:10:19.312Z","update_time":"$D2022-03-23T22:01:15.336Z","view_time":null,"first_public_time":"$D2022-03-23T03:45:32.803Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"09fae133094f5275","login":"russelllim22","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d489aef3ff0131de982117845190ce5b716f11d290ba686927a900b8db79cb60","tier":"starter_2024"},"version":565,"publish_version":565,"role":null,"authored":false,"authors":[{"type":"individual","id":"bb00095e77bd5288","login":"russelllim22","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d489aef3ff0131de982117845190ce5b716f11d290ba686927a900b8db79cb60","tier":null}],"members":[{"type":"individual","id":"bb00095e77bd5288","login":"russelllim22","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d489aef3ff0131de982117845190ce5b716f11d290ba686927a900b8db79cb60","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"How Long Will You Live?","cells":[{"id":0,"value":"# How Long Will You Live?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"selectYourCountry = html`

Select the country where you live and your gender (if you wish):

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"viewof country = DOM.select(countryList)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"viewof gender = DOM.select([\"All\",\"Male\",\"Female\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"dragYourAge = html`

Drag \"Your current age\" to reflect your current age (min 15, max 85):

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"yourAge = [50]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"margin = ({\n top: 40,\n right: 20,\n bottom: 40,\n left: 40,\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"xScale = {\n const xScale = d3.scaleLinear()\n .domain([0,100])\n .range([margin.left, width - margin.right]);\n return xScale;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"yScale = {\n const yScale = d3.scaleLinear()\n .domain([0, 100])\n .range([400 - margin.bottom, margin.top]);\n return yScale;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"lifeTables = FileAttachment(\"WHO life table data.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"extendedLifeTable = {\n let lifeTable = lifeTables.filter(d => d.Location === country); \n const deathProb82 = lifeTable[lifeTable.length - 1].All;\n const deathProb82M = lifeTable[lifeTable.length - 1].Male;\n const deathProb82F = lifeTable[lifeTable.length - 1].Female;\n let extendedLifeTable = lifeTable.concat([\n {age: 87, All: 1.8 * deathProb82, Male: 1.8 * deathProb82M, Female: 1.8 * deathProb82F},\n {age: 92, All: 2.8 * deathProb82, Male: 2.8 * deathProb82M, Female: 2.8 * deathProb82F},\n {age: 97, All: 4.4 * deathProb82, Male: 4.4 * deathProb82M, Female: 4.4 * deathProb82F},\n {age: 102, All: 6.1 * deathProb82, Male: 6.1 * deathProb82M, Female: 6.1 * deathProb82F}]);\n return extendedLifeTable\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"countryList = [... new Set(lifeTables.map(d => d.Location))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"style1 = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"style = svg => {svg.selectAll(\".tick line\").style(\"stroke\",\"rgba(0,0,0,0.1)\")}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"