Day 27 - 资料视觉化与API - 将资料转化成艺术

前言
觉得这个文章，花了太多时间在写但有些设定好像应该 更把他分的更清楚而不是一直只丢范例出来解释。
不过现在先推之後在後修改吧
目标
了解常见的资料类型
能够载入外部资料
解析资料清理与转换
将资料转换为色彩、形状与动态呈现
将变数与状态存在暂存(local storage)中
课程重点
资料结构与 API
常见的资料形式：JSON 与 CSV

JSON
JSON(JavaScript Object Notation) 是什麽：JSON 是一种像是 JavaScript 物件格式的资料结构，在 JavaScript 中，有许多内建的方式可以直接对 JSON 格式的资料操作，因此在网路应用程序里面，JSON 是种非常常用的资料格式。
JSON 的格式：JSON 的格式与 JavaScript 的物件类似，也可以是一个阵列，一般常见的 JSON 可能会长得像是这样(ref:MDN-使用 JSON 资料)
{
"squadName" : "Super hero squad",
"homeTown" : "Metro City",
"formed" : 2016,
"secretBase" : "Super tower",
"active" : true,
"members" : [
{
"name" : "Molecule Man",
"age" : 29,
"secretIdentity" : "Dan Jukes",
"powers" : [
"Radiation resistance",
"Turning tiny",
"Radiation blast"
]
},
{
"name" : "Madame Uppercut",
"age" : 39,
"secretIdentity" : "Jane Wilson",
"powers" : [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
"name" : "Eternal Flame",
"age" : 1000000,
"secretIdentity" : "Unknown",
"powers" : [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
]
}
]
}
复制贴到线上编辑器 JSON Editor Online
延伸阅读：MDN-使用 JSON 资料
JSON 的使用，在 p5 里面有提供专门处理 JSON 的函式，只要使用 loadJSON() 读取档案之後，就可以用处理物件或是阵列的方式直接操作读取的资料。
CSV
CSV(Comma-Separated Values) 是什麽：CSV 是单纯用文字、逗号（,）与换行符号（\n）组成的资料格式，可以使用 excel 等文书工具编辑，一般打开之後都是以表格的形式呈现，因为格式简单、解析容易，被广泛运用在资料库、资料表的传输上。
CSV 的格式：CSV 的第一行通常是栏位，之後的每一行都是一笔资料，栏位之间用,分开，一个 CSV 资料长的会像是这样(ref: 维基百科－逗号分隔值)：
Year,Make,Model,Description,Price
1997,Ford,E350,"ac, abs, moon",3000.00
1999,Chevy,"Venture ""Extended Edition""","",4900.00
1999,Chevy,"Venture ""Extended Edition, Very Large""",,5000.00
1996,Jeep,Grand Cherokee,"MUST SELL!
air, moon roof, loaded",4799.00
资料整理
用文书工具(Number/Excel)整理资料集
汇出成 CSV 档案
使用 CSVJSON 把 CSV 档案转换成 JSON 方便程序读取使用
载入外部资料
课程中使用的资料：https://data.gov.tw/dataset/40267
在preload()里面使用loadJSON()读取上传的 JSON 档，或是读取某个网址的资料。
preload(){
// 记得把要读取的 JSON 档案上传到 OpenProcessing 的 Files 里面
treeData = loadJSON("XXX_data.json")
}
把物件转成阵列：Object.values()，方便後续去递回阵列里面的资料
// 原本是物件包着物件
dataObj = {
1:{
keyA: value1A,
keyB: value1B,
...
},
2:{
keyA: value2A,
keyB: value2B,
...
},
...
}

// 转换成阵列
dataArray = Object.values(dataObj)
[
{
keyA: value1A,
keyB: value1B,
...
},
{
keyA: value2A,
keyB: value2B,
...
}
]

资料的绘制
在印出资料前先标准化：let h = map(d.value,0,8000,0,height) // 8000 是所有资料的最大值。
增加绘制的样式
drawingContext.shadowColor = color(0,30)
drawingContxt.shadowOffsetX = 20
drawingContxt.shadowOffsetY = 20
让增长的动画配合 easing function，可以参考：https://easings.net/
function easeOutQuart(x){
return 1 - pow(1 - x, 4);
}

// map 加上 true 以限制 map 的上限
animationProgress = easeOutQuart(map(frameCount,0,300,0,1,true))
rect(0,0,12*animationProgress,h)
结合控制与输入互动
选择树种以及设定缩放大小
新增控制元件与选项
let selElement = createSelect()
selElement.option("针叶树合计")
// 如果新增滑杆的作法也类似，使用
// let sliderElement = createSlider(0.2,1,resultScale, 0.001)
绑定更新选项的函式
selElement.changed(selectChanged)
function selectChanged(){
let selectedType = this.value()
storeItem("tree_type_select",selectedType)
print(selectedType)
useData= []
for(let d of treeData){
if (d.dname1==selectedType){
useData.push(d)
print(d)
}
}
}
阵列操作
filter()：把阵列中所有符合条件的资料，包在一个阵列中回传
useData = treeData.filter(function(d){
return d.dname1==storedType
})
map()：将阵列中的每笔资料透过某个函式的运算之後，包在一个阵列中回传
const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]
find() 回传阵列中符合条件的第一笔资料
const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12
LocalStorage 储存资料
一种可以把网页应用程序的资料储存在浏览器的功能
一般的储存型态是字串，使用 p5 的函式可以存取参数、阵列或物件等格式
使用storeItem()/getItem() 存取浏览器的 localStorage，把资料储存在用户的浏览器之中
// 取得 localStorage 中某个栏位的资料
let storedType = getItem("tree_type_select") || "相思树"

// 把资料储存到 localStorage 中的某个栏位中（如果栏位不存在就新增栏位）
storeItem("tree_type_select",selectedType)
removeItem() 移除某个栏位与资料