2023年10月10日 星期二

資料視覺化 D3.js 抓取 Google Drive 資料

http://4rdp.blogspot.com/2023/10/d3js-google-drive.html

Scatter Plot



今天介紹 D3.js (D3 或 Data-Driven Documents),它是一個使用動態圖形進行資料視覺化的JavaScript 程式庫。
本頁上方已經內嵌一個使用 D3.js JavaScript 程式,這裡不細講程式內容,重點放在如何引用 Google Drive 的 csv 檔案內容。

https://drive.google.com/drive/folders/1XqCWUGftSrbNheqFJIFd950QWw09sGHS 路徑下放置資料檔,裡面放了一個 iris.csv,


不過 Google Drive 不允許外部程式直接取用這個 csv 檔,需透過 Google 試算表,因此在這檔案上點滑鼠右鍵 → 選擇開啟工具 → Google 試算表,




此時 D3.js 即能引用這個 Google Drive 檔案,不過 JavaSceipt 程式碼如下列修改才可使用,網址的尾綴詞要修改成黃底字

//  d3.csv("iris.csv").then(function(data) {   // 本機同目錄下的資料檔

d3.csv("https://docs.google.com/spreadsheets/d/1VjCaE5efFpf_g860VxHkndlD6s3tBTqk4Apfidxld2c/gviz/tq?tqx=out:csv").then(function(data) {
    const margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    const iris_class = [];
    for (let i = 0; i < data.length; i++) {
      console.log(data[i]);
        iris_class.push(data[i]["class"]);
    } 

這學期 Andy 修了陽交大「資料視覺化與視覺分析」這一門課是由王昱舜老師指導同學使用 D3.js,個人覺得可以把數據資料以網頁圖表方式呈現很炫,因此要 Andy 教我,並隨堂考他,能否抓取存放在 Google Drive 的外部資料並呈現出來?他很快利用 Google 搜尋與 ChatGPT 找到解法,學費沒白繳。

沒有留言:

張貼留言