內容提及D3Js和資料相關內容的知識,主題訂定為資料駕馭網頁,其實一部分原因來自D3Js原始英文來自於Data-Driven Documents,其中documents也是網頁中的物件,因此我將它命名成資料駕馭網頁也更好理解,預計不定時會補充官方API文件和網頁相關知識,文中能以step by step方式,期望讓Javascript和處理資料的初學者能夠理解。
前言 想像一下假設今天你的資料的數字是如此龐大,而電腦螢幕的寬和高卻是有限的情況之下,不可能以1個人口對應1個螢幕的高或是寬,例如我們的資料是各個國家的人口數,...
昨天我們繪製了長條圖的情況,今天我們再畫出所對應的數字座標軸就可以呈現這一份圖表了,目前長條圖的Y軸部分缺少的就是數值的對應,今天我們要來使用axisAPI來做...
過渡動畫 transition這個翻譯成過渡的意思,一個吸引人的圖表當中,加入了一點動畫成分和過渡的轉變能吸引使用者的目光,也讓觀看者有預期心理畫面將要轉換,另...
什麼是互動?簡單說希望能夠讓使用者允許監聽和分派事件,用比較白話的一點方式舉例就是當我們滑鼠按下某個元素的時候,圖表會呈現某些樣貌,監聽就是滑鼠按下的意思,委派...
GIS地理資訊系統(Geographic Information System) 地理資訊系統這個名詞聽起來有些抽象,其實諸如我們平常所使用的Google Ma...
昨天介紹完關於Web地圖的相關知識之後今天我們要開始使用geojson的資料來繪製一個地圖首先我們到以下的網站下載shp檔案 Natural Earth 政府開...
改變path的樣貌 首先觀看以下程式碼 const width = 800; const height = 600; const svg = d3.select...
我們到政府開放資料平台下載這兩個檔案,第一個是包含各種伴手禮的經緯度資料、名稱、介紹等等作為要畫在地圖上的資料,另一個是台灣地圖的shp檔案,作為繪製地圖用。...
製作樣板 昨天已經繪製出每個淡綠色的點來顯示資料中的經緯度在svg地圖上面,今天要做的事情是當滑鼠移入的時候我們可以觀看資料的內容。 第一步我們可以手動寫htm...
面量圖介紹 面量圖又稱分層設色圖、區域密度圖(Choropleth map),高中地理課本的說明是在界限明確的區域平均分布的地理現象以色彩或網紋來代表其數量大小...