前言

今天要畫的是直方圖，這跟Day 1介紹長條圖看起很像，但是有什麼差別呢?
讓我們繼續看下去

• 直方圖( Histogram )
  • 統計學上常用的分析方法，表示連續性資料的分布情形，橫軸是連續性的資料(如時間、年齡等)，有順序之分。
• 長條圖(Bar chart)
  • 資料是離散的，沒有順序之分，用來比較類別之間數值的大小

準備資料

今年11月26日就要舉行九合一選舉，選前最重要的就是各個候選人的民調。
沒錯，今天就是要畫候選人的民調，但是要畫誰的呢?
讓我們看看下圖熱議關鍵字，面積最大的圓圈就是今天的登場人物了。

資料來源: udn

取得資料

• 到TVBS 民調中心下載 2022 新竹市長選情民調
  

• 選擇需要的資料
  

開始畫圖

• 到 observable 的搜尋框輸入 histogram
  
• 選擇一個別人寫好的範例，參考程式碼做修改
  https://observablehq.com/@fil/irregular-bins-histogram
• 建立資料

commute = d3.csvParse(
// 最小值, 最大值, 支持度, 標記
  `lo,hi,approval_rate,annotation
20,29,46,"← 電訪 1,040 位 20 歲以上新竹市民，20-29 歲支持度最高"
30,39,34
40,49,30,
50,59,30
60,125,9
`,
  d3.autoType
)

• 複製程式碼，修改樣式

Plot.plot({
  x: {
    label: "年齡 →",
    ticks: 10, // 間隔 10
  },
  y: {
    label: "↑ 支持度",
    transform: (n) =>
      n / 10,
    // 標示格式
    tickFormat: "%",
    nice: true,
    grid: true,
    // 指定 y 軸範圍
    domain: [0, 1],
  },

  // 標題
  caption: "2022 新竹市長候選人高虹安選情民調",
  marks: [
    Plot.rectY(Hsinchu_mayor, {
      x1: "lo",
      x2: "hi",
      y: (d) => d.approval_rate / (d.hi - d.lo),
      fill: "steelblue",
      insetRight: 1
    }),
    Plot.text(Hsinchu_mayor, {
      filter: "annotation",
      text: "annotation",
      x: "hi",
      y: (d) => d.approval_rate / (d.hi - d.lo),
      dx: 2,
      dy: 8,
      textAnchor: "start",
      fontSize: 12
    }),
    Plot.ruleY([0])
  ],
  height: 240,
  width: 400
})

• 完成圖
  

結論

從圖形可以知道 x 軸是年齡，由小到大排序，y 軸是支持度，支持度最高是落在 20-29 歲的年齡層。