iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

資料視覺化!D3入門到實戰 系列

「資料視覺化」一詞近期沸沸揚揚的,在網頁應用上D3.js佔了很重要的一位。D3.js不只是網頁視覺化的利器,在處理複雜龐大資料上更是有其一定的優勢。在這30天內將會從D3基本的API使用,到圖表與地圖的實例應用,並結合前端框架與串接open api,建置完整的網站。

鐵人鍊成 | 共 30 篇文章 | 25 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1 前言_什麼是資料視覺化

在網路發達的今日,我們能很容易地得到想要的資料,但面對龐雜的資訊,我們該如何整理以方便我們釐清,又該如何呈現給他人? 資料視覺化 資料視覺化一詞的意義就是將資訊...

2019-09-09 ‧ 由 Yuna 分享
DAY 2

Day2 簡介_為什麼使用D3

現在有相當多能用在網頁上的圖表套件,例如易用又美觀的 Chart.js 、提供多樣化視覺圖表的 HighCharts ,以及近期日趨完善的的 Google Ch...

2019-09-10 ‧ 由 Yuna 分享
DAY 3

Day3 SVG 基礎

D3 主要是基於 SVG 做資料視覺化的,因此首先得先有一點對於 SVG 的基礎知識。 有在做設計的應該都知道 SVG 的特性:放大縮小不會失真。若你用文字編輯...

2019-09-11 ‧ 由 Yuna 分享
DAY 4

Day4 D3 與 SVG

前面有提到,D3的基礎就是在SVG上畫圖,所以在今天這篇文章中,將會介紹D3與SVG互動的基本方式。 D3 Select(選擇器) 如果你對javascript...

2019-09-12 ‧ 由 Yuna 分享
DAY 5

Day5 資料處理與視覺化

今天要講的是D3的資料處理,以及該如何用資料渲染畫面。 在前一篇文章中已經有教大家如何使用D3在SVG畫布上畫圖,但該如何依照不同的數據畫出相對應的元素呢? 我...

2019-09-13 ‧ 由 Yuna 分享
DAY 6

Day6 理解D3的數據處理

在前一篇文章中展示了要如何將data與d3連結,並畫出圖來,但背後是怎麼做到的呢? Update、Enter與Exit 假設在SVG中有五個<rect/&...

2019-09-14 ‧ 由 Yuna 分享
DAY 7

Day7 比例與座標軸_理解D3中的比例(Scale)

為什麼需要比例? 相信大家在國中小的地理課一定有學過地圖,地圖中最重要也是容易讓人混淆的就是比例尺。思考一下,要如何在小小的A4紙當中塞進一個台灣? 比例就是為...

2019-09-15 ‧ 由 Yuna 分享
DAY 8

Day8 比例與座標軸_利用比例實作座標軸(Axis)

在前一章我們順利的做出了第一個長條圖,但好像還缺點什麼呢?就是座標軸!沒有座標軸,光有一條一條的長方形哪裏知道代表的是多少? 於是這邊要應用到上一章所講的Sca...

2019-09-16 ‧ 由 Yuna 分享
DAY 9

Day9 實戰!台灣各城市天氣概況_專案說明與準備

相信經過了八天,大家都對D3有了初步的了解,接下來將會直接實作一個比較完整的小專案來加深印象~ 在這幾天裡,我們要做一個可以查詢過去幾小時內,台灣個城市的天氣概...

2019-09-17 ‧ 由 Yuna 分享
DAY 10

Day10 實戰!台灣各城市天氣概況_長條圖實作(1)

今天我們要來實作的是左下角的長條圖,在前面幾天我們已經做過長條圖了,相信對大家來說不是難事,只是讓大家體驗如果今天設計師出了一張圖表的設計圖,該如何高度還原這...

2019-09-18 ‧ 由 Yuna 分享