Public
Edited
Aug 7, 2023
1 fork
Plot.plot({
x: { nice: true },
y: { nice: true },
color: { nice: true, legend: true, scheme: "Accent" },
grid: true,
marks: [
Plot.frame({ stroke: "pink" }),
Plot.ruleX([0], { stroke: "pink" }),
Plot.ruleY([goodYearsBottom, goodYearsTop], { stroke: "red" }),
Plot.ruleY([goodYearsBottom - 15], { stroke: "gray" }),
Plot.line(populationDataPerAge, {
y: "age",
x: (d) => (d.gender === "female" ? -d.value : d.value),
stroke: "gender",
strokeWidth: (d) =>
(d.age > goodYearsBottom - 15) & (d.age < goodYearsTop) ? 4 : 2,
tip: true
})
]
})
femalesWithGoodYearsInNext15Years
Type Table, then Shift-Enter. Ctrl-space for more options.
getFemalesInGoodYears = (offset) => {
const bottom = goodYearsBottom - offset,
top = goodYearsTop - offset,
value = d3.sum(
populationDataPerAge
.filter(
(d) => (d.gender === "female") & (d.age > bottom) & (d.age < top)
)
.map((d) => d.value)
);
return { bottom, top, value };
}
goodYearsBottom = 20
goodYearsTop = 35
thisYear = new Date().getFullYear()
populationDataPerAge = {
const { data } = populationRawData,
data1 = [],
yearOffset = thisYear - 2020,
source = "real";
{
data
.filter(({ age }) => age.startsWith("0") | age.startsWith("100"))
.map(({ age, gender, value }) => {
age1 = parseInt(age.split("岁")[0]);
data1.push(
Object.assign(
{ source },
{ age: age1 + yearOffset, birthYear: 2020 - age1, gender, value }
)
);
});
}
{
var age1, age2, n;
data
.filter(
({ age }) =>
age.endsWith("岁") & !age.startsWith("0") & !age.startsWith("100")
)
.map(({ age, gender, value }) => {
age1 = parseInt(age.split("-")[0]);
age2 = parseInt(age.split("-")[1].split("岁")[0]);
n = age2 - age1 + 1;
for (let i = age1; i < age2 + 1; ++i) {
data1.push(
Object.assign(
{ source },
{
age: i + yearOffset,
birthYear: 2020 - i,
gender,
value: parseInt(value / n)
}
)
);
}
});
}
data1.sort((a, b) => a.age - b.age);
return data1;
}
populationDataPerAge
Type Table, then Shift-Enter. Ctrl-space for more options.
numberText = "全国 1409778724 721416394 688362330 11988057 6312409 5675648 65895831 34656922 31238909 90244056 48017458 42226598 85255994 45606790 39649204 72684140 39053343 33630797 74941675 39675995 35265680 91847332 48162270 43685062 124145190 63871808 60273382 99012932 50932037 48080895 92955330 47632694 45322636 114224887 58191686 56033201 121164296 61105470 60058826 101400786 50816026 50584760 73382938 36871125 36511813 74005560 36337923 37667637 49590036 24162733 25427303 31238849 14752433 16486416 20382878 9157003 11225875 10826530 4426091 6400439 3652749 1367594 2285155 819812 271455 548357 118866 35129 83737"
titleText = "地 区 合 计 0岁 1-4岁 5-9岁 10-14岁 15-19岁 20-24岁 25-29岁 30-34岁 35-39岁 40-44岁 45-49岁 50-54岁 55-59岁 60-64岁 65-69岁 70-74岁 75-79岁 80-84岁 85-89岁 90-94岁 95-99岁 100岁及以上 "
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
