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

1.

本著作由 g0v.tw 製作，以”創用 CC 姓名標示-相同方式分享 3.0 台灣授權條款” 釋出 13年8月4日星期日

2.

13年8月4日星期日

3.

http://tkirby.org/blog/ tkirby 13年8月4日星期日

4.


5.

in d3js 13年8月4日星期日

6.


7.


8.


9.


10.

稅金正在加速燃燒中 13年8月4日星期日

11.

4 1 秒 450萬 13年8月4日星期日

12.


13.


14.


15.


16.


17.


18.


19.


20.


21.


22.


23.


24.


25.


26.


27.


28.


29.


30.


31.

d3js.org 13年8月4日星期日

32.


33.


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);

38.

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

41.


42.


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

45.


46.


47.


48.

立委投票結果視覺化 http://bl.ocks.org/zbryikt/raw/4248542/ 13年8月4日星期日

49.


50.

in PC-AXIS format 13年8月4日星期日

51.

使用 px.js 讀取 13年8月4日星期日

52.

http://g0v.github.io/twstat/ 13年8月4日星期日

53.


54.

shp → topojson 13年8月4日星期日

55.


56.


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.


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: 你們做得不太對...

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

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

Want more?

Transcript