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

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

Transcript

1. 本著作由 g0v.tw 製作，以”創用 CC 姓名標示-相同方式分享 3.0 台灣授權條款” 釋出 13年8月4日星期日
2. 13年8月4日星期日
3. http://tkirby.org/blog/ tkirby 13年8月4日星期日
4. 13年8月4日星期日
5. in d3js 13年8月4日星期日
6. 13年8月4日星期日
7. 13年8月4日星期日
8. 13年8月4日星期日
9. 13年8月4日星期日
10. 稅金正在加速燃燒中 13年8月4日星期日
11. 4 1 秒 450萬 13年8月4日星期日
12. 13年8月4日星期日
13. 13年8月4日星期日
14. 13年8月4日星期日
15. 13年8月4日星期日
16. 13年8月4日星期日
17. 13年8月4日星期日
18. 13年8月4日星期日
19. 13年8月4日星期日
20. 13年8月4日星期日
21. 13年8月4日星期日
22. 13年8月4日星期日
23. 13年8月4日星期日
24. 13年8月4日星期日
25. 13年8月4日星期日
26. 13年8月4日星期日
27. 13年8月4日星期日
28. 13年8月4日星期日
29. 13年8月4日星期日
30. 13年8月4日星期日
31. d3js.org 13年8月4日星期日
32. 13年8月4日星期日
33. 13年8月4日星期日
34. BROWSER DATA DOM 13年8月4日星期日
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日星期日
37. val = function(d) { return d;}; d3.select(“body”) .selectAll(“div”) .style(“opacity”,val) .text(val); 13年8月4日星期日
38. Life Game 13年8月4日星期日
39. neb = (x,y) -> [[i,j] for i in [-1 0 1] for j in [-1 0 1]].filter ([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]].filter ([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日星期日
41. 13年8月4日星期日
42. 13年8月4日星期日
43. <li ng-repeat=”job in jobs | filter: filter”> .... </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日星期日
45. 13年8月4日星期日
46. 13年8月4日星期日
47. 13年8月4日星期日
48. 立委投票結果視覺化 http://bl.ocks.org/zbryikt/raw/4248542/ 13年8月4日星期日
49. 13年8月4日星期日
50. in PC-AXIS format 13年8月4日星期日
51. 使用 px.js 讀取 13年8月4日星期日
52. http://g0v.github.io/twstat/ 13年8月4日星期日
53. 13年8月4日星期日
54. shp → topojson 13年8月4日星期日
55. 13年8月4日星期日
56. 13年8月4日星期日
57. http://bl.ocks.org/zbryikt/raw/4539556/ 13年8月4日星期日
58. Dorling Cartogram morphing 13年8月4日星期日
59. http://bl.ocks.org/zbryikt/raw/4696905/ 13年8月4日星期日
60. http://www.trulia.com/crime Crime Maps in San Francisco 13年8月4日星期日
61. 立委 資訊 開放 立院 標案 分析 流動 民主 人物 關係 選罷 地圖 公民 媒體 弊案揭露 權力制衡 資訊透明 13年8月4日星期日
62. 13年8月4日星期日
63. 我們是俗稱科技島的先進國家 開放資料當然不落人後! 13年8月4日星期日
64. encoding? 13年8月4日星期日
65. Latitude? Y? 13年8月4日星期日
66. <br/>? \n? 13年8月4日星期日
67. 貼心的ROC統計資訊網使用 來自瑞典的 Open Source 軟體 「PX-Web 2007」 ( 雖然我們政府自己把它改成只支援 IE ) 13年8月4日星期日
68. 台北市等15個縣市已使用 PX-Web, 並提供 PC-AXIS 格式資料下載 那其他的縣市呢? 13年8月4日星期日
69. MS-EXCEL ... 至少不是圖檔啦 13年8月4日星期日
70. 93 96 99 警政統計年報 Fashion. 176975 vs 269,340 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日星期日
76. -508 2013 圖靈機 ARPANET 民主起源 1215 大憲章 13年8月4日星期日
77. 政府組織的資訊革命 2007 愛沙尼亞 (Estonia) 人類第⼀一次國家級的網路投票 13年8月4日星期日
78. 1540 2013 總統直選 首次公投 大肚王國 1895 日本 1647 南明 1683 清朝 1945 ROC ? 13年8月4日星期日
79. Q & A Q: 請問你們是反政府組織嗎? 13年8月4日星期日
80. Q & A Q: 參加 Hackathon後會不會有生命危險? 13年8月4日星期日
81. Q & A Q: 我有⼀一個點子... Q: 你們怎麼沒有做 xxx Q: 你們做得不太對... 13年8月4日星期日