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

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日星期日