tkirby
August 03, 2013
1.8k

# Open Data in D3js - 以零時政府為例

D3JS 為一套強大的 Javascript 函式庫，他讓我們可以很容易的將資料與文件組合起來，並加以操作。此講題將以零時政府相關專案為例，展示如何活用 D3JS 與 SVG 將資料以更易閱讀的形式呈現。

August 03, 2013

## Transcript

35. ### Data Document ....enter().append(“div”).... ... style(“opacity”, function(data) { return data.value; });

d3.selectAll(“div.block”).data(myData)... 13年8月4日星期日
36. ### data = [ Math.random() for [0 to 9]] d3.select(“body”) .selectAll(“div”)

.data(data) .enter() .append(“div”) ... .exit() .remove() 13年8月4日星期日

13年8月4日星期日

39. ### neb = (x,y) -> [[i,j] for i in [-1 0

1] for j in [-1 0 1]].ﬁlter ([i,j]) -> ((x + i) in [0 til 20] and (y + j) in [0 til 20]) and (i or j) .map ([i,j]) -> x + i + (y + j)*20 data = [{x, y, d: if parseInt(Math.random!*8)== 0 then 1 else 0, n: neb x, y } for y from 0 til 20 for x from 0 til 20] nodes = d3.select \body .selectAll \div.cell .data data .enter!append \div .attr \class \cell nodes.style “top” (d,i) -> 20 + 30 * parseInt(i/20) + "px" .style “left” (d,i) -> 20 + 30 * (i%20) + "px" <- setInterval _, 80 nodes .style “opacity” -> it.d .each (d,i) -> c = d.n.map(-> data[it].d)reduce (+) if c == 3 or (c == 2 and d.d==1) then d.d = 1 else d.d = 0 13年8月4日星期日
40. ### window.onload = -> [md,data,pat,maze] = [0,[],[],[ 0,2,3,6,7,8,9,12,16,18,19,22,23,24,25,26,30,32,33,36,42,48, 50,51,52,56,57,58,60,61,66,72,73,88,89,90,96, 105,108,120,121,124,125,128,129,132,135,138,144,146,147,150,151,152,153,154,162,168,176,178,180,184,186,192,198, 208,210,211,214,215,240,

258,264,288,292,297, 300,304,306,308,312,313,316,317, 376,377,380,381,384,387, 400,402,403,406,407,408,448, 450,464,466,467,470,471 ]] maze.map -> pat[it]=1 neb = (x,y) -> [[i,j] for i in [-1 0 1] for j in [-1 0 1]].ﬁlter ([i,j]) -> ((x + i) in [0 til 20] and (y + j) in [0 til 20]) .map ([i,j]) -> [2 ** (4 + i + j * 3), x + i + (y + j)*20] data = [{x, y, d: if parseInt(Math.random!*7)== 0 then 1 else 0, n: neb x, y } for y from 0 til 20 for x from 0 til 20] nodes = d3.select \body .selectAll \div.cell .data data .enter!append \div .attr \class \cell nodes.style \top (d,i) -> 20 + 30 * parseInt(i/20) + "px" .style \left (d,i) -> 20 + 30 * (i%20) + "px" <- setInterval _, 80 nodes .style \opacity -> if it.d then 1 else 0.2 .each (d,i) -> c = d.n.map(-> data[it.1].d * it.0)reduce (+) d.d = if pat[c] then 1 else 0 Maze Generator 13年8月4日星期日

43. ### <li ng-repeat=”job in jobs | ﬁlter: ﬁlter”> .... </li> filter.onkeyup

= function() { nodes.style("display", function(d) { return (d.toString().search(filter.value)>=0) ?"block":"none"; }); }; 13年8月4日星期日
44. ### Selection Transition / Interpolation IO ( xhr / csv /

json ) SVG ( Line / Arc / Bezier ) Layouts ( Cluster / Force / Partition / Tree ) Geometry / Projection / Voronoi Color ( RGB / HSL ) Scale ( Linear / Power / Log ) Axes 13年8月4日星期日

61. ### 立委 資訊 開放 立院 標案 分析 流動 民主 人物 關係

選罷 地圖 公民 媒體 弊案揭露 權力制衡 資訊透明 13年8月4日星期日

) 13年8月4日星期日

71. ### 台北市 - 主要死因死亡率-年 新北市 - 標準化死亡率-主要死因-年 高雄市 - 主要死因死亡率-年年別,死亡原因死亡率 台中市

- 主要死因死亡率-年期間項目別 台南市 - 戶籍動態出生數、出生率、死亡數、 死亡率、自然增加率、遷入數、遷入率、 遷出數、遷出率、社會增加率、結婚數、 結婚率、離婚數、離婚率-年 鄉鎮級重要指標 - 死亡率 順帶⼀一提, 19個縣市中有 2614 個不同的標題 只有⼀一個標題同時存在於19個縣市中 *19個縣市: 包含新舊制, 已改用 PC-AXIS 檔的縣市共有 19 個 13年8月4日星期日
72. ### 我心目中的OPEN DATA • 要開放且授權(實價登錄?) • 不需申請, 不該收費(公車資訊?) • 格式易讀, 不需購買軟體(族繁不及被宰)

• 資料統⼀一具⼀一致性(統計資訊網) • 要有最基本的閱讀器(data.taipei) • 要容易被程式處理(六法全書) • 要有歷史資料, 版本管理(台灣地圖) 13年8月4日星期日
73. ### 資料開放 簡易授權 開放格式 統⼀一度量 可程式化 可讀性 視覺化 資料互動 組織資料 資訊散布

資料分析 公民評論 13年8月4日星期日
74. ### 政 gov 府 公民 難使用的資料 枯燥的內容 缺乏互動性的界面 沒有在 關注政府 媒體

左右? 挑選過的 引導性內容 藝人,可愛小貓,撿到錢 關注 13年8月4日星期日
75. ### 政 gov 府 公民 再次 關切 媒體 左右? 藝人,可愛小貓,撿到錢 較少關注

零 g0v 時 難用的資料 方便,容易的資料 挑選過的 引導性內容 13年8月4日星期日

78. ### 1540 2013 總統直選 首次公投 大肚王國 1895 日本 1647 南明 1683

清朝 1945 ROC ? 13年8月4日星期日

13年8月4日星期日