前言

身為保安宮虔誠的信徒，今天依舊來畫保安宮的子民人數，參考
【Day 3】分群的直條圖，要把這張圖做個修改，改畫成堆疊的長條圖。

• 比較 分群長條圖 和 堆疊長條圖
  • 分群長條圖
    • 可以比較男性、女性的人數多寡
  • 堆疊長條圖
    • 可以比較男性、女性占整體人數的多寡

開始畫圖

• 參考 Observable Stack 範例程式碼
• 根據 【Day 3】的資料畫圖

Plot.plot({
  x: {
    type: "band",
    label: null // 不顯示 x 軸 "村里"
  },
  marks: [
    Plot.barY(village_gender_population, {x: "村名", y: "人數", fill: "性別"}),
    Plot.ruleY([0])
  ]
})

• 美化圖片
  • 上面的圖 x 軸字重疊
  • y 軸範圍太小

Plot.plot({
  width: 1000, // 指定圖寬度
  height: 400, // 指定圖高度
  marginBottom: 50, // 指定下邊界距離
  color: {
    domain: ["男性", "女性"], 
    range: ["#2828FF", "#FF79BC"], // 指定分類顏色
    legend: true, // 標示顏色代表的分類
    labelAnchor: "center"
  },
  x: {
    type: "band",
    label: null, // 不顯示 x 軸 "村名"
    domain: d3.sort(xihu_population, d => -d.合計).map(d => d.村名), // 總人數由多到少排序
    tickRotate: -45, // 旋轉 x 軸 tick 角度
    tickFormat: d => d.slice(0,2) // 顯示村名前兩個字
  },
  y: {
    domain: [0, 7000], // 界定 y 軸範圍
    tickFormat: "s", // 以單位 "千(人) k" 顯示
    grid:true,
    ticks: 7, // 人數每間隔一千人顯示標示
    label: "人數"
  },
  marks: [
    Plot.barY(village_gender_population, {x: "村名", y: "人數", fill: "性別"}),
    Plot.ruleY([0]),
    Plot.text(xihu_population, {x: "村名", y: "合計", text: d => `${d.合計}`, dy: -10, textAnchor: "middle", fontSize: 14,}), // 顯示每個里的總人數
    Plot.frame(), // 圖加上邊框
  ],
   caption: "西湖村里人口數統計",
})

• 完成圖
  

結論

堆疊長條圖可以看出各里的總人數，各裡的男女面積比例各佔總人數的一半。

參考
https://observablehq.com/@observablehq/plot-cheatsheets-scales