鐵人檔案
「資料視覺化」一詞近期沸沸揚揚的，在網頁應用上D3.js佔了很重要的一位。D3.js不只是網頁視覺化的利器，在處理複雜龐大資料上更是有其一定的優勢。在這30天內將會從D3基本的API使用，到圖表與地圖的實例應用，並結合前端框架與串接open api，建置完整的網站。
在網路發達的今日，我們能很容易地得到想要的資料，但面對龐雜的資訊，我們該如何整理以方便我們釐清，又該如何呈現給他人？ 資料視覺化 資料視覺化一詞的意義就是將資訊...
現在有相當多能用在網頁上的圖表套件，例如易用又美觀的 Chart.js 、提供多樣化視覺圖表的 HighCharts ，以及近期日趨完善的的 Google Ch...
D3 主要是基於 SVG 做資料視覺化的，因此首先得先有一點對於 SVG 的基礎知識。 有在做設計的應該都知道 SVG 的特性：放大縮小不會失真。若你用文字編輯...
前面有提到，D3的基礎就是在SVG上畫圖，所以在今天這篇文章中，將會介紹D3與SVG互動的基本方式。 D3 Select（選擇器） 如果你對javascript...
今天要講的是D3的資料處理，以及該如何用資料渲染畫面。 在前一篇文章中已經有教大家如何使用D3在SVG畫布上畫圖，但該如何依照不同的數據畫出相對應的元素呢？我們...
在前一篇文章中展示了要如何將data與d3連結，並畫出圖來，但背後是怎麼做到的呢？ Update、Enter與Exit 假設在SVG中有五個<rect/&...
為什麼需要比例？ 相信大家在國中小的地理課一定有學過地圖，地圖中最重要也是容易讓人混淆的就是比例尺。思考一下，要如何在小小的A4紙當中塞進一個台灣？比例就是為了...
在前一章我們順利的做出了第一個長條圖，但好像還缺點什麼呢？就是座標軸！沒有座標軸，光有一條一條的長方形哪裏知道代表的是多少？ 於是這邊要應用到上一章所講的Sca...
相信經過了八天，大家都對D3有了初步的了解，接下來將會直接實作一個比較完整的小專案來加深印象～ 在這幾天裡，我們要做一個可以查詢過去幾小時內，台灣個城市的天氣概...
今天我們要來實作的是左下角的長條圖，在前面幾天我們已經做過長條圖了，相信對大家來說不是難事，只是讓大家體驗如果今天設計師出了一張圖表的設計圖，該如何高度還原這...
