31:T1c7b,chart = { const data = expectPopData.filter((d) => d.year === selectYear); const refData = expectPopData.filter((d) => d.year == refYear); const birthRefData = expectPopData .filter((d) => d.age == 0) .map((d) => ({ ...d, age: selectYear - d.year })) .filter((d) => d.age >= 0 && d.age <= 100) .sort((a, b) => d3.ascending(a.age, b.age)); // return birthRefData; const yearDiff = selectYear - refYear; data.forEach((d) => { const ref = refData.filter( (r) => r.age + yearDiff === d.age && d.gender === r.gender ); d.refPop = ref.length ? ref[0].pop : d.pop; }); const totalPop = d3.sum(data, (d) => d.pop); const 초중고 = d3.sum( data.filter((d) => d.age >= 7 && d.age <= 18), (d) => d.pop ); const 노동인구 = d3.sum( data.filter((d) => d.age >= 25 && d.age <= 64), (d) => d.pop ); const 노인인구 = d3.sum( data.filter((d) => d.age >= 65), (d) => d.pop ); const cumulatives = d3.range(0, 100).map((age) => ({ age, cumRatio: d3.sum( data.filter((d) => d.age <= age), (d) => d.pop ) / totalPop })); const min = d3.min(cumulatives, (d) => Math.abs(d.cumRatio - 0.5)); const median = cumulatives.filter( (d) => Math.abs(d.cumRatio - 0.5) === min )[0]; // return median; return Plot.plot({ height: 800, width: 1000, color: { domain: [ "남자", "여자", "malegain", "malelose", "femalegain", "femalelose", "중위값", "base" ], range: [ "#6699CE", "#F18185", "#6186AC33", "#CFB760", "#D9747833", "#CFB760", "#444", "#fff3" ] }, x: { align: "center", tickFormat: (d) => bigFormat(Math.abs(d)), label: "", // label: "←male female→", nice: true, round: true, domain: [-500000, 500000] }, y: { domain: d3.range(0, 100), tickFormat: (d) => (d % 5 === 0 ? d : ""), ticks: 0, nice: true, reverse: true, label: "" }, marginLeft: 60, // marginTop: 50, marks: [ Plot.ruleY([0]), Plot.text(d3.range(0, 100), { x: -500000, y: (d) => d, textAnchor: "end", dx: -30, fillOpacity: (d) => ((selectYear - d) % 5 === 0 ? 0.5 : 0), // fontSize:10, text: (d) => String(selectYear - d) }), showRefYear === "기준연도" ? Plot.barX(refData, { x: (d) => d["pop"] * (1 - 2 * (d["gender"] === "남자")), y: (d) => d.age + selectYear - refYear, fill: "#aaa3", title: (d) => `${refYear}년\n${selectYear - d.age - yearDiff}년생\n${bigFormat( d.pop )}` }) : showRefYear === "출생인구" ? Plot.barX(birthRefData, { x: (d) => d["pop"] * (1 - 2 * (d["gender"] === "남자")), y: (d) => d.age, z: (d) => d.gender, fill: "#aaa3", title: (d) => `${refYear}년\n${selectYear - d.age - yearDiff}년생\n${bigFormat( d.pop )}` }) : [], Plot.barX(data, { x: (d) => d["pop"] * (d["gender"] === "남자" ? -1 : 1), y: "age", fill: (d) => (d.age === median.age ? "중위값" : d.gender), fillOpacity: (d) => d.age === median.age ? 1 : d.age >= 7 && d.age <= 18 ? 0.6 : 0.8, title: (d) => `${d.age}세 ${d.gender} \n${selectYear - d.age}년생\n${bigFormat( d.pop )}\n${refYear} 대비 ${d3.format(".0%")(d.pop / d.refPop)}` }), //남녀성비 초과 Plot.barX(data, { x1: (d) => d3.min([d.male, d.female]) * (d["gender"] === "남자" ? -1 : 1), x2: (d) => d["pop"] * (d["gender"] === "남자" ? -1 : 1), y: "age", fill: (d) => (d.age === median.age ? "중위값" : d.gender), // fillOpacity: (d) => // d.age === median.age ? 1 : d.age >= 7 && d.age <= 18 ? 0.8 : 1, title: (d) => `${d.age}세 ${d.gender} \n${selectYear - d.age}년생\n${bigFormat( d.pop - d3.min([d.male, d.female]) )}\n${d3.format(".0%")( (d.pop - d3.min([d.male, d.female])) / d3.min([d.male, d.female]) )} 초과` }), showRefYear === "기준연도" ? Plot.line(refData, { x: (d) => d["pop"] * (1 - 2 * (d["gender"] === "남자")), y: (d) => d.age + selectYear - refYear, z: (d) => d.gender, stroke: "#4445", curve: "catmull-rom" // title: (d) => // `${refYear}년\n${selectYear - d.age - yearDiff}년생\n${bigFormat( // d.pop // )}` }) : showRefYear === "출생인구" ? Plot.line(birthRefData, { x: (d) => d["pop"] * (1 - 2 * (d["gender"] === "남자")), y: (d) => d.age, z: (d) => d.gender, stroke: "#4445", curve: "catmull-rom", sort: { y: "y" } }) : [], Plot.ruleY([25, 65], { y: (d) => d, strokeOpacity: 0.5 }), Plot.text([median], { x: 0, y: "age", fill: "#444", stroke: "#fffa", fontWeight: 600, text: (d) => `중위연령 ${d.age}세`, fontSize: 15, dy: -10 }), Plot.text([초중고], { x: 450000, y: 10, fill: "#444", stroke: "#fffa", textAnchor: "start", text: (d) => `초중고 취학연령 인구 \n${bigFormat(d)} (${d3.format(".0%")( d / totalPop )})`, fontSize: 15, dy: -10 }), Plot.text([노동인구], { x: 450000, y: 40, fill: "#444", stroke: "#fffa", textAnchor: "start", text: (d) => `노동 인구 \n${bigFormat(d)} (${d3.format(".0%")(d / totalPop)})`, fontSize: 15, dy: -10 }), Plot.text([노인인구], { x: 450000, y: 80, fill: "#444", stroke: "#fffa", textAnchor: "start", text: (d) => `노인 인구 \n${bigFormat(d)} (${d3.format(".0%")(d / totalPop)})`, fontSize: 15, dy: -10 }), // Plot.text([노인인구], { // x: 450000, // y: 70, // fill: "#444", // stroke: "#fffa", // textAnchor: "end", // text: (d) => `잠재적 부양률 ${d3.format(".1f")(노동인구 / 노인인구)}`, // fontSize: 15, // dy: -10 // }), Plot.text([selectYear], { x: -450000, y: 95, fill: "#444", stroke: "#fffa", textAnchor: "start", text: (d) => `${selectYear}년`, fontSize: 25, dy: -10 }), Plot.text([totalPop], { x: -450000, y: 90, fill: "#444", stroke: "#fffa", textAnchor: "start", text: (d) => `전체 인구 ${bigFormat(d)}`, fontSize: 16, dy: -10 }) ] }); }32:T704,life = { const data = d3 .filter( expectPop, (d) => d.year >= selectYear && d.year <= selectYear + 100 && d.age === d.year - selectYear ) .sort((a, b) => d3.ascending(a.year, b.year)); const edgeData = data.filter((d) => [27].includes(d.age)); // return data; return Plot.plot({ title: selectYear + "년생 코호트 생존률", subtitle: "외국인 유입으로 100% 넘을 수 있음", width: 800, height: 300, marginLeft: 60, x: { domain: [0, 100] }, y: { tickFormat: (d) => bigFormat(d), label: "인구", nice: true }, marks: [ Plot.ruleY([100], { stroke: "#aaa" }), Plot.lineY(data, { x: "age", y: "male", stroke: "#6699CE", title: (d) => `${d.age + selectYear}년 ${d.age}세\n${bigFormat( d.male )}\n생존률 ${d3.format(".0%")( d.male / data[0].male )}\n성비 ${d3.format(".0%")(d.female / data[0].male)}` }), Plot.text(edgeData, { x: "age", y: "male", fill: "#444", dy: -20, text: (d) => `${d.age}세\n생존률 ${d3.format(".0%")(d.male / data[0].male)}` }), Plot.lineY(data, { x: "age", y: "female", stroke: "#F18185", title: (d) => `${d.age + selectYear}년 ${d.age}세\n${bigFormat( d.female )}\n생존률 ${d3.format(".0%")( d.female / data[0].female )}\n성비 ${d3.format(".0%")(d.female / data[0].male)}` }), Plot.text(data, { x: "age", y: 0, text: (d) => (d.age % 5 === 0 ? String(d.age + selectYear) : ""), dy: -10, fill: "#888" }) ] }); }33:T4c1,genderRatio = { const data = d3 .filter(expectPop, (d) => d.year === selectYear) .map((d) => { const overAge = expectPop.filter( (d2) => d2.year === selectYear && d2.age >= d.age ); const overMale = d3.sum(overAge, (d) => d.male); const overFemale = d3.sum(overAge, (d) => d.female); return { ...d, genderRatio: ratioType === "연령별" ? (d.male / d.female) * 100 : (overMale / overFemale) * 100 }; }); // return data; return Plot.plot({ title: "연령별 성비", width: 800, height: 200, marginLeft: 60, x: { domain: [0, 100] }, y: { domain: [20, 120], label: "성비 (여성 100명 당 남성)" }, marks: [ Plot.ruleY([105], { stroke: "#aaa" }), Plot.lineY(data, { x: "age", y: "genderRatio", stroke: "#444", title: (d) => `${d.age}세\n성비 ${d3.format(".0f")(d.genderRatio)}` }), Plot.text( data, Plot.selectMaxY({ x: "age", y: "genderRatio", text: (d) => d3.format(".0f")(d.genderRatio), dy: -10, fill: "#444" }) ) ] }); }34:Tc09,genderBirthRatio = { const data = expectPop .filter((d) => d.age === 0) .map((d) => ({ ...d, age: selectYear - d.year, genderRatio: (d.male / d.female) * 100 })) .filter((d) => d.age >= 0) .sort((a, b) => d3.ascending(a.age, b.age)); return Plot.plot({ title: "출생 성비", subtitle: `${selectYear}년 현재 연령`, caption: "통계청 장례인구 추계 데이터", width: 800, height: 300, marginLeft: 60, color: { scheme: "YlOrRd" }, // x: { domain: [0, 100] }, y: { label: "성비 (여성 100명 당 남성)", domain: [100, 120], ticks: 5 }, marks: [ // Plot.lineY(data, { // x: "age", // y: "genderRatio", // stroke: "#444", // title: (d) => `${d.age}세\n성비 ${d3.format(".0f")(d.genderRatio)}` // }), Plot.rectY(data, { x: "age", x2: (d) => d.age + 1, y: "genderRatio", y2: 105, fill: "genderRatio", stroke: "#fff", title: (d) => `${d.age}세\n${d.year}출생\n성비 ${d3.format(".0f")(d.genderRatio)}` }), Plot.ruleY([105], { stroke: "#aaa" }), Plot.text( data, Plot.selectMaxY({ x: "age", y: "genderRatio", text: (d) => d3.format(".0f")(d.genderRatio), dy: -10, fill: "#444" }) ), Plot.text( data, Plot.selectLast({ x: (d) => d.age + 1, y: 105, text: (d) => "자연 성비(105)", textAnchor: "end", dy: 10, fill: "#444" }) ), Plot.text(data, { x: (d) => d.age, y: 110, text: (d) => "초음파 진단기 국산화\n(1985)", textAnchor: "start", // rotate: -30, dx: 5, dy: -0, fill: "#444", filter: (d) => d.year === 1985 }), Plot.text(data, { x: (d) => d.age, y: 105, text: (d) => "태아 성감별\n금지법 제정\n(1987)", textAnchor: "start", // rotate: 30, dy: 20, fill: "#444", filter: (d) => d.year === 1987 }), Plot.text(data, { x: (d) => d.age, y: 105, text: (d) => "모자보건법\n임신 중절 합법화\n(1970)", textAnchor: "start", // rotate: 30, dy: 20, fill: "#444", filter: (d) => d.year === 1970 }), Plot.text(data, { x: (d) => d.age, y: 105, text: (d) => "임신 중절\n허용 확대\n(1976)", textAnchor: "start", // rotate: 30, dy: 20, fill: "#444", filter: (d) => d.year === 1976 }), Plot.text(data, { x: (d) => d.age, y: 105, text: (d) => "성비 불균형 보도 증가\n'장가 못간다'(동아)\n'신부감 줄어든다'(조선)", // textAnchor: "start", // rotate: 30, dy: 20, fill: "#444", filter: (d) => d.year === 1995 }) ] }); }35:Tc5c,genderBirthRatio2 = { const data = expectPop .filter((d) => d.age === 18) .map((d) => ({ ...d, age: selectYear - d.year + 18, year: d.year - 18, genderRatio: (d.male / d.female) * 100 })) .filter((d) => d.age >= 0) .filter((d) => d.age < 65) .sort((a, b) => d3.ascending(a.age, b.age)); return Plot.plot({ title: "성인 성비", subtitle: `${selectYear}년 현재 연령이 18세 였을 때`, caption: "통계청 장례인구 추계 데이터", width: 800, height: 300, marginLeft: 60, color: { scheme: "YlOrRd" }, // x: { domain: [0, 100] }, y: { label: "성비 (여성 100명 당 남성)", domain: [100, 120], ticks: 5 }, marks: [ // Plot.lineY(data, { // x: "age", // y: "genderRatio", // stroke: "#444", // title: (d) => `${d.age}세\n성비 ${d3.format(".0f")(d.genderRatio)}` // }), Plot.rectY(data, { x: "age", x2: (d) => d.age + 1, y: "genderRatio", y2: 105, fill: "genderRatio", stroke: "#fff", title: (d) => `${d.age}세\n${d.year}출생\n성비 ${d3.format(".0f")(d.genderRatio)}` }), Plot.ruleY([105], { stroke: "#aaa" }), Plot.text( data, Plot.selectMaxY({ x: "age", y: "genderRatio", text: (d) => d3.format(".0f")(d.genderRatio), dy: -10, fill: "#444" }) ), Plot.text( data, Plot.selectLast({ x: (d) => d.age + 1, y: 105, text: (d) => "자연 성비(105)", textAnchor: "end", dy: 10, fill: "#444" }) ), Plot.text(data, { x: (d) => d.age, y: 110, text: (d) => "초음파 진단기 국산화\n(1985)", textAnchor: "start", // rotate: -30, dx: 5, dy: -0, fill: "#444", filter: (d) => d.year === 1985 }), Plot.text(data, { x: (d) => d.age, y: 105, text: (d) => "태아 성감별\n금지법 제정\n(1987)", textAnchor: "start", // rotate: 30, dy: 20, fill: "#444", filter: (d) => d.year === 1987 }), Plot.text(data, { x: (d) => d.age, y: 105, text: (d) => "모자보건법\n임신 중절 합법화\n(1970)", textAnchor: "start", // rotate: 30, dy: 20, fill: "#444", filter: (d) => d.year === 1970 }), Plot.text(data, { x: (d) => d.age, y: 105, text: (d) => "임신 중절\n허용 확대\n(1976)", textAnchor: "start", // rotate: 30, dy: 20, fill: "#444", filter: (d) => d.year === 1976 }), Plot.text(data, { x: (d) => d.age, y: 105, text: (d) => "성비 불균형 보도 증가\n'장가 못간다'(동아)\n'신부감 줄어든다'(조선)", // textAnchor: "start", // rotate: 30, dy: 20, fill: "#444", filter: (d) => d.year === 1995 }) ] }); }36:T6d5,timeline2 = { const data = byYear; // return data; return Plot.plot({ title: "초중고 학령 인구", width: 800, color: { domain: [ "남자", "여자", "malegain", "malelose", "femalegain", "femalelose" ], range: [ "#6186AC", "#D97478", "#6186AC33", "#CFB760", "#D9747833", "#CFB760" ] }, // y: { domain: [400000, 1300000] }, marginLeft: 60, x: { tickFormat: "Y" }, y: { tickFormat: (d) => bigFormat(d) }, marks: [ Plot.ruleY([0]), Plot.areaY(data, { x: "year", y: (d) => d.초중고, fill: "#aaa", fillOpacity: 0.2 // stroke: "#888" }), // Plot.areaY(data, { // x: "year", // y: "노인여성", // fill: "#D97478", // fillOpacity: 0.4 // // stroke: "#888" // }), Plot.line(data, { x: "year", y: "초중고", stroke: "#aaaa" }), // Plot.text( // data, // Plot.selectMaxY({ // x: "year", // y: "pop", // text: (d) => bigFormat(d.pop), // dy: -10, // fill: "#444" // }) // ), Plot.ruleX(data, { filter: (d) => d.year === selectYear, x: "year", y: "초중고", strokeWidth: 2, stroke: "#E97276" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: (d) => d.초중고, text: (d) => `${selectYear}년\n${bigFormat(d.초중고)}`, // textAnchor: "start", // dx: 10, dy: -10, fill: "#444" }) ] }); }37:Tce4,timeline = { const data = byYear; // return data; return Plot.plot({ width: 800, color: { domain: [ "남자", "여자", "malegain", "malelose", "femalegain", "femalelose" ], range: [ "#6186AC", "#D97478", "#6186AC33", "#CFB760", "#D9747833", "#CFB760" ] }, // y: { domain: [400000, 1300000] }, marginLeft: 60, x: { tickFormat: "Y" }, y: { tickFormat: (d) => bigFormat(d) }, marks: [ Plot.ruleY([0]), Plot.areaY(data, { x: "year", y: "pop", fill: "#aaa", fillOpacity: 0.1 // stroke: "#888" }), Plot.areaY(data, { x: "year", y: (d) => d.초중고 + d.노인인구 + d.노동인구, fill: "#aaa", fillOpacity: 0.2 // stroke: "#888" }), Plot.areaY(data, { x: "year", y: (d) => d.노인인구 + d.노동인구, fill: "#aaa", fillOpacity: 0.3 // stroke: "#888" }), Plot.areaY(data, { x: "year", y: "노인인구", fill: "#aaa", fillOpacity: 0.4 // stroke: "#888" }), // Plot.areaY(data, { // x: "year", // y: "노인여성", // fill: "#D97478", // fillOpacity: 0.4 // // stroke: "#888" // }), Plot.line(data, { x: "year", y: "pop", stroke: "#aaaa" }), // Plot.text( // data, // Plot.selectMaxY({ // x: "year", // y: "pop", // text: (d) => bigFormat(d.pop), // dy: -10, // fill: "#444" // }) // ), Plot.ruleX(data, { filter: (d) => d.year === selectYear, x: "year", y: "pop", strokeWidth: 2, stroke: "#E97276" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: (d) => d.pop, text: (d) => `${selectYear}년 ${bigFormat(d.pop)}`, // textAnchor: "start", // dx: 10, dy: -10, fill: "#444" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: (d) => d.노인인구 / 2, text: (d) => `노인 인구 ${bigFormat(d.노인인구)} (${d3.format(".0%")( d.노인인구 / d.pop )})`, textAnchor: "start", dx: 10, fill: "#444" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: (d) => d.노인인구 + d.노동인구 / 2, text: (d) => `노동 인구 ${bigFormat(d.노동인구)} (${d3.format(".0%")( d.노동인구 / d.pop )})`, textAnchor: "start", dx: 10, fill: "#444" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: (d) => d.노인인구 + d.노동인구 + d.초중고 / 2, text: (d) => `초중고 연령 인구 ${bigFormat(d.초중고)} (${d3.format(".0%")( d.초중고 / d.pop )})`, textAnchor: "start", dx: 10, fill: "#444" }) ] }); }38:T576,부양률 = { const data = byYear; return Plot.plot({ width: 800, height: 300, marginLeft: 60, // x: { domain: [0, 100] }, y: { label: "노인인구/노동인구", percent: true }, marks: [ Plot.ruleY([0], { stroke: "#aaa" }), Plot.lineY(data, { x: "year", y: (d) => d.노인인구 / d.노동인구, stroke: "#444", title: (d) => `${d.age}세\n성비 ${d3.format(".0f")(d.genderRatio)}` }), Plot.ruleX(data, { filter: (d) => d.year === selectYear, x: "year", y: (d) => d.노인인구 / d.노동인구, strokeWidth: 2, stroke: "#E97276" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: (d) => d.노인인구 / d.노동인구, text: (d) => `${d3.format(".0%")(d.노인인구 / d.노동인구)}`, dy: -10, fill: "#444" }), Plot.text(data, { filter: (d) => d.year % 10 === 0, x: "year", y: (d) => d.노인인구 / d.노동인구, text: (d) => `${d3.format(".0%")(d.노인인구 / d.노동인구)}`, dy: -10, fill: "#4448" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: 0, text: (d) => `${d.year}`, dy: 25, fill: "#E97276" }) ] }); }39:T5b1,출생률 = { const data = byYear.map((d) => ({ ...d, birthRate: (d.data[0].pop / d.pop) * 1000 })); return Plot.plot({ insetLeft: 10, insetTop: 10, width: 800, height: 500, marginLeft: 60, // x: { domain: [0, 100] }, y: { label: "출생률 1000명당 출생아 수", percent: false, nice: true }, x: { tickFormat: (d) => String(d) }, marks: [ Plot.ruleY([0], { stroke: "#aaa" }), Plot.lineY(data, { x: "year", y: (d) => d.birthRate, stroke: "#444" // title: (d) => `${d.age}세\n성비 ${d3.format(".0f")(d.genderRatio)}` }), Plot.ruleX(data, { filter: (d) => d.year === selectYear, x: "year", y: (d) => d.birthRate, strokeWidth: 2, stroke: "#E97276" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: (d) => d.birthRate, text: (d) => `${d3.format(".1f")(d.birthRate)}`, dy: -10, fill: "#444" }), Plot.text(data, { filter: (d) => d.year % 10 === 0, x: "year", y: (d) => d.birthRate, text: (d) => `${d3.format(".1f")(d.birthRate)}`, dy: -10, fill: "#4448" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: 0, text: (d) => `${d.year}`, dy: 25, fill: "#E97276" }) ] }); }3a:Tb02,노동인구노인인구1 = { const data = byYear.map((d) => ({ ...d, birthRate: (d.data[0].pop / d.pop) * 1000, g20s: d3.sum( d.data.filter((a) => a.age >= 20 && a.age < 30), (a) => a.pop ) })); const colorFunc = (d) => d3.interpolateViridis(1 - d); function ageGroup(name, ageExt, color) { const ageFilterFunc = (d) => d3.sum( d.data .filter((a) => a.age >= ageExt[0] && a.age <= ageExt[1]) .map((a) => a.pop) ); const ageFilterPop = (d) => bigFormat( d3.sum( d.data .filter((a) => a.age >= ageExt[0] && a.age <= ageExt[1]) .map((a) => a.pop) ) ); return [ Plot.areaY(data, { x: "year", y: ageFilterFunc, fill: color + "22" }), Plot.lineY(data, { x: "year", y: ageFilterFunc, stroke: color }), Plot.ruleX(data, { filter: (d) => d.year === selectYear, x: "year", y: ageFilterFunc, strokeWidth: 1, stroke: "#E97276" }), Plot.text(data, { filter: (d) => d.year % 10 === 0, x: "year", y: ageFilterFunc, text: ageFilterPop, dy: -10, fill: "#4448", stroke: "#fff5" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: ageFilterFunc, text: ageFilterPop, dy: -10, fill: "#444", stroke: "#fffa" }) ]; } return Plot.plot({ insetLeft: 10, insetTop: 10, width: 800, height: 400, marginLeft: 60, // x: { domain: [0, 100] }, y: { label: "", percent: false, nice: true, tickFormat: (d) => bigFormat(d) }, x: { tickFormat: (d) => String(d) }, marks: [ Plot.ruleY([0], { stroke: "#aaa" }), ...ageGroup("노동인구", [25, 64], colorFunc(0.6)), ...ageGroup("노인인구", [65, 100], colorFunc(0.75)), // ...ageGroup("20대", [20, 29], colorFunc(0.4)), // ...ageGroup("10대", [10, 19], colorFunc(0.1)), Plot.text( [ { label: "노동인구", x: 2010, y: 16000000, color: colorFunc(0.6) }, { label: "노인인구", x: 2050, y: 8000000, color: colorFunc(0.75) } // { label: "20대", x: 1985, y: 4000000, color: colorFunc(0.4) } ], { x: "x", y: "y", text: "label", dy: -10, fontSize: 20, fill: (d) => d.color, stroke: "#fff3" } ), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: 0, text: (d) => `${d.year}`, dy: 13, fill: "#E97276", stroke: "#fff" }) ] }); }3b:Tba3,노동인구노인인구3 = { const data = byYear.map((d) => ({ ...d, birthRate: (d.data[0].pop / d.pop) * 1000, g20s: d3.sum( d.data.filter((a) => a.age >= 20 && a.age < 30), (a) => a.pop ) })); const colorFunc = (d) => d3.interpolateViridis(1 - d); function ageGroup(name, ageExt, color) { const ageFilterFunc = (d) => d3.sum( d.data .filter((a) => a.age >= ageExt[0] && a.age <= ageExt[1]) .map((a) => a.pop) ); const ageFilterPop = (d) => bigFormat( d3.sum( d.data .filter((a) => a.age >= ageExt[0] && a.age <= ageExt[1]) .map((a) => a.pop) ) ); const curve = "catmull-rom"; return [ Plot.areaY(data, { x: "year", y: ageFilterFunc, fill: color + "22", curve }), Plot.lineY(data, { x: "year", y: ageFilterFunc, stroke: color, curve, tip: true }), Plot.ruleX(data, { filter: (d) => d.year === selectYear, x: "year", y: ageFilterFunc, strokeWidth: 1, stroke: "#E97276" }), Plot.text(data, { filter: (d) => d.year % 10 === 0, x: "year", y: ageFilterFunc, text: ageFilterPop, dy: -10, fill: "#4448", stroke: "#fff5" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: ageFilterFunc, text: ageFilterPop, dy: -10, fill: "#444", stroke: "#fffa" }) ]; } return Plot.plot({ caption: "통계청 : 장례인구 추계 - 중위 추계(기본 추계: 출산율-중위 / 기대수명-중위 / 국제순이동-중위) ", insetLeft: 10, insetTop: 10, width: 800, height: 400, marginLeft: 60, // x: { domain: [0, 100] }, y: { label: "", percent: false, nice: true, tickFormat: (d) => bigFormat(d) }, x: { tickFormat: (d) => String(d) }, marks: [ Plot.ruleY([0], { stroke: "#aaa" }), ...ageGroup("노인인구", [65, 100], colorFunc(0.75)), ...ageGroup("20대", [20, 29], colorFunc(0.4)), // ...ageGroup("10대", [10, 19], colorFunc(0.1)), Plot.text( [ { label: "노인인구 \n(65세 이상)", x: 2050, y: 8000000, color: colorFunc(0.75) }, { label: "20대", x: 1985, y: 4000000, color: colorFunc(0.4) } ], { x: "x", y: "y", text: "label", dy: -10, fontSize: 20, fill: (d) => d.color, stroke: "#fff3" } ), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: 0, text: (d) => `${d.year}`, dy: 13, fill: "#E97276", stroke: "#fff" }) ] }); }3c:Tc90,노동인구노인인구33 = { const data = byYear.map((d) => ({ ...d, birthRate: (d.data[0].pop / d.pop) * 1000, g20s: d3.sum( d.data.filter((a) => a.age >= 20 && a.age < 30), (a) => a.pop ), g3050: d3.sum( d.data.filter((a) => a.age >= 30 && a.age < 50), (a) => a.pop ) })); const colorFunc = (d) => d3.interpolateViridis(1 - d); function ageGroup(name, ageExt, color) { const ageFilterFunc = (d) => d3.sum( d.data .filter((a) => a.age >= ageExt[0] && a.age <= ageExt[1]) .map((a) => a.pop) ); const ageFilterPop = (d) => bigFormat( d3.sum( d.data .filter((a) => a.age >= ageExt[0] && a.age <= ageExt[1]) .map((a) => a.pop) ) ); const curve = "catmull-rom"; return [ Plot.areaY(data, { x: "year", y: ageFilterFunc, fill: color + "22", curve }), Plot.lineY(data, { x: "year", y: ageFilterFunc, stroke: color, curve, tip: true }), Plot.ruleX(data, { filter: (d) => d.year === selectYear, x: "year", y: ageFilterFunc, strokeWidth: 1, stroke: "#E97276" }), Plot.text(data, { filter: (d) => d.year % 10 === 0, x: "year", y: ageFilterFunc, text: ageFilterPop, dy: -10, fill: "#4448", stroke: "#fff5" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: ageFilterFunc, text: ageFilterPop, dy: -10, fill: "#444", stroke: "#fffa" }) ]; } return Plot.plot({ caption: "통계청 : 장례인구 추계 - 중위 추계(기본 추계: 출산율-중위 / 기대수명-중위 / 국제순이동-중위) ", insetLeft: 10, insetTop: 10, width: 800, height: 400, marginLeft: 60, // x: { domain: [0, 100] }, y: { label: "", percent: false, nice: true, tickFormat: (d) => bigFormat(d) }, x: { tickFormat: (d) => String(d) }, marks: [ Plot.ruleY([0], { stroke: "#aaa" }), ...ageGroup("노인인구", [65, 100], colorFunc(0.9)), ...ageGroup("20대", [20, 29], colorFunc(0.3)), ...ageGroup("30-50대", [30, 49], colorFunc(0.6)), // ...ageGroup("10대", [10, 19], colorFunc(0.1)), Plot.text( [ { label: "노령 인구 \n(65세 이상)", x: 2055, y: 14000000, color: colorFunc(0.75) }, { label: "20대", x: 1985, y: 4000000, color: colorFunc(0.4) }, { label: "30-50대", x: 2010, y: 12000000, color: colorFunc(0.6) } ], { x: "x", y: "y", text: "label", dy: -10, fontSize: 20, fill: (d) => d.color, stroke: "#fff3" } ), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: 0, text: (d) => `${d.year}`, dy: 13, fill: "#E97276", stroke: "#fff" }) ] }); }3d:Tcdd,노동인구노인인구3ratio = { const data = byYear.map((d) => ({ ...d, birthRate: (d.data[0].pop / d.pop) * 1000, g20s: d3.sum( d.data.filter((a) => a.age >= 20 && a.age < 30), (a) => a.pop ), g3050: d3.sum( d.data.filter((a) => a.age >= 30 && a.age < 50), (a) => a.pop ) })); const colorFunc = (d) => d3.interpolateViridis(1 - d); function ageGroup(name, ageExt, color) { const ageFilterFunc = (d) => d3.sum( d.data .filter((a) => a.age >= ageExt[0] && a.age <= ageExt[1]) .map((a) => a.pop / d.pop) ); const ageFilterPop = (d) => d3.format(".0%")( d3.sum( d.data .filter((a) => a.age >= ageExt[0] && a.age <= ageExt[1]) .map((a) => a.pop / d.pop) ) ); const curve = "catmull-rom"; return [ Plot.areaY(data, { x: "year", y: ageFilterFunc, fill: color + "22", curve }), Plot.lineY(data, { x: "year", y: ageFilterFunc, stroke: color, curve, tip: true }), Plot.ruleX(data, { filter: (d) => d.year === selectYear, x: "year", y: ageFilterFunc, strokeWidth: 1, stroke: "#E97276" }), Plot.text(data, { filter: (d) => d.year % 10 === 0, x: "year", y: ageFilterFunc, text: ageFilterPop, dy: -10, fill: "#4448", stroke: "#fff5" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: ageFilterFunc, text: ageFilterPop, dy: -10, fill: "#444", stroke: "#fffa" }) ]; } return Plot.plot({ title: "연령대별 인구 비율 변화", caption: "통계청 : 장례인구 추계 - 중위 추계(기본 추계: 출산율-중위 / 기대수명-중위 / 국제순이동-중위) ", insetLeft: 10, insetTop: 10, width: 800, height: 400, marginLeft: 60, // x: { domain: [0, 100] }, y: { label: "인구 비율", percent: true, nice: true // tickFormat: (d) => bigFormat(d) }, x: { tickFormat: (d) => String(d) }, marks: [ Plot.ruleY([0], { stroke: "#aaa" }), ...ageGroup("노인인구", [65, 100], colorFunc(0.9)), ...ageGroup("20대", [20, 29], colorFunc(0.3)), ...ageGroup("30-50대", [30, 49], colorFunc(0.6)), // ...ageGroup("10대", [10, 19], colorFunc(0.1)), Plot.text( [ { label: "노령 인구 \n(65세 이상)", x: 2055, y: 0.3, color: colorFunc(0.75) }, { label: "20대", x: 1985, y: 0.1, color: colorFunc(0.4) }, { label: "30-50대", x: 2010, y: 0.25, color: colorFunc(0.6) } ], { x: "x", y: "y", text: "label", dy: -10, fontSize: 20, fill: (d) => d.color, stroke: "#fff3" } ), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: 0, text: (d) => `${d.year}`, dy: 13, fill: "#E97276", stroke: "#fff" }) ] }); }3e:Tb40,노동인구노인인구2 = { const data = byYear.map((d) => ({ ...d, birthRate: (d.data[0].pop / d.pop) * 1000, g20s: d3.sum( d.data.filter((a) => a.age >= 20 && a.age < 30), (a) => a.pop ) })); const colorFunc = (d) => d3.interpolateViridis(1 - d); function ageGroup(name, ageExt, color) { const ageFilterFunc = (d) => d3.sum( d.data .filter((a) => a.age >= ageExt[0] && a.age <= ageExt[1]) .map((a) => a.pop) ); const ageFilterPop = (d) => bigFormat( d3.sum( d.data .filter((a) => a.age >= ageExt[0] && a.age <= ageExt[1]) .map((a) => a.pop) ) ); return [ Plot.areaY(data, { x: "year", y: ageFilterFunc, fill: color + "22" }), Plot.lineY(data, { x: "year", y: ageFilterFunc, stroke: color }), Plot.ruleX(data, { filter: (d) => d.year === selectYear, x: "year", y: ageFilterFunc, strokeWidth: 1, stroke: "#E97276" }), Plot.text(data, { filter: (d) => d.year % 10 === 0, x: "year", y: ageFilterFunc, text: ageFilterPop, dy: -10, fill: "#4448", stroke: "#fff5" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: ageFilterFunc, text: ageFilterPop, dy: -10, fill: "#444", stroke: "#fffa" }) ]; } return Plot.plot({ insetLeft: 10, insetTop: 10, width: 800, height: 400, marginLeft: 60, // x: { domain: [0, 100] }, y: { label: "", percent: false, nice: true, tickFormat: (d) => bigFormat(d) }, x: { tickFormat: (d) => String(d) }, marks: [ Plot.ruleY([0], { stroke: "#aaa" }), ...ageGroup("노동인구", [25, 64], colorFunc(0.6)), ...ageGroup("노인인구", [65, 100], colorFunc(0.9)), ...ageGroup("20대", [20, 29], colorFunc(0.3)), // ...ageGroup("10대", [10, 19], colorFunc(0.1)), Plot.text( [ { label: "노동인구\n(25-65)", x: 2010, y: 16000000, color: colorFunc(0.6) }, { label: "노령 인구", x: 2050, y: 8000000, color: colorFunc(0.75) }, { label: "20대", x: 1985, y: 4000000, color: colorFunc(0.4) } ], { x: "x", y: "y", text: "label", dy: -10, fontSize: 20, fill: (d) => d.color, stroke: "#fff3" } ), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: 0, text: (d) => `${d.year}`, dy: 13, fill: "#E97276", stroke: "#fff" }) ] }); }3f:T93c,연령대별인구4 = { const ageGroups = ["영유아", "초중고", "대학취업", "노동인구", "노인인구"]; const data = byYear .map((d) => ageGroups.map((ageGroup, i) => ({ ...d, ageGroupIndex: i, ageGroup, ageGroupPop: d[ageGroup] })) ) .flat(); const popRatio = data .filter((d) => d.year === selectYear) .map((d) => ({ ...d, ratio: d.ageGroupPop / d.pop, accum: d3.sum(ageGroups.slice(0, d.ageGroupIndex).map((t) => d[t])) + d.ageGroupPop / 2 })); console.log(popRatio); // return data; const colorFunc = (d) => d3.interpolateViridis(1 - d); const curve = "catmull-rom"; return Plot.plot({ title: "연령대별 인구", caption: "통계청 : 장례인구 추계 - 중위 추계(기본 추계: 출산율-중위 / 기대수명-중위 / 국제순이동-중위) ", insetLeft: 10, insetTop: 10, width: 800, height: 400, marginLeft: 60, // x: { domain: [0, 100] }, y: { label: "", percent: false, nice: true, tickFormat: (d) => bigFormat(d) }, x: { tickFormat: (d) => String(d) }, color: { scheme: "Viridis", domain: ageGroups, range: [0.95, 0.2] }, marks: [ Plot.ruleY([0], { stroke: "#aaa" }), // ...ageGroup("노인인구", [65, 100], colorFunc(0.75)), // ...ageGroup("20대", [20, 29], colorFunc(0.4)), // // ...ageGroup("10대", [10, 19], colorFunc(0.1)), Plot.areaY(data, { x: "year", y: "ageGroupPop", fill: "ageGroup", stroke: "ageGroup", fillOpacity: 0.6, strokeOpacity: 0.8, curve, tip: true }), Plot.ruleX(data, { filter: (d) => d.year === selectYear, x: "year", y: "pop", strokeWidth: 1, stroke: "#E97276" }), Plot.text(popRatio, { x: "year", y: "accum", text: (d) => `${d.ageGroup} ${d3.format(".0%")(d.ratio)}`, dy: 0, fill: "#444", stroke: "#fff", fontSize: 13 // stroke: "#fff" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: 0, text: (d) => `${d.year}`, dy: 13, fill: "#E97276", stroke: "#fff" }) ] }); }40:T9eb,연령대별인구5 = { const ageGroups = ["노동인구", "노인인구", "영유아", "초중고", "대학취업"]; const ageGroupsOrder = [ "영유아", "초중고", "대학취업", "노동인구", "노인인구" ]; const data = byYear .map((d) => ageGroups.map((ageGroup, i) => ({ ...d, ageGroupIndex: i, ageGroup, ageGroupPop: d[ageGroup] })) ) .flat(); const popRatio = data .filter((d) => d.year === selectYear) .map((d) => ({ ...d, ratio: d.ageGroupPop / d.pop, accum: d3.sum(ageGroups.slice(0, d.ageGroupIndex).map((t) => d[t])) + d.ageGroupPop / 2 })); console.log(popRatio); // return data; const colorFunc = (d) => d3.interpolateViridis(1 - d); const curve = "catmull-rom"; return Plot.plot({ title: "연령대별 인구", caption: "통계청 : 장례인구 추계 - 중위 추계(기본 추계: 출산율-중위 / 기대수명-중위 / 국제순이동-중위) ", insetLeft: 10, insetTop: 10, width: 800, height: 400, marginLeft: 60, // x: { domain: [0, 100] }, y: { label: "", percent: false, nice: true, tickFormat: (d) => bigFormat(d) }, x: { tickFormat: (d) => String(d) }, color: { scheme: "Viridis", domain: ageGroupsOrder, range: [0.95, 0.2] }, marks: [ Plot.ruleY([0], { stroke: "#aaa" }), // ...ageGroup("노인인구", [65, 100], colorFunc(0.75)), // ...ageGroup("20대", [20, 29], colorFunc(0.4)), // // ...ageGroup("10대", [10, 19], colorFunc(0.1)), Plot.areaY(data, { x: "year", y: "ageGroupPop", fill: "ageGroup", stroke: "ageGroup", fillOpacity: 0.6, strokeOpacity: 0.8, curve, tip: true }), Plot.ruleX(data, { filter: (d) => d.year === selectYear, x: "year", y: "pop", strokeWidth: 1, stroke: "#E97276" }), Plot.text(popRatio, { x: "year", y: "accum", text: (d) => `${d.ageGroup} ${d3.format(".0%")(d.ratio)}`, dy: 0, fill: "#444", stroke: "#fff", fontSize: 13, textAnchor: "start", dx: 10 // stroke: "#fff" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: 0, text: (d) => `${d.year}`, dy: 13, fill: "#E97276", stroke: "#fff" }) ] }); }41:Tccb,노동인구2 = { const data = byYear.map((d) => ({ ...d, birthRate: (d.data[0].pop / d.pop) * 1000, g20s: d3.sum( d.data.filter((a) => a.age >= 20 && a.age < 30), (a) => a.pop ) })); return Plot.plot({ title: "핵심노동인구 (25-64)", insetLeft: 10, insetTop: 10, width: 800, height: 400, marginLeft: 60, // x: { domain: [0, 100] }, y: { label: "", percent: false, nice: true, tickFormat: (d) => bigFormat(d) }, x: { tickFormat: (d) => String(d) }, marks: [ Plot.ruleY([0], { stroke: "#aaa" }), Plot.areaY(data, { x: "year", y: (d) => d.노동인구, fill: "#aaa5" // fill: "#6dc0ed55" // title: (d) => `${d.age}세\n성비 ${d3.format(".0f")(d.genderRatio)}` }), // Plot.areaY(data, { // x: "year", // y: (d) => d.g20s, // // fill: "#aaa5", // fill: "#6dc0ed55" // // title: (d) => `${d.age}세\n성비 ${d3.format(".0f")(d.genderRatio)}` // }), // Plot.lineY(data, { // x: "year", // y: (d) => d.g20s, // // stroke: "#444", // stroke: "#6dc0ed" // // title: (d) => `${d.age}세\n성비 ${d3.format(".0f")(d.genderRatio)}` // }), Plot.lineY(data, { x: "year", y: (d) => d.노동인구, stroke: "#444" // stroke: "#6dc0ed" // title: (d) => `${d.age}세\n성비 ${d3.format(".0f")(d.genderRatio)}` }), Plot.ruleX(data, { filter: (d) => d.year === selectYear, x: "year", y: (d) => d.노동인구, strokeWidth: 2, stroke: "#E97276" }), // Plot.text(data, { // filter: (d) => d.year % 10 === 0, // x: "year", // y: (d) => d.g20s, // text: (d) => bigFormat(d.g20s), // dy: -10, // fill: "#4448", // stroke: "#fff" // }), Plot.text(data, { filter: (d) => d.year % 10 === 0, x: "year", y: (d) => d.노동인구, text: (d) => bigFormat(d.노동인구), dy: -10, fill: "#4448", stroke: "#fff" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: 0, text: (d) => `${d.year}`, dy: 25, fill: "#E97276" }), // Plot.text(data, { // filter: (d) => d.year === selectYear, // x: "year", // y: (d) => d.g20s, // text: (d) => bigFormat(d.g20s), // dy: -10, // fill: "#444", // stroke: "#fff" // }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: (d) => d.노동인구, text: (d) => bigFormat(d.노동인구), dy: -10, fill: "#444", stroke: "#fff" }) // Plot.text( // [ // { label: "노동인구", x: 2000, y: 18000000 }, // { label: "20대", x: 2000, y: 2000000 } // ], // { // x: "x", // y: "y", // text: "label", // dy: -10, // fontSize: 20, // fill: "#4445" // // stroke: "#fff" // } // ) ] }); }42:Tb7a,age20s = { const data = byYear.map((d) => ({ ...d, birthRate: (d.data[0].pop / d.pop) * 1000, g20s: d3.sum( d.data.filter((a) => a.age >= 20 && a.age < 30), (a) => a.pop ) })); return Plot.plot({ title: "20대", insetLeft: 10, insetTop: 10, width: 800, height: 400, marginLeft: 60, // x: { domain: [0, 100] }, y: { label: "", percent: false, nice: true, tickFormat: (d) => bigFormat(d) }, x: { tickFormat: (d) => String(d) }, marks: [ Plot.ruleY([0], { stroke: "#aaa" }), Plot.areaY(data, { x: "year", y: (d) => d.g20s, fill: "#aaa5" // fill: "#6dc0ed55" // title: (d) => `${d.age}세\n성비 ${d3.format(".0f")(d.genderRatio)}` }), // Plot.areaY(data, { // x: "year", // y: (d) => d.g20s, // // fill: "#aaa5", // fill: "#6dc0ed55" // // title: (d) => `${d.age}세\n성비 ${d3.format(".0f")(d.genderRatio)}` // }), // Plot.lineY(data, { // x: "year", // y: (d) => d.g20s, // // stroke: "#444", // stroke: "#6dc0ed" // // title: (d) => `${d.age}세\n성비 ${d3.format(".0f")(d.genderRatio)}` // }), Plot.lineY(data, { x: "year", y: (d) => d.g20s, stroke: "#444" // stroke: "#6dc0ed" // title: (d) => `${d.age}세\n성비 ${d3.format(".0f")(d.genderRatio)}` }), Plot.ruleX(data, { filter: (d) => d.year === selectYear, x: "year", y: (d) => d.g20s, strokeWidth: 2, stroke: "#E97276" }), // Plot.text(data, { // filter: (d) => d.year % 10 === 0, // x: "year", // y: (d) => d.g20s, // text: (d) => bigFormat(d.g20s), // dy: -10, // fill: "#4448", // stroke: "#fff" // }), Plot.text(data, { filter: (d) => d.year % 10 === 0, x: "year", y: (d) => d.g20s, text: (d) => bigFormat(d.g20s), dy: -10, fill: "#4448", stroke: "#fff" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: 0, text: (d) => `${d.year}`, dy: 25, fill: "#E97276" }), Plot.text(data, { filter: (d) => d.year === selectYear, x: "year", y: (d) => d.g20s, text: (d) => bigFormat(d.g20s), dy: -10, fill: "#444", stroke: "#fff" }) // Plot.text( // [ // { label: "노동인구", x: 2000, y: 18000000 }, // { label: "20대", x: 2000, y: 2000000 } // ], // { // x: "x", // y: "y", // text: "label", // dy: -10, // fontSize: 20, // fill: "#4445" // // stroke: "#fff" // } // ) ] }); }43:Tba8,초등학교학령인구 = { const data = byYear .map((d) => ({ ...d, birthRate: (d.data[0].pop / d.pop) * 1000, g20s: d3.sum( d.data.filter((a) => a.age >= 20 && a.age < 30), (a) => a.pop ) })) .filter((d) => d.year >= 2000 && d.year <= 2040); const colorFunc = (d) => d3.interpolateViridis(1 - d); const selectYears = [selectYear, 2008]; function ageGroup(name, ageExt, color) { const ageFilterFunc = (d) => d3.sum( d.data .filter((a) => a.age >= ageExt[0] && a.age <= ageExt[1]) .map((a) => a.pop) ); const ageFilterPop = (d) => bigFormat( d3.sum( d.data .filter((a) => a.age >= ageExt[0] && a.age <= ageExt[1]) .map((a) => a.pop) ) ); return [ Plot.areaY(data, { x: "year", y: ageFilterFunc, fill: color + "22" }), Plot.lineY(data, { x: "year", y: ageFilterFunc, stroke: color }), Plot.ruleX(data, { filter: (d) => selectYears.includes(d.year), x: "year", y: ageFilterFunc, strokeWidth: 1, stroke: "#E97276" }), Plot.text(data, { filter: (d) => d.year % 5 === 0, x: "year", y: ageFilterFunc, text: ageFilterPop, dy: -10, fill: "#4448", stroke: "#fff5" }), Plot.text(data, { filter: (d) => selectYears.includes(d.year), x: "year", y: ageFilterFunc, text: ageFilterPop, dy: -10, fill: "#444", stroke: "#fffa" }) ]; } return Plot.plot({ title: "초등학교 학령인구", insetLeft: 10, insetTop: 10, width: 800, height: 400, marginLeft: 60, // x: { domain: [0, 100] }, y: { label: "", percent: false, nice: true, tickFormat: (d) => bigFormat(d) }, x: { tickFormat: (d) => String(d) }, marks: [ Plot.ruleY([0], { stroke: "#aaa" }), ...ageGroup("초등학생", [7, 12], "#444444"), // ...ageGroup("노인인구", [65, 100], colorFunc(0.9)), // ...ageGroup("20대", [20, 29], colorFunc(0.25)), // ...ageGroup("10대", [10, 19], colorFunc(0.1)), Plot.text( [ { label: "초등학생", x: 2015, y: 1500000, color: "#4445" } // { label: "노인인구", x: 2050, y: 8000000, color: colorFunc(0.9) }, // { label: "20대", x: 1985, y: 4000000, color: colorFunc(0.25) } ], { x: "x", y: "y", text: "label", dy: -10, fontSize: 20, fill: (d) => d.color, stroke: "#fff3" } ), Plot.text(data, { filter: (d) => selectYears.includes(d.year), x: "year", y: 0, text: (d) => `${d.year}`, dy: 13, fill: "#E97276", stroke: "#fff" }) ] }); }44:Tce4,주택매입주고객인구 = { const data = byYear .map((d) => ({ ...d, birthRate: (d.data[0].pop / d.pop) * 1000, g20s: d3.sum( d.data.filter((a) => a.age >= 20 && a.age < 30), (a) => a.pop ) })) .filter((d) => d.year >= 2000 && d.year <= 2070); const colorFunc = (d) => d3.interpolateViridis(1 - d); const selectYears = [2024, 2035, 2050]; function ageGroup(name, ageExt, color) { const ageFilterFunc = (d) => d3.sum( d.data .filter((a) => a.age >= ageExt[0] && a.age <= ageExt[1]) .map((a) => a.pop) ); const ageFilterPop = (d) => d3.sum( d.data .filter((a) => a.age >= ageExt[0] && a.age <= ageExt[1]) .map((a) => a.pop) ); const basePop = ageFilterPop( data.filter((d) => d.year === selectYears[0])[0] ); const showAgeFilterPop = (d) => { const pop = ageFilterPop(d); const diffRatio = (pop - basePop) / basePop; return `\n${bigFormat(pop)}`; }; const showAgeFilterPop2 = (d) => { const pop = ageFilterPop(d); const diffRatio = (pop - basePop) / basePop; return diffRatio ? `${d3.format("+.0%")(diffRatio)}` : ""; }; return [ Plot.areaY(data, { x: "year", y: ageFilterFunc, fill: color + "22" }), Plot.lineY(data, { x: "year", y: ageFilterFunc, stroke: color + "88" }), Plot.ruleX(data, { filter: (d) => selectYears.includes(d.year), x: "year", y: ageFilterFunc, strokeWidth: 1, stroke: "#E97276" }), // Plot.text(data, { // filter: (d) => d.year % 5 === 0, // x: "year", // y: ageFilterFunc, // text: ageFilterPop, // dy: -10, // fill: "#4448", // stroke: "#fff5" // }), Plot.text(data, { filter: (d) => selectYears.includes(d.year), x: "year", y: ageFilterFunc, text: showAgeFilterPop, dy: -15, fill: "#444", stroke: "#fffa", fontSize: 12 }), Plot.text(data, { filter: (d) => selectYears.includes(d.year), x: "year", y: ageFilterFunc, text: showAgeFilterPop2, dy: -25, fill: "#d14d41", stroke: "#fffa", fontSize: 16 }) ]; } return Plot.plot({ title: "주택 구입 주연령 인구 (30-50대)", insetLeft: 10, insetTop: 10, width: 800, height: 400, marginLeft: 60, // x: { domain: [0, 100] }, y: { label: "", percent: false, nice: true, tickFormat: (d) => bigFormat(d) }, x: { tickFormat: (d) => String(d), label: "" }, marks: [ Plot.ruleY([0], { stroke: "#aaa" }), ...ageGroup("주택매입", [30, 60], colorFunc(0.6)), // ...ageGroup("노인인구", [65, 100], colorFunc(0.9)), // ...ageGroup("20대", [20, 29], colorFunc(0.25)), // ...ageGroup("10대", [10, 19], colorFunc(0.1)), Plot.text(data, { filter: (d) => selectYears.includes(d.year), x: "year", y: 0, text: (d) => `${d.year}`, dy: 13, fill: "#E97276", stroke: "#fff" }) ] }); }45:T839,{ const pops = expectPop.filter((d) => d.year === 2024); const total = d3.sum(pops, (d) => d.pop); const old = d3.sum( pops.filter((d) => d.age >= 57), (d) => d.pop ); const young = d3.sum( pops.filter((d) => d.age <= 51), (d) => d.pop ); // return [total, old, young, old / total, young / total] return Plot.plot({ title: "한국인 나이 인식", caption: "한국갤럽 : 노인과 젊은이, 나이에 대한 인식 2023", width: 800, marks: [ Plot.ruleY([0]), Plot.areaY(pops, { x: "age", y: "pop", y2: 0, fill: "#a5c0d9", curve: "catmull-rom" }), Plot.areaY( pops.filter((d) => d.age <= 51), { x: "age", y: "pop", y2: 0, fill: "#67abe6", curve: "catmull-rom" } ), Plot.areaY( pops.filter((d) => d.age >= 57), { x: "age", y: "pop", y2: 0, fill: "#ddd", curve: "catmull-rom" } ), Plot.ruleX([45], { stroke: "#fff8" }), Plot.text( [ { text: "아직 젊음\n59%", color: "#6fa1cd", age: 35 }, { text: "애매\n9%", color: "#555", age: 54 }, { text: "이제 늙었다\n32%", color: "#aaa", age: 67 } ], { y: (d) => 300000, x: "age", dy: 0, // textAnchor: "start", text: "text", fill: "#fff", fontSize: 20 // stroke: "#fff" } ), Plot.text( [ { text: "45\n중위연령", color: "#6fa1cd", age: 45, y: 900000 }, { text: "51\n", color: "#6fa1cd", age: 51, y: 950000 }, { text: "57\n", color: "#6fa1cd", age: 57, y: 900000 } ], { y: (d) => 0, x: "age", dy: 18, // textAnchor: "start", text: "text", fill: "#d14d41", stroke: "#fff", fontSize: 12, fontWeight: 700 // stroke: "#fff" } ) ] }); }46:T478,byYear = d3 .groups(expectPop, (d) => d.year) .map(([year, data]) => ({ year, data })) .sort((a, b) => d3.ascending(a.year, b.year)) .map((d) => ({ ...d, pop: d3.sum(d.data, (d) => d.pop), male: d3.sum(d.data, (d) => d.male), female: d3.sum(d.data, (d) => d.female), 노인인구: d3.sum( d.data.filter((d) => d.age >= 65), (d) => d.pop ), 노인여성: d3.sum( d.data.filter((d) => d.age >= 65), (d) => d.female ), 노동인구: d3.sum( d.data.filter((d) => d.age >= 25 && d.age < 65), (d) => d.pop ), 대학취업: d3.sum( d.data.filter((d) => d.age >= 19 && d.age < 25), (d) => d.pop ), 초중고: d3.sum( d.data.filter((d) => d.age >= 7 && d.age <= 18), (d) => d.pop ), 영유아: d3.sum( d.data.filter((d) => d.age < 7), (d) => d.pop ), 어린이청소년: d3.sum( d.data.filter((d) => d.age <= 18), (d) => d.pop ), 주택매입: d3.sum( d.data.filter((d) => d.age <= 35 && d.age < 55), (d) => d.pop ) })) .sort((a, b) => d3.ascending(a.year, b.year))47:[{"id":"b91f9887cde5ba002d5fdac291c5879db3f20bd2a4586b357dd77c7b3da0a82b14606d2bdd0b75638b1e20f2d85915ebc4c051c1e45728f07034b8a3b590a061","href":"https://static.observableusercontent.com/files/b91f9887cde5ba002d5fdac291c5879db3f20bd2a4586b357dd77c7b3da0a82b14606d2bdd0b75638b1e20f2d85915ebc4c051c1e45728f07034b8a3b590a061","name":"성_및_연령별_추계인구_1세별__5세별____전국_20240709063939.csv","type":"text/csv","lastModified":1720474795720.505,"size":658521},{"id":"2dcdb95259ad45d24936928ee66180feb650e985626994887e90171f5f47f38577c2612b46f3147109e71247492748bbcfe0ae553147641c4067a5af9e9de5d0","href":"https://static.observableusercontent.com/files/2dcdb95259ad45d24936928ee66180feb650e985626994887e90171f5f47f38577c2612b46f3147109e71247492748bbcfe0ae553147641c4067a5af9e9de5d0","name":"성_및_연령별_추계인구_1세별__5세별____전국_20240709064210.csv","type":"text/csv","lastModified":1720474946674.873,"size":671045},{"id":"3275f60907d9eed823f3b9bb7de949aaf8b80f0bbdef006043d53fb981403b9ac5b9f72396034ee3de6800d069bf4252bbf2ea68f5e2592b895927951fe2ded4","href":"https://static.observableusercontent.com/files/3275f60907d9eed823f3b9bb7de949aaf8b80f0bbdef006043d53fb981403b9ac5b9f72396034ee3de6800d069bf4252bbf2ea68f5e2592b895927951fe2ded4","name":"popData.json","type":"application/json","lastModified":1674948522369.679,"size":673147}] 2f:{"title":"대한민국 인구 피라미드","cells":[{"id":0,"value":"# 대한민국 인구 피라미드","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"#### 데이터 출처 [통계청 장래인구 추계](https://kosis.kr/statisticsList/statisticsListIndex.do?parentId=A.1&vwcd=MT_ZTITLE&menuId=M_01_01#content-group) \n중위 추계(기본 추계: 출산율-중위 / 기대수명-중위 / 국제순이동-중위)\n- 2021년 12월에 공표한 장래인구추계 자료.\n- 매년 7월 1일 시점 자료.\n- 대상 인구는 국적과 상관없이 대한민국에 상주하는 인구.(외국인 포함)\n- 1960~2020년까지는 확정인구이며, 2021년 이후는 다음 인구추계시 변경될 수 있음.","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"viewof selectYear = Inputs.range(expectYears, {\n step: 1,\n value: 2025,\n label: \"표시연도\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"viewof showRefYear = Inputs.radio([\"가리기\", \"기준연도\", \"출생인구\"], {\n value: \"기준연도\",\n label: \"비교\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"viewof refYear = Inputs.text({ value: 2023, label: \"비교연도\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"viewof ratioType = Inputs.radio([\"연령별\", \"연령이상\"], {\n value: \"연령별\",\n label: \"성비\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1354,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":1352,"value":"byYear","pinned":true,"hidden":false,"mode":"ojs"},{"id":1127,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":1210,"value":"$44","pinned":false,"hidden":false,"mode":"ojs"},{"id":1074,"value":"{\n const thisYearData = expectPopData.filter((d) => d.year === selectYear);\n const totalPop = d3.sum(thisYearData, (d) => d.pop);\n const young =\n d3.sum(\n thisYearData.filter((d) => d.age < 25),\n (d) => d.pop\n ) / totalPop;\n const old =\n d3.sum(\n thisYearData.filter((d) => d.age >= 65),\n (d) => d.pop\n ) / totalPop;\n return { young, old };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"$45","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"selectedYearData = byYear.find((d) => d.year == selectYear)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"한국갤럽 나이 인식 : https://www.gallup.co.kr/gallupdb/reportContent.asp?seqNo=1499","pinned":false,"hidden":false,"mode":"md"},{"id":503,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":756,"value":"$46","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"expectPop = FileAttachment(\"popData.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"expectPop2022 = {\n const data = await FileAttachment(\n \"성_및_연령별_추계인구_1세별__5세별____전국_20240709064210.csv\"\n ).csv();\n return data.map((d) => ({\n year: +d.시점,\n age: parseInt(d.연령별),\n male: +d.남자,\n female: +d.여자,\n pop: +d.전체\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"expectPopData = [...expectPop.filter((d) => d.year < 2022), ...expectPop2022]\n .map((d) => {\n return [\"남자\", \"여자\"].map((g) => ({\n ...d,\n gender: g,\n both: d.pop,\n pop: g === \"남자\" ? d.male : d.female\n }));\n })\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"expectYears = d3.extent(expectPopData, (d) => d.year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"## Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"function getNumber(str) {\n return +str.replace(/[^\\d]/, \"\") * 1000;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"function autoType(object) {\n const fixtz =\n new Date(\"2019-01-01T00:00\").getHours() ||\n new Date(\"2019-07-01T00:00\").getHours();\n // console.log(object);\n for (var key in object) {\n var value = object[key].trim(),\n number,\n m;\n console.log(key, value);\n if (!value) value = null;\n else if (value === \"true\") value = true;\n else if (value === \"false\") value = false;\n else if (value === \"NaN\") value = NaN;\n else if (!isNaN((number = +value))) value = number;\n else if (!value.match(/[^\\d,]/)) value = +value.replace(/,/g, \"\");\n else if (\n (m = value.match(\n /^([-+]\\d{2})?\\d{4}(-\\d{2}(-\\d{2})?)?(T\\d{2}:\\d{2}(:\\d{2}(\\.\\d{3})?)?(Z|[-+]\\d{2}:\\d{2})?)?$/\n ))\n ) {\n if (fixtz && !!m[4] && !m[7])\n value = value.replace(/-/g, \"/\").replace(/T/, \" \");\n value = new Date(value);\n } else continue;\n object[key] = value;\n }\n return object;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"import { Plot } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"function bigFormat(n) {\n const 조 = n > 10 ** 12 ? parseInt(n / 10 ** 12) % 10 ** 4 : 0;\n const 억 = parseInt(n / 10 ** 8) % 10 ** 4;\n const 만 = parseInt(n / 10 ** 4) % 10 ** 4;\n\n return (\n (조 >= 1 ? d3.format(\",.0f\")(조) + \"조 \" : \" \") +\n (억 >= 1 ? d3.format(\",.0f\")(억) + \"억 \" : \" \") +\n (n < 10 ** 10 && 만 ? d3.format(\",.0f\")(만) + \"만 \" : \" \")\n );\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W47","stdlib":"1","titling":"auto"}