前言

大家好，我是任職於工業區、傳產的化工工程師，沒有念過資訊相關的科系，只有上網查查資料和問問周遭的朋友，碰過一點點前端，今年預計使用簡單的方式學習畫畫長條圖、圓餅圖。如果你也沒寫過程式，希望這篇文章能夠幫助到你，幫助脫離畫圖苦海。

預備知識

• 畫過直條圖、折線圖等等的

  • 如果你用過微軟老大哥的付費軟體 Office 系列，或者從來沒有付錢買過微軟...應該都有拿它來畫過一些圖表...
  • 而且小學數學課應該會教直條圖之類的

  
  喜歡哪一種運動男...？

• 稍微看得懂網頁的原始碼

  • 會一點點 HTML 和 CSS
  • JavaScript 的知識的話，因為過於龐大淵博，大多都是用到再來學！

• 剩下的看線上文件就夠了

前置作業

1. 先不裝東西，用線上編輯器看看能做些什麼。聽說 d3 很潮很炫，看了他們的 文件 介紹到 Observablehq 這個線上協作環境，先前也沒用過，來看看他能做些什麼。只不過，我會先寫 Observable Plot 就是了！

   • Observablehq
   • 註冊一個帳號吧！！
     

2. 取得資料

   • 身為保安宮子民，上網找個溪湖戶政事戶所提供的人口資料來看看...
   • 
   • 這個資料長得不像資訊人說的那種 json 或是 xml 是已經被依照規則擺放的。像這種 excel 資料喔，就很像我們傳產從業務手上、或是同事手上遞過來的資料。
   • 他需要被處理！！

   
   聖嚴寫道：面對資料、接受資料、處理資料、放下資料，就是要我們心平氣和地修改成程式好取用的格式，像是 csv。

   • 怎麼做？ 剪下、貼上、存成 CSV

3. 需要知道什麼是 csv

   • 如果你第一次看到 csv 而且不知道是什麼的話，不用緊張。用 Excel 或是記事本都可以生成 csv。
   • 可以看看 Excel 表格匯出為 CSV 檔案教學
   • 你可以看到這個 csv 檔很單純，就是一張表格。沒有顏色、底色或是跨多個欄位的表頭。
     

4. 注意編碼問題

   • 在 Windows 的 Excel 存成 csv 時，編碼要記得做轉換，由 Big5 變成 UTF-8
   • 現在的 Excel 已經改版改到我不知道去哪裡做這個動作；建議安裝個好用的文字編輯器 Notepad++
     

操作

新增一個空白記事本

• 在畫面右上角，會有一個「New」的按鈕
  
• 選「Blank」(空白)
  

匯入資料

• 在右邊，有個迴紋針樣子的按鈕，並且指定檔案來源為「File attachments」，把我們前面處理好變成 csv 的溪湖人口檔案丟上來吧！
  
• 完成後會變成這樣
  
• 你也可以在編輯器視窗左邊找到「+」並且新增檔案
  
• 你的記事本裡面會多出一個和檔案名稱同名的變數
  

產生圖表

• 在記事本新的一行左邊開頭的地方，有個「+」可以新增內容。選「Bar chart」
  
• 接著你會看到一段程式碼自己跑出來了...灰底色的部分，是提示你去修改的地方
  
• 先把 alphabet 改成 xi... 跳出好多選項可以選，選擇 xihu_population
  
• 然後是 x 和 y 軸分別對應的資料欄位
  • x 應當是每個村里名 「村名」
  • y 則是人口數量 「合計」
• 它長得沒有那麼好看，字都糊在一起了
  

調整外觀

• 使用前應詳閱公開說明書，你不妨參考一下 Observablehq Plot 放在 GitHub 上的 README.md
• 接著就是客製化時間了...到這邊開始會和 Office 有很大的不同
  • grid
    • 加個網格，方便估值。
  • marginLeft
    • 左邊的數字爆框了，讓他縮進來一些。
  • inset 系列，像是 insetTop
    • 圖表內的內距，由於光平里人太多一飛沖天了，所以留一些空間。
  • width
    • 因為這個中文字也不是很大，所以要解決文字糊在一起，應該把整個直條圖弄寬。
  • barY 的 fill
    • 黑色的長棒，如果最後使用列印機印出來的話，他會很黑很恐怖，所以要改個淡一點顏色。
  • frame()
    • 最後加個外框
      

下載圖表

• 接著，把剛畫好的圖片另存起來。 如果你要放到微軟的 PowerPoint 裏面，大概就是用這個方法吧！！
  

結論

關於長條圖的功用，拿來比較有相同屬性的不同個體。
對於喜歡比較的婆婆媽媽阿伯阿叔來說，真的是超讚的！！