Public
Edited
Nov 17, 2023
data = FileAttachment("data.json").json()
yCounts = [];
years=['牡羊座','金牛座','雙子座','巨蟹座','獅子座','處女座','天秤座','天蠍座','射手座','摩羯座','水瓶座','雙魚座']
{
yCounts.length = 0; //將yCounts清空
for (var y=0; y<years.length; y++) {
//所有年份都建立兩個Object，一個存放男性資料，一個存放女性資料
yCounts.push({Constellation:years[y], gender:"male", count:0});
//Object包含：1. 出生年，2.男性，3.人數(設為0)
yCounts.push({Constellation:years[y], gender:"female", count:0});
//Object包含：1. 出生年，2.女性，3.人數(設為0)
}
data.forEach (x=> {
var i = (x.Constellation)*2 + (x.Gender== "男" ? 0 : 1);
yCounts[i].count++;
//讀取data array，加總每個年份出生的人
})
return yCounts
}
Plot.plot({
grid: true,
x: {domain: ['牡羊座','金牛座','雙子座','巨蟹座','獅子座','處女座','天秤座','天蠍座','射手座','摩羯座','水瓶座','雙魚座']},
y: {label: "count"},
marks: [
Plot.ruleY([0]),
Plot.barY(yCounts, {x: "Constellation", y: "count", tip: true , fill:"gender"}),
]
});
Plot.plot({
x: {domain: ['牡羊座','金牛座','雙子座','巨蟹座','獅子座','處女座','天秤座','天蠍座','射手座','摩羯座','水瓶座','雙魚座'],label: "Constellation" },
y: {grid: true, label: "count"},
marks: [
Plot.rectY(data, Plot.binX({y:"count"}, { x:"Constellation", interval:1, fill:"Gender", tip: true })),
]
})
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.
