Submit Search
Upload
D3.js 讓你的資料活起來
•
25 likes
•
3,710 views
oxxo studio
Follow
20160305 於 K.NET 社群分享簡報,包含 D3.js 的基本介紹、常用指令,以及利用政府開放資料,所做出來的一些綜合範例。
Read less
Read more
Internet
Report
Share
Report
Share
1 of 101
Download now
Download to read offline
Recommended
Startup science 2017 ①
Startup science 2017 ①
Masa Tadokoro
Top 45 perry ellis international interview questions and answers pdf
Top 45 perry ellis international interview questions and answers pdf
cognostutorial
085 180421 bookclub_disruption bab 4-5
085 180421 bookclub_disruption bab 4-5
Lia s. Associates | Branding & Design
Introducción a Microsoft Azure SQL Data Warehouse
Introducción a Microsoft Azure SQL Data Warehouse
Joseph Lopez
গ্রাম পঞ্চায়েত প্রধান ও উপ প্রধান নির্বাচন
গ্রাম পঞ্চায়েত প্রধান ও উপ প্রধান নির্বাচন
Suman Biswas
Morgenbooster 1508 - Think like a Futurist Act Like a Designer
Morgenbooster 1508 - Think like a Futurist Act Like a Designer
1508 A/S
Fjord Equinox: strategy prototyping
Fjord Equinox: strategy prototyping
Fjord
L'entreprise invincible
L'entreprise invincible
Yves Pigneur
Recommended
Startup science 2017 ①
Startup science 2017 ①
Masa Tadokoro
Top 45 perry ellis international interview questions and answers pdf
Top 45 perry ellis international interview questions and answers pdf
cognostutorial
085 180421 bookclub_disruption bab 4-5
085 180421 bookclub_disruption bab 4-5
Lia s. Associates | Branding & Design
Introducción a Microsoft Azure SQL Data Warehouse
Introducción a Microsoft Azure SQL Data Warehouse
Joseph Lopez
গ্রাম পঞ্চায়েত প্রধান ও উপ প্রধান নির্বাচন
গ্রাম পঞ্চায়েত প্রধান ও উপ প্রধান নির্বাচন
Suman Biswas
Morgenbooster 1508 - Think like a Futurist Act Like a Designer
Morgenbooster 1508 - Think like a Futurist Act Like a Designer
1508 A/S
Fjord Equinox: strategy prototyping
Fjord Equinox: strategy prototyping
Fjord
L'entreprise invincible
L'entreprise invincible
Yves Pigneur
開放資料暨資料視覺化 (D3.js)
開放資料暨資料視覺化 (D3.js)
維佋 唐
[朝陽科大] D3.js 資料視覺化入門
[朝陽科大] D3.js 資料視覺化入門
Kuro Hsu
郵遞公文追蹤系統操作說明
郵遞公文追蹤系統操作說明
小四 曾
2015 JSDC Build Anything with JavaScript
2015 JSDC Build Anything with JavaScript
Web Arduino
Python business intelligence (PyData 2012 talk)
Python business intelligence (PyData 2012 talk)
Stefan Urbanek
[JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化
[JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化
Kuro Hsu
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
台灣資料科學年會
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
Adobe Indesign CS5 iPad magazine 電子雜誌製作流程
Adobe Indesign CS5 iPad magazine 電子雜誌製作流程
yunjuli
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
Rice Tseng
[DDD] 快快樂樂學DDD
[DDD] 快快樂樂學DDD
Clark
Web前端开发的现状和未来
Web前端开发的现状和未来
raywill02
Adobe XD 網頁設計火力展示
Adobe XD 網頁設計火力展示
Jun-I Wu
Ria lqj
Ria lqj
huzilqj
那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
WeiHan Hung
網路、行銷、使用者經驗設計
網路、行銷、使用者經驗設計
Charles (XXC) Chen
UiGathering Talk - Motion User Interface / by Ivan Wei
UiGathering Talk - Motion User Interface / by Ivan Wei
UXTW(Taiwan User Experience Professional Association)
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
Drupal Taiwan
重构代码修炼之道
重构代码修炼之道
Smallni Ding
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
Ying-Chun Cheng
前端开发的现状和未来
前端开发的现状和未来
cly84920
iOS 10 HCI: Information Architecture
iOS 10 HCI: Information Architecture
WANGCHOU LU
More Related Content
Viewers also liked
開放資料暨資料視覺化 (D3.js)
開放資料暨資料視覺化 (D3.js)
維佋 唐
[朝陽科大] D3.js 資料視覺化入門
[朝陽科大] D3.js 資料視覺化入門
Kuro Hsu
郵遞公文追蹤系統操作說明
郵遞公文追蹤系統操作說明
小四 曾
2015 JSDC Build Anything with JavaScript
2015 JSDC Build Anything with JavaScript
Web Arduino
Python business intelligence (PyData 2012 talk)
Python business intelligence (PyData 2012 talk)
Stefan Urbanek
[JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化
[JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化
Kuro Hsu
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
台灣資料科學年會
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
Viewers also liked
(8)
開放資料暨資料視覺化 (D3.js)
開放資料暨資料視覺化 (D3.js)
[朝陽科大] D3.js 資料視覺化入門
[朝陽科大] D3.js 資料視覺化入門
郵遞公文追蹤系統操作說明
郵遞公文追蹤系統操作說明
2015 JSDC Build Anything with JavaScript
2015 JSDC Build Anything with JavaScript
Python business intelligence (PyData 2012 talk)
Python business intelligence (PyData 2012 talk)
[JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化
[JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Similar to D3.js 讓你的資料活起來
Adobe Indesign CS5 iPad magazine 電子雜誌製作流程
Adobe Indesign CS5 iPad magazine 電子雜誌製作流程
yunjuli
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
Rice Tseng
[DDD] 快快樂樂學DDD
[DDD] 快快樂樂學DDD
Clark
Web前端开发的现状和未来
Web前端开发的现状和未来
raywill02
Adobe XD 網頁設計火力展示
Adobe XD 網頁設計火力展示
Jun-I Wu
Ria lqj
Ria lqj
huzilqj
那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
WeiHan Hung
網路、行銷、使用者經驗設計
網路、行銷、使用者經驗設計
Charles (XXC) Chen
UiGathering Talk - Motion User Interface / by Ivan Wei
UiGathering Talk - Motion User Interface / by Ivan Wei
UXTW(Taiwan User Experience Professional Association)
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
Drupal Taiwan
重构代码修炼之道
重构代码修炼之道
Smallni Ding
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
Ying-Chun Cheng
前端开发的现状和未来
前端开发的现状和未来
cly84920
iOS 10 HCI: Information Architecture
iOS 10 HCI: Information Architecture
WANGCHOU LU
C:\Fakepath\Ucd书友会 139
C:\Fakepath\Ucd书友会 139
danisyang2010
《139说客客户端设计》 曾帆扬
《139说客客户端设计》 曾帆扬
top idea
Ucd书友会 139
Ucd书友会 139
bluesnail007
139说客客户端设计
139说客客户端设计
argoy
Autodesk Gameware Introduction
Autodesk Gameware Introduction
FAUST CHOU
面孔
面孔
geekparknet
Similar to D3.js 讓你的資料活起來
(20)
Adobe Indesign CS5 iPad magazine 電子雜誌製作流程
Adobe Indesign CS5 iPad magazine 電子雜誌製作流程
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
[DDD] 快快樂樂學DDD
[DDD] 快快樂樂學DDD
Web前端开发的现状和未来
Web前端开发的现状和未来
Adobe XD 網頁設計火力展示
Adobe XD 網頁設計火力展示
Ria lqj
Ria lqj
那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
網路、行銷、使用者經驗設計
網路、行銷、使用者經驗設計
UiGathering Talk - Motion User Interface / by Ivan Wei
UiGathering Talk - Motion User Interface / by Ivan Wei
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
重构代码修炼之道
重构代码修炼之道
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
前端开发的现状和未来
前端开发的现状和未来
iOS 10 HCI: Information Architecture
iOS 10 HCI: Information Architecture
C:\Fakepath\Ucd书友会 139
C:\Fakepath\Ucd书友会 139
《139说客客户端设计》 曾帆扬
《139说客客户端设计》 曾帆扬
Ucd书友会 139
Ucd书友会 139
139说客客户端设计
139说客客户端设计
Autodesk Gameware Introduction
Autodesk Gameware Introduction
面孔
面孔
D3.js 讓你的資料活起來
1.
D3.js 讓你的資料活起來
2.
WTF….
3.
OXXO 張宗彥 (
張小彥 ) oxxostudio.tw Webduino = Web x Arduino 視覺設計師 + 前端工程師 + 市場行銷 + 課程規劃 中研院、遠綠資訊、鴻海精密、中冠資訊 UI、UX、F2E、CSS ( LESS )、Growth Hack
4.
今天要講的 D3 不是
D3 今天要講的 D3 是 D3
5.
6.
7.
開始之前,要先來聊一下 資料視覺化
8.
「工程師」的資料視覺化
9.
「設計師」的資料視覺化
10.
能不能合而為一呢?
11.
可以的!
12.
所以 工程師去學切圖 所以 設計師去學
HTML 和 CSS
13.
14.
因此,在正式開始之前 先稍微要有一些資料視覺化的認知
15.
視覺化 = 講故事 沒有故事的視覺化
= 沒有視覺化
16.
如同一部沒有劇情的電影是不可能拿奧斯卡獎的
17.
但是,不一定「視覺化」就好
18.
不好的 資料視覺化
19.
20.
http://tpebudget.tonyq.org/budget
21.
好的 資料視覺化
22.
http://env.g0v.tw/air/
23.
http://kiang.github.io/TainanDengueMap
24.
http://water.taiwanstat.com/
25.
不正確的 資料視覺化
26.
27.
28.
29.
資料視覺化 不能一目了然的 資料 一目了然的 資料
30.
資料視覺化 一定要用到 D3.js 嗎?
31.
http://www.highcharts.com/demo
32.
https://developers.google.com/chart/?hl=zh-TW
33.
http://c3js.org
34.
為什麼要用 D3.js ?
35.
D3 = Data-Driven
Documents ( 資料 - 驅動的 - 文件 )
36.
https://d3js.org/
37.
Mike Bostock https://bost.ocks.org/mike/
38.
優點: - 可以直接操作 DOM,方便操控視覺效果 -
優越的資料處理能力 - 資料視覺化的 jQuery - 社群、討論支援度高 缺點: - 較為繁瑣 - 需要有 SVG 的基礎
39.
但... 需要「略懂」SVG...
40.
http://www.oxxostudio.tw/articles/201410/svg-tutorial.html
41.
我的 Blog 也有不少 D3.js
的文章 ( 搜尋 d3 ) http://www.oxxostudio.tw/list.html
42.
開始使用 D3.js <script src="//d3js.org/d3.v3.min.js"></script>
43.
選擇器 d3.select('body').selectAll('.a') .style({ 'color':'#f00', 'font-size':'50px' }); .select() .selectAll() https://jsbin.com/carinu/1/edit?html,js,output
44.
屬性 d3.select('body') .selectAll('circle') .attr({ 'r':'20', 'cx':'50', 'cy':'50' }); .attr() https://jsbin.com/jiqobef/1/edit?html,js,output
45.
樣式名稱 d3.selectAll('div') .classed({ 'big':true, 'red':false }); .classed() https://jsbin.com/kezusi/1/edit?html,css,js,output
46.
TEXT & HTML d3.selectAll('.a') .text('456'); d3.selectAll('.b') .html('<i>456</i>'); .text()
.html() https://jsbin.com/nuweki/1/edit?html,css,js,output
47.
DATA
48.
var data =
[38,69,72,42,58,87]; d3.select('body').selectAll('div') .data(data) .enter() .append('div') .text(function(d){ return d; }).style({ 'color':function(d){ if(d<60){ return 'red'; } } }); https://jsbin.com/golupoyiyu/1/edit?html,js,output
49.
enter update exit
50.
update enter https://jsbin.com/tonepo/1/edit?html,js,output data element
51.
https://jsbin.com/munugu/1/edit?html,js,output data element update exit
52.
DATA.nest()
53.
var data =
[ {name:'Tom' , score:98, type:'class1' , sex:'man'}, {name:'Jack' , score:72, type:'class2' , sex:'man'}, {name:'Owen' , score:93, type:'class3' , sex:'man'}, {name:'Mark' , score:41, type:'class4' , sex:'man'}, {name:'Marry' , score:67, type:'class4' , sex:'woman'}, {name:'Rock' , score:59, type:'class2' , sex:'man'}, {name:'Jason' , score:83, type:'class1' , sex:'man'}, {name:'Peter' , score:47, type:'class3' , sex:'man'}, {name:'Cherry', score:53, type:'class1' , sex:'woman'}, {name:'Jean' , score:68, type:'class4' , sex:'woman'} ]; 假設有一堆資料
54.
var a =
d3.nest() .key(function(d){return d.type;}) .rollup(function(d){return d.length;}) .entries(data); https://jsbin.com/kevayujeve/1/edit?html,js,output 把資料做「巢狀」處理
55.
DATA.map()
56.
var data =
[ {name:'Tom' , type:['a','b','c']}, {name:'Jack' , type:['b','c']}, {name:'Owen' , type:['c','d','e']}, {name:'Mark' , type:['a','c']}, {name:'Marry' , type:['a','b','c','d']}, {name:'Rock' , type:['a','c']}, {name:'Jason' , type:['b','c']}, {name:'Peter' , type:['a','b','c']}, {name:'Cherry', type:['c','d']}, {name:'Jean' , type:['a','c','d']} ]; 假設有一堆資料
57.
var i =
d3.map(data,function(d){return d.name;}); var j = d3.map(data,function(d){return d.type;}); https://jsbin.com/cesareqita/1/edit?html,js,output 把資料做「數據地圖」處理
58.
SCALE
59.
Scale ( 恥尺度
) 示意圖
60.
白話一點來說
61.
var scale =
d3.scale.linear() .range([0,1000]) .domain([0,200]); console.log(scale(20)); https://jsbin.com/maxepiyevo/1/edit?html,js,output
62.
TRANSITION
63.
var show =
d3.select('#show'); show.transition() .duration(2000) .tween("number", function() { var i = d3.interpolateRound(0, 100); return function(t) { this.textContent = i(t); }; }); https://jsbin.com/yeluridono/1/edit?html,js,output
64.
http://www.oxxostudio.tw/demo/201509/svg-d3-15-transition-tween-demo9.html Transition 展示
65.
其實還有很多 兩個小時講不完 ><
66.
例如「Zoom」、「Drag」 都非常有意思 http://www.oxxostudio. tw/articles/201509/svg-d3-17-zoom- behavior.html http://www.oxxostudio. tw/articles/201509/svg-d3-16-drag- behavior.html
67.
不管了,直接看範例 XD
68.
範例 1 2016 台北市政府預算
69.
TonyQ 大神做的 http://tpebudget.tonyq.org/view3
70.
先來抓檔案,tpe2016ap.csv
71.
csv 打開之後長這樣
72.
套用 Treemap 的範例就可以 http://bl.ocks.org/mbostock/4063582
73.
真的這麼簡單?
74.
試一下就知道,換成長條圖 http://bl.ocks.org/mbostock/raw/1283663/
75.
重點在於 先了解這個圖表的 資料格式
76.
然後把 csv 轉成這個格式 ( ajax
的用法 )
77.
套用圖表程式
78.
大功告成 http://example.oxxostudio.tw/d3/budget/index.html
79.
同樣的方式也可以套別種圖表 http://example.oxxostudio.tw/d3/budget/circle.html http://bl.ocks.org/mbostock/7607535
80.
範例 2 2016 總統大選政黨票分佈
81.
畫地圖 使用 TopoJSON topojson 是一個改善
geojson 要去存取過多的重複資 料所做的新的一種資料格式。 這種資料格式比 geojson 可以節省許多的檔案空間 ( 省 80% ),有利讀取的速度。
82.
下載地圖資料 http://data.gov.tw/node/7442
83.
安裝轉換程式,SHP to TopoJSON https://github.com/mbostock/topojson/wiki/Command-Line-Reference
84.
npm install topojson
-g topojson -o map.json -p --shapefile-encoding big5 County_MOI_1041215.shp 轉換成 TopoJSON
85.
<script src="//d3js.org/d3.v3.min.js"></script> <script src="//d3js.org/topojson.v1.min.js"></script> 載入
JS
86.
了解資料格式 https://bost.ocks.org/mike/map/step-3.html
87.
套用地圖 TopoJSON https://bost.ocks.org/mike/map/
88.
畫圖
89.
畫出來了
90.
依據政黨票比例數據,套用顏色、滑鼠事件
91.
大功告成 http://example.oxxostudio.tw/d3/map/taiwan.html
92.
工商服務
93.
https://webduino.io/index.html
94.
http://bin.webduino.io/hogel/edit?html,js,output 擷取現場環境溫濕度,繪製圖表
95.
高雄市政府資料開放平台 + PM2.5
數據 http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=FB&CaseNo2=1&Lang=C
96.
Webduino 高雄市校園空氣品質監測地圖 http://marty5499.github.io/air-schools/index.html
97.
參考資源 http://tedxtaipei.com/articles/the-beauty-of-data-visualization/ http://buzzorange.com/techorange/2014/06/10/30-simple-tools-for-data-visualization/ http://newtoypia.blogspot.tw/2015/11/d3js.html https://www.safaribooksonline.com/blog/2014/02/11/d3-js-maps/ http://blog.infographics.tw/2015/03/d3js-the-introduction/ http://kuro.tw/categories/D3-js https://strongriley.github.io/d3/tutorial/bar-2.html http://bl.ocks.org/mbostock/1283663 http://blog.infographics.tw/2015/04/visualize-geographics-with-d3jshttp://data.gov.tw/node/7442 http://data.gov.tw/geodata_shp https://github.com/mbostock/topojson/wiki https://bost.ocks.org/mike/map/
98.
Kuro Hsu http://www.slideshare.net/kurotanshi?utm_campaign=profiletracking&utm_medium=sssite&utm_source=ssslideview
99.
資料視覺化 Blog http://blog.infographics.tw/
100.
oxxostudio.tw http://oxxostudio.tw
101.
謝謝聆聽
Download now