在網頁上發佈資料視覺化圖表 - 方案評估與技術問題全記錄

更新於 發佈於 閱讀時間約 6 分鐘
raw-image

前情提要

事情是這樣的,這個網站是用WordPress建置,本來放在GoDaddy虛擬主機上,當時的方案簽了三年,在大約一年半的時候,我決定把網站搬到SiteGround上。為了不讓GoDaddy的主機空轉,剛好我也想做些Side Projects,試著在網站上建立數據儀表板,GoDaddy的主機剛好可以拿來跑自動化程式或是儲存資料。

我在主機、伺服器管理方面並不是專家,但我認為資料的自動化抓取與運算需要花費較高的主機資源,因此把資料運算用的主機和架站用主機分開可能也是好事,避免前者不小心資源超量時,部落格也跟著一起掛掉。

另一個好處是資料備份。拿來做數據儀表板的資料很多都是公開而且免費的數據,就算資料弄丟,只要重新下載就好,因此根本不需要備份,如果有code的話在本機上用GitHub備份就可以了。相反,我的網站資料每天都會自動備份,小心駛得萬年船。

本文主旨

如果要在自己的電腦,也就是所謂的本機端(Local)執行數據儀表板專案,難度還算相當低,但當要把這個專案放到網站上,問題會複雜很多。以下的內容是關於我在初期遇到的種種困難,我找到可行的解決方案,以及我最後定案的方式。

我寫這篇文章的時候,我的數據儀表板專案已經有點頭緒,但還沒有具體的成果,若有新的進度與解法都會更新在這篇文章中,也期待你的意見與回饋。

另外,另然本機這個詞聽起來有點工程宅,但為了方便敘述,以下會繼續稱自己使用的電腦為「本機」,和網站的「主機」是兩個相對的概念。

專案規劃

要開始一個Side Project,你自己一定會有些想法。像我的第一個題目想做農產品市場行情的互動式儀表板,在政府資料開放平台上面有json格式的資料源可以使用,取得歷史資料的方式也很簡單。

雖然我的第一個專案的資料源很容易取得,但我相信第二個、第三個專案一定不會都那麼幸運,一定會遇到一些資料要透過爬蟲才能抓下來。先預設最壞的情況一定會發生,這樣在建立自己的SOP時才能保留足夠的彈性與擴充性,也方便日後其他小專案直接套用。

Python或R

數據分析最知名的程式語言是Python和R,除了數據分析外,也都可以做資料視覺化,網路上的資源和相關套件都算多,這部份可以說是難分軒輊。學習成本方面,我兩者都略懂,所以也不是我的主要考量。最後,在通用性這點上,我毫不猶豫選了Python。

什麼是通用性?首先,如前面提到的,某些時候我們一定會需要寫爬蟲來抓網路上的資料,而爬蟲本來就是Python的強項,R雖然也有相關套件,但網友們的評價似乎都不太優,有些事還是交給專業的來比較好。

其次是使用層面。R通常只會拿來做統計或數據分析,雖然我也聽過有人用R寫貪食蛇或踩地雷,但請不要把才能放在奇怪的地方。相反,Python除了數據分析外,工程師也會拿來寫app或網頁,使用層面更多,潛力無窮。

在以上兩次對決中,Python明顯占了上風,於是我毫無懸念的選了Python,下面的說明也會以Python為主。

你要把作品放在哪裡

我一開始就打算放在自己的網站上,所以這一項完全沒有考慮,但還是特別寫出來,讓大家的思考流程更清析。

如果你要把作品放在網站上,你當然要先有一個網站,要搞定網站管理、主機運作等麻煩事。如果你沒有網站,那可以放慮放在免費或付費空間上。以R來說,你可以上傳到RPubs上,像是我同事製作的COVID-19疫情狀況。Python的部份我沒有找過,但我相信有類似的資源可用。

流量控管

如果你把儀表板放在像RPubs的網路空間中,那你完全不用在乎流量問題,但假使你和我一樣想放在自己的主機上,這點你一定要注意。

某些時候,你使用的資料源檔案可能很大,到幾十MB甚至破百。當使用者瀏覽網頁時,你的檔案有多大,你的主機就必須傳送多大的流量出去,這很可怕。如果哪天你的作品不小心紅了,有大把大把的網友前來朝聖,你的主機流量會先爆掉,然後你會收到主機商的關切信,問你要不要花更多的錢升級方案。如果你擺爛裝死,那你的網站可能會被直接關掉。

啊,你說你的主機方案寫不限流量?那個看看笑笑就好了。

整體來說,我覺得流量問題是這個SOP規劃裡面最麻煩的部份,它也會影響視覺化工具的挑選。

選擇視覺化方案

雖然Python本身視覺化套件可以使用,像是Plotly,但是在流量考量下,我本來預期最理想的方案是Power BI。結果,人算不如天算。

Power BI

Power BI是微軟的視覺化工具,這邊我就不多作介紹。

在我原本的構想中,我打算把Python程式寫好後掛到主機上,讓它每天自動更新,並將資料儲存在主機資料庫中。同時,讓Power BI連線到主機的資料庫,一樣每天自動更新資料源。更新後,Power BI會將資料儲存在微軟的資料庫中,由於每天只更新一次,一個100MB的檔案一個月也才3GB左右,流量完全不是問題。最後,我再用Power BI製作互動式儀表板,並且使用Publish to web(public)功能,以iframe的方式嵌入在網頁中。


到ARON HACK網站看完整文章〈在網頁上發佈資料視覺化互動圖表 — 方案評估與技術問題全記錄〉

留言
avatar-img
留言分享你的想法!
avatar-img
ARON HACK 亞倫害的沙龍
23會員
34內容數
2024/10/24
pip和pipenv都是常用的Python套件管理工具,但它們的用途和運作方式略有不同。讓我們來看看它們的差異...
Thumbnail
2024/10/24
pip和pipenv都是常用的Python套件管理工具,但它們的用途和運作方式略有不同。讓我們來看看它們的差異...
Thumbnail
2024/10/24
許多大型語言模型(LLM)開始允許使用者將自己的資料餵進模型中,像是 OpenAI 的 ChatGPT 和 Anthropic 的 Claude。有了這個功能,你可以上傳你的部落格文章、程式碼或資料集來客製化模型的回應。在這篇文章中,你將學習如何從你的 WordPress 網站提取內容並餵給...
Thumbnail
2024/10/24
許多大型語言模型(LLM)開始允許使用者將自己的資料餵進模型中,像是 OpenAI 的 ChatGPT 和 Anthropic 的 Claude。有了這個功能,你可以上傳你的部落格文章、程式碼或資料集來客製化模型的回應。在這篇文章中,你將學習如何從你的 WordPress 網站提取內容並餵給...
Thumbnail
2024/10/24
CKIP-Transformer 是一個繁體中文的自然語言處理 (NLP) 模型,雖然速度偏慢,但是在切詞、詞性標記和命名實體識別等方面都有很優秀的表現。然而,CKIP-Transformer 的輸出並非完美無缺,有時需要額外的資料清理才能進行後續應用。
Thumbnail
2024/10/24
CKIP-Transformer 是一個繁體中文的自然語言處理 (NLP) 模型,雖然速度偏慢,但是在切詞、詞性標記和命名實體識別等方面都有很優秀的表現。然而,CKIP-Transformer 的輸出並非完美無缺,有時需要額外的資料清理才能進行後續應用。
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
一個網站可能除了首頁以外還會有其他的相關網站 例如/admin ,login/ ,home.php ,/root/等等 但是又不一定於是互聯網上就有一些words清單 像是 裡面就有存放各種可能的目錄名稱 例如給定一個網址在網址尾端增加/admin"有可能"就會連到後台 但是人手工一個一個去試去猜實
Thumbnail
一個網站可能除了首頁以外還會有其他的相關網站 例如/admin ,login/ ,home.php ,/root/等等 但是又不一定於是互聯網上就有一些words清單 像是 裡面就有存放各種可能的目錄名稱 例如給定一個網址在網址尾端增加/admin"有可能"就會連到後台 但是人手工一個一個去試去猜實
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
架設部落格或建立個人網站已經變成經營個人品牌必備的功夫。所以不管是自己要練技術、將來想賣自己的產品、參與聯盟行銷,又或者就只是單純搞個網站紀錄自己的人生軌跡...,都離不開架站話題。
Thumbnail
架設部落格或建立個人網站已經變成經營個人品牌必備的功夫。所以不管是自己要練技術、將來想賣自己的產品、參與聯盟行銷,又或者就只是單純搞個網站紀錄自己的人生軌跡...,都離不開架站話題。
Thumbnail
當我們抓取了相當多的網站資料,這些來自不同網站的資料總不可能全都匯集成一張Excel吧,因此通常在寫程式的使用者,都需要一個可以存放資料,並進行串聯的資料庫(SQL),因此我們今天就來教大家如何安裝使用免費的資料庫吧!!
Thumbnail
當我們抓取了相當多的網站資料,這些來自不同網站的資料總不可能全都匯集成一張Excel吧,因此通常在寫程式的使用者,都需要一個可以存放資料,並進行串聯的資料庫(SQL),因此我們今天就來教大家如何安裝使用免費的資料庫吧!!
Thumbnail
前言   這篇文章將會介紹伺服器的概覽和倉庫,並介紹兩款客戶端協助使用者。 伺服器 | GitHub   線上軟體原始碼代管服務平台,使用 Git 作為版本控制軟體 GitHub 同時提供付費帳戶和免費帳戶,這兩種帳戶都可以建立公開或私有的代碼倉庫,但付費使用者擁有更多功能。   除了允許個人和組
Thumbnail
前言   這篇文章將會介紹伺服器的概覽和倉庫,並介紹兩款客戶端協助使用者。 伺服器 | GitHub   線上軟體原始碼代管服務平台,使用 Git 作為版本控制軟體 GitHub 同時提供付費帳戶和免費帳戶,這兩種帳戶都可以建立公開或私有的代碼倉庫,但付費使用者擁有更多功能。   除了允許個人和組
Thumbnail
作為開發人員,您可能想知道是否需要博客。老實說,我寫博客已經有一段時間了,我只能告訴你,在你的網站上擁有一個博客有很大的好處。假設您有一個網站,您在該網站上擁有投資組合併銷售產品或服務。您如何為您的網站帶來更多流量,以便潛在的招聘人員或客戶能夠發現您的產品或服務? 先決條件 項目設置 文章正文
Thumbnail
作為開發人員,您可能想知道是否需要博客。老實說,我寫博客已經有一段時間了,我只能告訴你,在你的網站上擁有一個博客有很大的好處。假設您有一個網站,您在該網站上擁有投資組合併銷售產品或服務。您如何為您的網站帶來更多流量,以便潛在的招聘人員或客戶能夠發現您的產品或服務? 先決條件 項目設置 文章正文
Thumbnail
第一個實戰,我們就先從如何連接自己的網站開始,當我們輸入「部落格」時,機器人就會輸出一個表格,只要點選「馬上觀看」,我們就可以直接連接到自己的部落格,此功能其實也可以運用在連接粉專或是其他想要觀看的網站唷!! Flex Message 實際製作教學 選擇模板 更改圖片 修改內容物 修改底部box
Thumbnail
第一個實戰,我們就先從如何連接自己的網站開始,當我們輸入「部落格」時,機器人就會輸出一個表格,只要點選「馬上觀看」,我們就可以直接連接到自己的部落格,此功能其實也可以運用在連接粉專或是其他想要觀看的網站唷!! Flex Message 實際製作教學 選擇模板 更改圖片 修改內容物 修改底部box
Thumbnail
事情是這樣的,這個網站是用WordPress建置,本來放在GoDaddy虛擬主機上,當時的方案簽了三年,在大約一年半的時候,我決定把網站搬到SiteGround上。為了不讓GoDaddy的主機空轉,剛好我也想做些Side Projects,試著在網站上建立數據儀表板,GoDaddy的主機剛好可以拿來
Thumbnail
事情是這樣的,這個網站是用WordPress建置,本來放在GoDaddy虛擬主機上,當時的方案簽了三年,在大約一年半的時候,我決定把網站搬到SiteGround上。為了不讓GoDaddy的主機空轉,剛好我也想做些Side Projects,試著在網站上建立數據儀表板,GoDaddy的主機剛好可以拿來
Thumbnail
首先要先去Google Cloud Platform申請一個帳號,愉快的點下啟用
Thumbnail
首先要先去Google Cloud Platform申請一個帳號,愉快的點下啟用
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News