iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

從原料到燃料,從資料到預料—資料駕馭網頁之理科的美學 系列

內容提及D3Js和資料相關內容的知識,主題訂定為資料駕馭網頁,其實一部分原因來自D3Js原始英文來自於Data-Driven Documents,其中documents也是網頁中的物件,因此我將它命名成資料駕馭網頁也更好理解,預計不定時會補充官方API文件和網頁相關知識,文中能以step by step方式,期望讓Javascript和處理資料的初學者能夠理解。

鐵人鍊成 | 共 30 篇文章 | 11 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室V5.0
DAY 1

D3JsDay01 資料視覺化 圖表說說話—介紹篇

簡介 本系列內容將會提及D3Js和資料相關內容的知識,主題訂定為資料駕馭網頁,其實一部分原因來自D3Js原始英文來自於Data-Driven Documents...

2021-09-16 ‧ 由 DannyChen 分享
DAY 2

D3JsDay02 學學D3JS 技能提高SSS—為什麼D3

圖片來源:unsplash 關於資料視覺化的工具一般使用者最先接觸的可能是Microsoft Excel工具,後來在程式語言當中常見的是Python Ma...

2021-09-17 ‧ 由 DannyChen 分享
DAY 3

D3JsDay03可縮放向量圖型 不用怕圖片不行—SVG簡介

由於D3Js的組成部分來自於操控SVG(Scalable Vector Graphics),所以簡單介紹一下SVG。 SVG組成是屬於向量圖形(透過電腦計算路徑...

2021-09-18 ‧ 由 DannyChen 分享
DAY 4

D3JsDay04一同來見識 D3起手式—用D3寫Helloworld

如何開始D3js 方法一 使用CDN 請google搜尋D3Js到D3Js的官方網站。 滑鼠滾輪到下方處 複製<script src="htt...

2021-09-19 ‧ 由 DannyChen 分享
DAY 5

D3JsDay05Bar拉BarBarBar,作伙來畫吧—畫個bar chart長條圖

用D3繪製長條圖 我們現在可以嘗試著用已經學到的SVG來畫長條圖,只不過是透過D3Js的操作來新增SVG元素到html裡面。 先宣告一個變數叫做svg並且透過D...

2021-09-20 ‧ 由 DannyChen 分享
DAY 6

D3JsDay06這包什麼餡,原來是折線—繪製折線圖

這次相比長條圖使用多一點的資料,陣列如下並且一樣先宣告svg變數繪製一個寬800高450的畫布 const ary = [130,45,239,20,30,24...

2021-09-21 ‧ 由 DannyChen 分享
DAY 7

D3JsDay07不懂資料格式,那就會我們曾相識,只是不合適—檔案格式介紹

格式介紹 通常你的資料會是檔案、API接口或是一個連結作為D3輸入的資料,這邊就以下常見的資料格式簡單介紹一下 CSV逗號分隔值(Comma-Separated...

2021-09-22 ‧ 由 DannyChen 分享
DAY 8

D3JsDay08做為視覺化圖表的燃料,從網路擷取檔案的資料—fetch Data

淺談原始碼 D3包裝了Javascript的fetchAPI來擷取資料我們這裡可以看到D3Js的原始碼為以下片段,不難看出它是return了fetchAPI f...

2021-09-23 ‧ 由 DannyChen 分享
DAY 9

D3JsDay09 資料元素來綁定,讓你元素有內定—資料綁定

資料綁定 datum()函式 前面的文章多半是在使用D3來操作DOM,這邊主要探討D3的核心,將資料綁定在DOM的元素中,換句話說DOM的元素樣貌可以透過資料來...

2021-09-24 ‧ 由 DannyChen 分享
DAY 10

D3JsDay10 遇到元素資料不相等,用函式解決高人一等

綁定的資料和畫面上的元素不相等 enter()函式—沒放入元素的資料 先看以下程式碼 <body> <div></div&gt...

2021-09-25 ‧ 由 DannyChen 分享