iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

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

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

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

D3JsDay11 觀測時候別鐵齒,拿出你的比例尺

前言 想像一下假設今天你的資料的數字是如此龐大,而電腦螢幕的寬和高卻是有限的情況之下,不可能以1個人口對應1個螢幕的高或是寬,例如我們的資料是各個國家的人口數,...

2021-09-26 ‧ 由 DannyChen 分享
DAY 12

D3JsDay12完成製作的壓軸,畫出圖表座標軸

昨天我們繪製了長條圖的情況,今天我們再畫出所對應的數字座標軸就可以呈現這一份圖表了,目前長條圖的Y軸部分缺少的就是數值的對應,今天我們要來使用axisAPI來做...

2021-09-27 ‧ 由 DannyChen 分享
DAY 13

D3JsDay13 讓資料擁有過渡動畫,讓各位觀眾看見神話—過渡動畫

過渡動畫 transition這個翻譯成過渡的意思,一個吸引人的圖表當中,加入了一點動畫成分和過渡的轉變能吸引使用者的目光,也讓觀看者有預期心理畫面將要轉換,另...

2021-09-28 ‧ 由 DannyChen 分享
DAY 14

D3JsDay14不想圖表被冰凍,那就做一點互動—事件互動

什麼是互動?簡單說希望能夠讓使用者允許監聽和分派事件,用比較白話的一點方式舉例就是當我們滑鼠按下某個元素的時候,圖表會呈現某些樣貌,監聽就是滑鼠按下的意思,委派...

2021-09-29 ‧ 由 DannyChen 分享
DAY 15

D3JsDay15 了解WEB地圖學,先懂一點地理學—web地圖的科學

GIS地理資訊系統(Geographic Information System) 地理資訊系統這個名詞聽起來有些抽象,其實諸如我們平常所使用的Google Ma...

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

D3JsDay16 It's map birth,It's from path—生成地圖

昨天介紹完關於Web地圖的相關知識之後今天我們要開始使用geojson的資料來繪製一個地圖首先我們到以下的網站下載shp檔案 Natural Earth 政府開...

2021-10-01 ‧ 由 DannyChen 分享
DAY 17

D3JsDay17 Fill the color,Zoom in on center—地圖各項操作及填色

改變path的樣貌 首先觀看以下程式碼 const width = 800; const height = 600; const svg = d3.select...

2021-10-02 ‧ 由 DannyChen 分享
DAY 18

D3JsDay18 不讓資料進墳墓,秒懂農產品分布—實際資料畫地圖

我們到政府開放資料平台下載這兩個檔案,第一個是包含各種伴手禮的經緯度資料、名稱、介紹等等作為要畫在地圖上的資料,另一個是台灣地圖的shp檔案,作為繪製地圖用。...

2021-10-03 ‧ 由 DannyChen 分享
DAY 19

D3JsDay19 地圖加入了事件,地點資料就呈現—為地圖加入互動事件

製作樣板 昨天已經繪製出每個淡綠色的點來顯示資料中的經緯度在svg地圖上面,今天要做的事情是當滑鼠移入的時候我們可以觀看資料的內容。 第一步我們可以手動寫htm...

2021-10-04 ‧ 由 DannyChen 分享
DAY 20

D3JsDay20筆畫面量彩色圖 塗色彩亮面畫筆—地理面量圖(上)

面量圖介紹 面量圖又稱分層設色圖、區域密度圖(Choropleth map),高中地理課本的說明是在界限明確的區域平均分布的地理現象以色彩或網紋來代表其數量大小...

2021-10-05 ‧ 由 DannyChen 分享