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

7f7cce675da85bf8807da9f8d0c3a955?s=47 tkirby
August 03, 2013

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

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

7f7cce675da85bf8807da9f8d0c3a955?s=128

tkirby

August 03, 2013
Tweet

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