# 第 14 章 【影音互動與即時資料應用】資料視覺化與API - 將資料轉化成藝術

### 單元一：章節介紹與案例解析

[Dear Data ](http://www.dear-data.com/theproject)
將生活中的資料當下狀態，用不同模式記錄/畫下來
寫成明信片寄給對方

將資料視覺化，讓我們對數字更有感
* 塑膠跟紐約市的對比
* 槍擊死亡人數 

### 單元二：解析資料與繪製圖形

- 如何抓取資料來源
- 資料來源
- https://data.gov.tw/
- 選擇有json的資料，到[Json Editor Online](jsoneditoronline.org)轉存成可用資料
- 或者選擇csv資料，使用csv to json轉成可用的json格式，並儲存成.json檔案
- 課程範例資料來源
- https://data.gov.tw/dataset/40267
- 預載資料

    function preload(){
        // 讀取資料前，要先把資料上傳到openprocessing的file中
        treeData = loadJSON("XXX_data.json") 
    }

- 取用與顯示資料

    function setup(){
        treedata = Object.values(treedata);
        
        for(let d of treedata){
            if(d.dname1 == "目標資料"){
                usedata.push(d);
            }
        }
    }
    
    function draw(){
        translate(10, height-20);
        for(var i = 0; i < usedata.length; i+=2){
            //取出單筆資料
            let d = usedata[i];
            push();
                translate(i*25, 0);
                //使用資料設定方塊高度
                let h = map(d.value, 0, 8000, 0, -height);
                rect(0,0,20,h);
                //顯示數值在底部
                text(d.date, 0,0)
            pop();
        }
    }

### 其他分享
#### Frank推薦
- https://www.datasketch.es/
- [information is beautiful awards](https://www.informationisbeautifulawards.com/)
- https://shirleywu.studio/filmflowers/
- 選出每年五部票房最好的電影，設定規則，取出資料做成漂釀的花花

#### Kidult分享
- https://trackingjs.com/

#### 額外補充資訊
- D3.js：資料視覺化語言
- https://zh.wikipedia.org/zh-tw/D3.js
- 特點：效能好，難學
- Data-Driven Documents

### 3/8 筆記開始

- animationProgress : 控制動畫曲線 ease
- 利用 translate 讓畫面從中間開始長

translate(width/2, height/2)

- 視覺化資料 -> 刻度很重要
- Tip 利用 map() 讓差異很大的數字在呈現上更接近
- Tip 盡量讓標題字體的級距凸顯出來
- Tip 少用純黑 純白

- ***利用資料的順序(迴圈的 i)錯開動畫的排程***

### 單元四

- p5js 指令：createSelect 新增一個 form 的 select dom 元件（下拉選單）
- 綁定事件

selectElement.changed(eventHandler)
function eventHandler(){
    .... 下拉選單選取後 js 要做的事 ....
    // ?? 如何在事件函式中指到作用的 selectElement?
    //     event.currentTarget ?
}

- filter 篩選（Array.prototype.filter()）

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']
const result = words.filter(word => word.length > 6)
console.log(result)
// Expected output: Array ["exuberant", "destruction", "present"]

- storeItem 存資料在 local storage

myText = "key";
storeItem('myText', myText);

- getItem 從 local storage 取出資料

myKey = getItem('myText')

- 儲存時 local storage 建議以物件的型態儲存