前言

今天要來畫縣市人口年齡圖，要把指定縣市的人口年齡畫在同一張圖比較。

取得資料

• 複製 110 年縣市人口統計資料
• 把數字的逗號間隔移除
  
• 檔案轉換成 utf8 編碼的 csv 檔案

開始畫圖

• 上傳檔案到 observable
  
• 使用 flatMap() 把資料整理成三個欄位

ages = ["0~9歲", "10~19歲", "20~29歲", "30~39歲", "40~49歲", "50~59歲", "60~69歲", "70~79歲", "80~89歲", "90~99歲", "100歲以上"]

data = ages.flatMap(
    年齡 => taiwan_city_population1.map(
        d => ({
            縣市: d.縣市,
            年齡,
            人數: Number(d[年齡])
        })
    ))

• 選擇 Faceted chart，修改參數
  

Plot.plot({
  facet: {
    data: data,
    x: "縣市"
  },
  marks: [
    Plot.frame(),
    Plot.barX(data, {x: "人數", y: "年齡"})
  ]
})

• 原始圖
  • 左邊文字消失
  • 直條圖顏色相同不易辨別
  • 直條圖長度短不易看出差異
  • 人數間隔太大
    
• 美化圖

Plot.plot({
  marginLeft: 70,
  facet: {
    data: data,
    y: "縣市",
    label: null // 不顯示縣市座標名稱
  },
   x: {
    domain: ["0~9歲", "10~19歲", "20~29歲", "30~39歲", "40~49歲", "50~59歲", "60~69歲", "70~79歲", "80~89歲", "90~99歲", "100歲以上"]
  },
  y: {
    domain: [0, 700000],
    tickFormat: "s",
    grid: true
  },
  marks: [
    Plot.frame(),
    Plot.barY(data, {x: "年齡", y: "人數", fill: "年齡"})
  ]
})

結論

分面式圖在條件相同但比較群體不同時可以做比較，容易看出不同群體之間的差異。