D3js畫的Racing Bar Chart #1Intro

Winsome on 2020-03-04 Wed

Intro

越來越常看到Racing Bar Chart,想說自己來做做看
我會用NBA 2018-19的數據,做出每個月每隊的勝場數
我平常沒有在看NBA,因為上面的數據很完整,所以使用NBA的數據來練習
這個系列主要是事後程式碼的review,不是step by step的寫code教學

參考程式

Bar Chart Race, Explained (By Mike Bostock)
bar chart races

數據哪裡來

2018-19 NBA Schedule and Results
2019-2020 National Basketball Association Logos
2018-19例行賽戰績

大綱

這個系列總共有十篇,那還會再分兩個小系列

  1. 做出Racing Bar Chart的效果
  2. 套用真實資料

Part 1

1Intro
2先從一個長條圖開始
3比例怪怪的
4讓長條圖動起來
5加個X軸看得更清楚
6自動執行
7隊伍資訊和數字動畫

Part 2

8好好整理資料
9年月資訊與隊伍Logo
10只看前十名

github

source code

youtube

youtube