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

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

View Slide


View Slide

http://tkirby.org/blog/
tkirby

View Slide


View Slide

in
d3js

View Slide


View Slide

稅金正在加速燃燒中

View Slide

4 1 秒
450萬

View Slide


View Slide

d3js.org

View Slide


View Slide

BROWSER
DATA
DOM

View Slide

Data
Document
....enter().append(“div”)....
... style(“opacity”, function(data) {
return data.value;
});
d3.selectAll(“div.block”).data(myData)...

View Slide

data = [ Math.random() for [0 to 9]]
d3.select(“body”)
.selectAll(“div”)
.data(data)
.enter()
.append(“div”)
...
.exit()
.remove()

View Slide

val = function(d) { return d;};
d3.select(“body”)
.selectAll(“div”)
.style(“opacity”,val)
.text(val);

View Slide

Life Game

View Slide

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

View Slide

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

View Slide


View Slide

....

filter.onkeyup = function() {
nodes.style("display", function(d) {
return (d.toString().search(filter.value)>=0)
?"block":"none";
});
};

View Slide

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

View Slide


View Slide

立委投票結果視覺化
http://bl.ocks.org/zbryikt/raw/4248542/

View Slide


View Slide

in
PC-AXIS
format

View Slide

使用 px.js 讀取

View Slide

http://g0v.github.io/twstat/

View Slide


View Slide

shp → topojson

View Slide


View Slide

Dorling
Cartogram
morphing

View Slide


View Slide

http://www.trulia.com/crime
Crime Maps in San Francisco

View Slide

立委
資訊
開放
立院
標案
分析
流動
民主
人物
關係
選罷
地圖
公民
媒體
弊案揭露
權力制衡
資訊透明

View Slide


View Slide

我們是俗稱科技島的先進國家
開放資料當然不落人後!

View Slide

encoding?

View Slide

Latitude?
Y?

View Slide

?
\n?

View Slide

貼心的ROC統計資訊網使用
來自瑞典的 Open Source 軟體「PX-Web 2007」
( 雖然我們政府自己把它改成只支援 IE )

View Slide

台北市等15個縣市已使用 PX-Web,
並提供 PC-AXIS 格式資料下載
那其他的縣市呢?

View Slide

MS-EXCEL
... 至少不是圖檔啦

View Slide

93
96
99
警政統計年報
Fashion.
176975 vs 269,340

View Slide

台北市 - 主要死因死亡率-年
新北市 - 標準化死亡率-主要死因-年
高雄市 - 主要死因死亡率-年年別,死亡原因死亡率
台中市 - 主要死因死亡率-年期間項目別
台南市 - 戶籍動態出生數、出生率、死亡數、
死亡率、自然增加率、遷入數、遷入率、
遷出數、遷出率、社會增加率、結婚數、
結婚率、離婚數、離婚率-年
鄉鎮級重要指標 - 死亡率
順帶⼀一提, 19個縣市中有 2614 個不同的標題
只有⼀一個標題同時存在於19個縣市中
*19個縣市: 包含新舊制, 已改用 PC-AXIS 檔的縣市共有 19 個

View Slide

我心目中的OPEN DATA
• 要開放且授權(實價登錄?)
• 不需申請, 不該收費(公車資訊?)
• 格式易讀, 不需購買軟體(族繁不及被宰)
• 資料統⼀一具⼀一致性(統計資訊網)
• 要有最基本的閱讀器(data.taipei)
• 要容易被程式處理(六法全書)
• 要有歷史資料, 版本管理(台灣地圖)

View Slide

資料開放
簡易授權
開放格式
統⼀一度量
可程式化
可讀性
視覺化
資料互動
組織資料
資訊散布
資料分析
公民評論

View Slide

政 gov 府
公民
難使用的資料
枯燥的內容
缺乏互動性的界面
沒有在
關注政府
媒體
左右?
挑選過的
引導性內容
藝人,可愛小貓,撿到錢
關注

View Slide

政 gov 府
公民
再次
關切
媒體
左右?
藝人,可愛小貓,撿到錢
較少關注
零 g0v 時
難用的資料
方便,容易的資料
挑選過的
引導性內容

View Slide

-508 2013
圖靈機
ARPANET
民主起源
1215
大憲章

View Slide

政府組織的資訊革命
2007 愛沙尼亞 (Estonia)
人類第⼀一次國家級的網路投票

View Slide

1540 2013
總統直選
首次公投
大肚王國
1895
日本
1647
南明
1683
清朝
1945
ROC
?

View Slide

Q & A
Q: 請問你們是反政府組織嗎?

View Slide

Q & A
Q: 參加 Hackathon後會不會有生命危險?

View Slide

Q & A
Q: 我有⼀一個點子...
Q: 你們怎麼沒有做 xxx
Q: 你們做得不太對...

View Slide

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

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

tkirby

More Decks by tkirby

Other Decks in Programming

Featured

Transcript