開放資料暨資料視覺化 (d3.js)
TRANSCRIPT
開放資料暨資料視覺化 (D3.js)May 27, 2015
2015 Spring Web Programming, NCCU唐維佋 (pa4373 <AT> gmail.com)
Licensed by CC-By 4.0
1
Before we start
2
● Download Startkit● Download Apache OpenOffice● For those who use Chrome: (ajax issue)
○ Use Firefox! (it won’t burn your computer)○ Windows: https://code.google.com/p/mongoose/○ OS X / Linux:$ python -m SimpleHTTPServerServing HTTP on 0.0.0.0 port 8000 ...
127.0.0.1 - - [27/May/2015 00:33:23] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [27/May/2015 00:33:23] "GET /js/d3.js HTTP/1.1" 200 -
127.0.0.1 - - [27/May/2015 00:33:23] "GET /js/app.js HTTP/1.1" 200 -
所有的源代碼都可在https://github.com/pa4373/tw-edu-colleges-grant找到
3
{
"name": "段緯宇",
"job": "議員",
"location": "日本, 四國",
"startDate": "2013-08-31T16:00:00.000Z",
"endDate": "2013-09-03T16:00:00.000Z",
"reportDate": "2013-09-04T16:00:00.000Z",
"purpose": "考察",
"report": "妖壽讚"
}
http://www.tccc.gov.tw/wb_introduction02.asp?cno=228&stno=01#top
8
來源:http://en.wikipedia.org/wiki/DIKW_Pyramid#/media/File:DIKW_Pyramid.svg
TED演講:Tim Berners-Lee 爵士 - 下一個網際網路 (http://www.ted.com/talks/tim_berners_lee_on_the_next_web) 9
政府的開放資料
14
來源:http://www.mckinsey.com/insights/business_technology/open_data_unlocking_innovation_and_performance_with_liquid_information
英國政府的開放資料
● 2010年:● data.gov.uk上線
○ 同月,data.london.gov.uk 也上線
● 英國政府釋出開放政府授權 (Open Government Licence)
● 英國圖形測量局發表創用CC授權的版本的地圖
19
英國政府的開放資料
● 2014:○ 根據評比,英國政府在開放資料的努力被評為第一○ mySociety (https://www.mysociety.org/)○ Open Data Institute (http://opendatainstitute.org/)
20
英國政府的開放資料: 加值應用
● Funding Options○ http://data.gov.uk/apps/funding-options○ https://www.fundingoptions.com/
21
英國政府的開放資料: 加值應用
● Who Shall I Vote For?○ http://data.gov.uk/apps/who-shall-i-vote○ http://www.whoshallivotefor.com/
22
美國政府的開放資料
● 2013年,歐巴馬的行政命令。● 開放且機器可讀的政府資料。(你看看人家都
有看到重點......)
23
美國政府的開放資料
● 聯邦政府: www.data.gov/● 地方政府
○ 紐約市: https://data.cityofnewyork.us/, the Big Apps○ 三藩市: http://datasf.org/○ 芝加哥: https://data.cityofchicago.org/
● Open Data 500: http://www.opendata500.com/
24
美國政府的開放資料: 加值應用
25
● www.alltuition.com○ 學費預測○ 財務援助○ 學貸償還
美國政府的開放資料
26
● PHL Crime Mapper: http://www.phlcrimemapper.com/
美國政府的開放資料: 資料梳理
27
● Enigma.io○ Public Data != Accessible Data○ 公私有資料結合查詢
台灣政府的開放資料
實價登錄事件
28http://mmdays.com/2012/11/15/和人民做朋友真的這麼難?民間版全台實價登錄網站的哀歌/
29來源
32
台灣政府的開放資料: g0v
http://g0v.tw/zh-TW/index.html
34
台灣政府的開放資料
● Code for Tomorrow (http://cft.schee.info/)
● 媒合不同領域的資料供給者與需求者
● 孵育公民新創企業與人才
● 國際發展與合作
台灣政府的開放資料
● Open Data 聯盟: http://www.opendata4tw.org.tw/
● 台北市電腦商業同業公會之聯誼性聯盟● 跟政府關係良好,也常是民間跟政府要資料的
角色
35
台灣政府的開放資料
2005: 政府資訊公開法
2011: http://data.taipei/2013: http://data.gov.tw/
37
台灣政府的開放資料
● 果菜花終端機
39
台灣政府的開放資料
● 三秒算房價
40
Raw Data vs API
API: 應用程式介面自己砍柴燒 v.s. 插座
Raw Data: 下載資料集,自己處理 (維護與更新)API: 閱讀文件,自行介接 (資料由提供者更新)
目前台灣都以Raw Data為主,極少有API
41
CSV
● 逗點分隔值(Comma-Separated Values)
42
Year,Make,Model,Description,Price1997,Ford,E350,"ac, abs, moon",3000.001999,Chevy,"Venture ""Extended Edition""","",4900.001999,Chevy,"Venture ""Extended Edition, Very Large""",,5000.001996,Jeep,Grand Cherokee,"MUST SELL!air, moon roof, loaded",4799.00
JSON
43
[
{
"Year": "1997",
"Make": "Ford",
"Model": "E350",
"Description": "ac, abs, moon",
"Price": "3000.00"
},
…….
{
"Year": "1996",
"Make": "Jeep",
"Model": "Grand Cherokee",
"Description": "MUST SELL!\nair, moon roof, loaded",
"Price": "4799.00"
}
]
XML
44
<?xml version="1.0" encoding="UTF-8" ?>
<0>
<Year>1997</Year>
<Make>Ford</Make>
<Model>E350</Model>
<Description>ac, abs, moon</Description>
<Price>3000.00</Price>
</0>
…….
<3>
<Year>1996</Year>
<Make>Jeep</Make>
<Model>Grand Cherokee</Model>
<Description>
MUST SELL!
air, moon roof, loaded</Description>
<Price>4799.00</Price>
</3>
資料星級
45
★ 以開放授權公布在網路上(無論什麼格式)
★★ 以可機讀的結構化資料形式散佈在網路上(如Excel)
★★★ 除了二星級的要求外,以非專有的檔案格式儲存(如CSV)
★★★★ 除以上要求以外,以W3C標準(RDF與SPARQL)使你的內容能被他人連結
★★★★★ 除以上要求以外,與他人的資料交互連結
http://www.w3.org/DesignIssues/LinkedData.html
46
文字編碼
● 數位資料本質是一連串的0與1● 要用0與1表示人類可理解的資料,需要一套設
計過的轉換規則,稱為編碼(Encoding)○ 1100001 代表 a○ 1100010 代表 b (ascii)
● Web與UNIX系統的默認編碼是UTF-8○ ex: 100111101001011 代表 ‘佋’
● Windows預設系統編碼是BIG5 (台灣繁中)● 使用正確的編碼才能打開文件
48
換行符
● 用來辨認換新一行的特殊符號● Windows: \r\n● UNIX: \n
The greater my wisdom, the\n
greater my grief.\n
To increase knowledge only\n
increases sorrow.\n
\n
Ecclesiastes 1:18
The greater my wisdom, the
greater my grief.
To increase knowledge only
increases sorrow.
Ecclesiastes 1:18
The greater my wisdom, the
greater my grief. To increase
knowledge only increases
sorrow.Ecclesiastes 1:18
UNIX系統上的樣子
Windows系統上的樣子
原始檔
Why?
49
Apache OpenOffice
● 免費開源的辦公室軟體● 跨OS、資料轉換提供豐富的選項
○ 各版本Excel支援度不一
● https://www.openoffice.org
動手實作
● 刪除類別以及細項
● 將所有的”(先墊後支)”取代成空字串
● 依照大專院校名稱排序
● 合併同校預算○ 新增一個試算表 (移到A1)○ 資料 > 合併計算
● 重新命名欄位○ “大專院校名稱” > “schoolName”○ “補助經費” > “value”
52
更多關於資料處理
1. 熟練試算表程式2. 使用程式語言來處理資料
a. Python, R都是不錯的候選 (豐富的庫)b. Web Crawler: http://axe.g0v.tw/level/
3. 統計學的解釋能力4. 資料庫管理系統 (RDBMS, Non-RDBMS)5. 從資料裡產生知識的思維
56
南丁格爾 (1820 - 1910)她揪竟做了什麼,讓她留名青史呢?
科科史上的今天:南丁格爾 (http://history.pansci.tw/post/118735917271/5-12-florence-nightingale) 58
資料視覺化: 水庫蓄水量
● http://data.infographics.tw/viz/reservoir/
64
資料視覺化
Dissecting a Trailer: The Parts of the Film That Make the Cut
65
SVG (Scalable Vector Graphics)
矩陣圖形:像素訊息,會失真
69lenna的故事:http://www.cs.cmu.edu/~chuck/lennapg/lenna.shtml
SVG (Scalable Vector Graphics)
● SVG以XML的形式呈現。● XML長得跟HTML很像:標籤 + 屬性● SVG範例時間
72
<svg width="100%" height="768"> <circle cx="100" cy="100" r="50" fill="#ccc" stroke="#000" /> <rect x="0" y="150" width="200" height="50" fill="blue" stroke="#000" /></svg>
SVG (Scalable Vector Graphics)
● 以<svg> tag宣告一個svg區塊,裡面可包含○ Rectangle <rect>○ Circle <circle>○ Ellipse <ellipse>○ Line <line>○ Polyline <polyline>○ Polygon <polygon>○ Path <path>○ Text <text> …….
● 這裏我們玩看看長方形跟圓形就好
73
SVG (Scalable Vector Graphics)
● <rect>○ x○ y○ fill○ width○ height○ stroke
● 給我一個藍色(blue)的, 長100, 寬50的長方形
74
D3.js下載: http://d3js.org/
安裝: <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
script標籤放哪兒比較好呢?
78
D3.js
● 條狀圖範例
80
D3.js: 產生頁面元素 & 綁定資料
● var data = [5, 10, 15, 20, 25];● var rects = d3.select('svg')
.selectAll('rect') .data(data) .enter() .append('rect');
81
D3.js: 畫圖
● var barHeight = 15, barUnit = 10;● rects.attr({
x: 0, y: function (d, i) { return i * (barHeight + 3); }, width: function (d) { return d * barUnit; }, height: barHeight, fill: function (d) { return color(d) } });
82
D3.js: 加上文字
d3.select('svg')
.selectAll('text')
.data(data)
.enter()
.append('text')
.attr({
x: 2,
y: function (d, i) { return i * (barHeight + 3) + 10; },
fill: '#111',
'font-size': '8pt'
})
.text(function (d) { return d; });
83
D3.js
以下泡泡圖教學是基於http://blog.infographics.tw/2015/05/d3js-tutorial-bubble-chart/
教育部103年度大專院校補助
84
87
var data = { children: rawData };
var pack = d3.layout.pack();
pack = pack.padding(2)
.size([1024, 768])
.sort(function (a, b) {
return b.value - a.value;
}); // set the layout
var nodes = pack.nodes(data);
nodes = nodes.filter(function(it) { return it.parent; });
var color = d3.scale.category20(); // helper function to
pick color
88
Map, Filter
1
2
3
4
5
f(1) = 2
f(2) = 4
f(3) = 6
f(4) = 8
f(5) =10
f(x) = x*2
1
2
3
4
5
2
4
P(x): x mod 2 = 0
89
d3.select('svg')
.selectAll('circle') // select existing circles, or create a placeholder
.data(nodes) // parse the data
.enter() // bind the data
.append('circle') // create circle if placeholder exists
.attr({
cx: function (d) { return d.x; },
cy: function (d) { return d.y; },
r: function (d) { return d.r; }
fill: function (d) { return color(d.schoolName); },
stroke: '#444'
}).append('svg:title').text(function (d) {
return d.schoolName + '\n$' +
Number(d.value.toFixed(1)).toLocaleString(); // format the number
to currency
}); // using title attribute to simulate tooltip
注意x, y, r在資料轉變前還不存在
(如果有人欠揍,資料有key叫x, y or z怎辦?)
90
d3.select('svg') .selectAll('text') .data(nodes) .enter() .append('text') .attr({ x: function (d) { return d.x }, // here we set the text in the center of the circle y: function (d) { return d.y }, 'text-anchor': 'middle', 'font-size': '8pt' }).text(function (d) { if (d.value > 600000000) { return d.schoolName; } else { return ''; } }); // only show school name if the grant is larger than.
More…..
● Interactive Data Visualization for the Web● D3plus● MobileVis● 資料視覺化FB粉專
○ blog.infographics.tw● Muyueh● chart.js
91