今天介紹 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 試算表，
Google Drive 會另外產生一個試算表檔案 https://docs.google.com/spreadsheets/d/1VjCaE5efFpf_g860VxHkndlD6s3tBTqk4Apfidxld2c/edit#gid=1316913290
此時 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 找到解法，學費沒白繳。
沒有留言:
張貼留言