iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

適用於傳產從業人員的實用報表製圖術 系列

將報表數字運用程式語言
做出可互動性的圖
利用 30 天的時間來學習如何畫圖
期待能做出漂亮的圖

鐵人鍊成 | 共 30 篇文章 | 12 人訂閱 訂閱系列文 RSS系列文 團隊㊣乂溪湖煞氣a汴頭保安宮乂㊣
DAY 21

【Day 21】使用 “D3” 畫 Bar-line Chart

前言 今天要結合前面介紹過的長條圖和折線圖,可以同時看出兩個指標值隨時間變化的趨勢,第一個 y1 軸用長條圖表示,第二個 y2 軸用線表示,橫軸是時間的變化。...

2022-09-26 ‧ 由 rita0124 分享
DAY 22

【Day 22】“D3” Bar-line Chart 加上標示

前言 昨天的 bar line chart 看起來仍有缺點,2020 年和 2021 年的折線圖很難直覺地看出實際的年增率是多少,所以要將資料加上標示會比較清楚...

2022-09-27 ‧ 由 rita0124 分享
DAY 23

【Day 23】分面式直條圖

前言 今天要來畫縣市人口年齡圖,要把指定縣市的人口年齡畫在同一張圖比較。 取得資料 複製 110 年縣市人口統計資料 把數字的逗號間隔移除 檔案轉換成 ut...

2022-09-28 ‧ 由 rita0124 分享
DAY 24

【Day 24】根據“次數”對類別分組和排序的直條圖

前言 直條圖是常用在統計數量的表示方法,當一筆資料內有許多不同類別,要根據不同類別統計數量,比較類別出現的頻率。 取得資料 下載 農產品交易行情 csv 檔案...

2022-09-29 ‧ 由 rita0124 分享
DAY 25

【Day 25】根據“數值”對類別分組和排序的直條圖

前言 參考 【Day 24】的資料,今天要畫每一種作物的實際交易量總和。 開始畫圖 上傳資料 選擇 Weighted top 10 bar chart,修改參...

2022-09-30 ‧ 由 rita0124 分享
DAY 26

【Day 26】使用 “D3” 畫雙座標軸折線圖

前言 【Day 21】 是介紹 line-bar chart,還有一種常見的圖是雙座標軸折線圖 取得資料 下載死亡率和房價指數兩筆資料 整理資料 整理近十年的...

2022-10-01 ‧ 由 rita0124 分享
DAY 27

【Day 27】客製化的 “D3” 直條圖

前言 今天要使用 D3 客製化直條圖,學習畫一張直條圖需要由哪些部分組成。 取得資料 下載鯖魚價格的 csv 檔案 整理資料 排除沒有價格的市場 開始畫圖...

2022-10-02 ‧ 由 rita0124 分享
DAY 28

【Day 28】客製化的 “D3” 多系列折線圖

前言 今天要畫折線圖,折線圖常用來呈現東西隨時間的變化趨勢,但今天要用 D3 重頭開始實作,更深入了解運作的原理。 取得資料 到漁產品行情走勢下載石斑、吳郭魚、...

2022-10-03 ‧ 由 rita0124 分享
DAY 29

【Day 29】客製化的 “D3” 散佈圖

前言 散佈圖是用來觀察兩個變數之間的關聯性,又稱為相關圖。 取得資料 * 受僱員工每人每月總薪資-按行業分* 台灣地區傷害保險個人職業分類表  整理資料 * 整...

2022-10-04 ‧ 由 rita0124 分享
DAY 30

【Day 30】客製化的 “D3” 圓餅圖和甜甜圈圖

前言 圓餅圖主要是用來表示數量的占比,可以從扇形的面積觀察數量的多寡,適合用在分類少,比例有明顯差異的資料。 取得資料 下載三階段人口的資料,取 110 年台灣...

2022-10-05 ‧ 由 rita0124 分享