Enviar pesquisa
Carregar
D3.js 讓你的資料活起來
•
25 gostaram
•
3,710 visualizações
oxxo studio
Seguir
20160305 於 K.NET 社群分享簡報,包含 D3.js 的基本介紹、常用指令,以及利用政府開放資料,所做出來的一些綜合範例。
Leia menos
Leia mais
Internet
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 101
Baixar agora
Baixar para ler offline
Recomendados
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
Recomendados
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
Mais conteúdo relacionado
Destaque
開放資料暨資料視覺化 (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
Destaque
(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 就愛上 [改]
Semelhante a 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
Semelhante a 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.
謝謝聆聽
Baixar agora