regexp 的散點圖繪圖應用實例

一、 機車強制險比較表

哪一家公司的機車強制險理賠申訴率最低呢? 

cd ~
wget https://polida.com.tw/post/motorcycle-insurance-comparison -O insurance.html
html2csv.py insurance.html
html2csv.py insurance.html | less
# 按 q 離開
html2csv.py insurance.html | wc
html2csv.py insurance.html | tail -n 20
html2csv.py insurance.html | tail -n 20 > ins.csv
head -n 8 ins.csv
perl -pe 's/(\d),(\d{3})"/$1$2"/g' ins.csv | head -n 8
perl -pe 's/(\d),(\d{3})"/$1$2"/g ; s/(\d),(\d{6})"/$1$2"/g' ins.csv | head -n 8
perl -pe 's/(\d),(\d{3})"/$1$2"/g ; s/(\d),(\d{6})"/$1$2"/g ; s/"//g' ins.csv > insurance.csv

以上最後一句是為了把數字裡面的逗點及外面的雙引號刪掉。 接著下： nano insurance.csv 編輯檔案， 去除多餘的列， 並把標題列改成： company,complaint,total,rate

A. 簡單版： rawgraph

以下假設你已略熟 rawgraphs 的操作。

  1. 點 "Use it now!"
  2. 把 insurance.csv 上傳或貼到 rawgraphs 資料段落， 確認 complaint、 total、 rate 都有正確被認成是數字欄位 (以 # 開頭)。
  3. "Choose a chart" 段落： 選 bubble chart。
  4. "Mapping" 段落： 把 "# total" 拉到 "X Axis"， "# complaint" 拉到 "Y Axis"， "Aa company" 拉到 "Label"。
  5. "Customize" 段落： 微調你的圖的外roorrr。
  6. 下載 svg。

這個例子說明： 當你有興趣的數值欄位之間有這樣的關係時： c = a / b 散點圖正好可以用 X 與 Y 兩軸同時呈現三個欄位， 把圓圈大小留給第四個數值欄位。 電價貴不貴 這個例子也一樣。

B. 強大版： scatplot

再用 nano 建一個新的檔案 insurance.json 並且把以下內容貼進去： 

{
  "source": {
    "csv": "mo-ins/motorcycle-insurance.csv",
    "textcols": ["company"],
    "pkey": "company"
  },
  "plotly": {
    "layout": {
      "title": "機車保險簽單契約總件數 (total) vs 申訴件數 (complaint)"
    },
    "maintrace": {
      "xaxis": { "expr": "total" },
      "yaxis": { "expr": "complaint" },
      "size": { "expr": "20" },
      "maintext": "",
      "hovertext": "company"
    }
  }
}

再來， 下載 scatplot、 建一個目錄， 把資料檔 insurance.csv 以及設定檔 insurance.json 放進去： 

wget -O ~/scatplot.zip https://github.com/ckhung/scatplot/archive/refs/heads/master.zip
unzip -v ~/scatplot.zip       # 查看 zip 檔內容
cd ~/public_html
unzip ~/scatplot.zip          # 解壓縮
mv scatplot-master scatplot   # 把目錄 (資料夾) 名稱改短一點
cd scatplot/
mkdir mo-ins
cp ~/insurance.* mo-ins/
ls -l mo-ins/

然後用瀏覽器查看： http://.../~s411xxxxxxx/scatplot/?c=mo-ins/insurance.json

二、 希臘式優格比較表

哪個品牌的希臘式優格低糖、 低脂、 高蛋白呢? 

cd ~
wget -O yogurt.html https://saving-coupon.com/greek-yogurt-sugar-free/
html2csv.py yogurt.html
html2csv.py yogurt.html | fromdos    # 把原本 windows/dos 的檔案格式改成 linux 格式
html2csv.py yogurt.html | fromdos | cut -d, -f 1,3,5,6
html2csv.py yogurt.html | fromdos | cut -d, -f 1,3,5,6 | perl -pe 's#/#,#g'
html2csv.py yogurt.html | fromdos | cut -d, -f 1,3,5,6 | perl -pe 's#/#,#g' > yogurt.csv
nano yogurt.csv
# 把多餘的列刪掉

這個 csv 檔一樣可以上傳到 rawgraphs 繪圖， 或是搭配一個 .json 設定檔， 用 scatplot 繪圖。 事實上剛剛下載回來、 解壓縮的 ~/public_html/scatplot/ 裡面就已經有 yogurt.csv 跟 yogurt.json 。 試著從瀏覽器把它打開來觀察。