# 洧杰全天 Live 直播

## 今日行程
* 10:00~12:00 巴士 API 講解
* 14:00~17:00 巴士實作、C3 JS 薪資圖表講解、QA
* 20:00~21:30 許願實作

## C3JS API 講解
* [薪資 API](https://github.com/hexschool/2021-ui-frontend-job)
* C3 JS
* 詳解 C3.js 圖表設計 API
* 陣列篩選方法，整合實用資訊
* 長條圖(bar)設計 - 計算各年紀數量
* 折線圖設計 -
* 圓餅圖設計

## 公車 API
* [邏輯流程圖](https://whimsical.com/Kx2DBwjV6EW6WaxXgyaS2r@2Ux7TurymNCokg2LqRpz)
* [TDX 公車 API](https://tdx.transportdata.tw/api-service/swagger)
* [Codepen API 測試講解](https://codepen.io/hexschool/pen/eYGVMLv?editors=1010)
* [3.2 搭配站位 + 即時動態之 API 整合 + setInterval 定時更新](https://codepen.io/hexschool/pen/PoJBpqa)

## 補充公車 API
取得路線上的公車位置：[/v2/Bus/RealTimeByFrequency/City/{City}/{RouteName}](https://ptx.transportdata.tw/MOTC/?t=Basic&v=2#/CityBus/CityBusApi_RealTimeByFrequency_2030_1)
取得公車線型資料：[/v2/Bus/Shape/City/{City}/{RouteName}](https://ptx.transportdata.tw/MOTC/?t=Basic&v=2#/CityBus/CityBusApi_Shape_2042_1)

地圖 shape 動畫：https://rubenspgcavalcante.github.io/leaflet-ant-path/
自行車 Codepen 動畫：https://codepen.io/hexschool/pen/NWavwYa?editors=1010