Enviar búsqueda
Cargar
D3.js 讓你的資料活起來
•
25 recomendaciones
•
3,710 vistas
oxxo studio
Seguir
20160305 於 K.NET 社群分享簡報,包含 D3.js 的基本介紹、常用指令,以及利用政府開放資料,所做出來的一些綜合範例。
Leer menos
Leer más
Internet
Denunciar
Compartir
Denunciar
Compartir
1 de 101
Descargar ahora
Descargar para leer sin conexión
Recomendados
Startup science 2018 9 イテレーションと計測
Startup science 2018 9 イテレーションと計測
Masa Tadokoro
図形伝達ゲーム「グラコミ」
図形伝達ゲーム「グラコミ」
Jun Chiba
【人事向け勉強会(1.19)】Retty社 奥田様 ご登壇スライド
【人事向け勉強会(1.19)】Retty社 奥田様 ご登壇スライド
Poole Team
伝わるスライドデザイン術
伝わるスライドデザイン術
Concent, Inc.
広島大学情報セキュリティ・コンプライアンス講習2018
広島大学情報セキュリティ・コンプライアンス講習2018
imc-isec-comp
バリュープロポジションキャンバス
バリュープロポジションキャンバス
sato_econj
紅太陽是怎樣升起的 高華.pdf
紅太陽是怎樣升起的 高華.pdf
ChanChunSing2
Tinh toan thuc hanh ck btct (t1) gs nguyen dinh cong
Tinh toan thuc hanh ck btct (t1) gs nguyen dinh cong
dinhthuanxd
Recomendados
Startup science 2018 9 イテレーションと計測
Startup science 2018 9 イテレーションと計測
Masa Tadokoro
図形伝達ゲーム「グラコミ」
図形伝達ゲーム「グラコミ」
Jun Chiba
【人事向け勉強会(1.19)】Retty社 奥田様 ご登壇スライド
【人事向け勉強会(1.19)】Retty社 奥田様 ご登壇スライド
Poole Team
伝わるスライドデザイン術
伝わるスライドデザイン術
Concent, Inc.
広島大学情報セキュリティ・コンプライアンス講習2018
広島大学情報セキュリティ・コンプライアンス講習2018
imc-isec-comp
バリュープロポジションキャンバス
バリュープロポジションキャンバス
sato_econj
紅太陽是怎樣升起的 高華.pdf
紅太陽是怎樣升起的 高華.pdf
ChanChunSing2
Tinh toan thuc hanh ck btct (t1) gs nguyen dinh cong
Tinh toan thuc hanh ck btct (t1) gs nguyen dinh cong
dinhthuanxd
情報システム部門の組織開発
情報システム部門の組織開発
Kazutaka Sankai
今どきの若手育成にひそむ3つの思いこみ
今どきの若手育成にひそむ3つの思いこみ
Mariko Hayashi
UXデザインのはじめの一歩を体験しよう! 〜ユーザーインタビュー、ユーザー心理分析の基本〜
UXデザインのはじめの一歩を体験しよう! 〜ユーザーインタビュー、ユーザー心理分析の基本〜
Yoshiki Hayama
育ち盛りの7年目 -愛されるkintoneのはぐくみ方-
育ち盛りの7年目 -愛されるkintoneのはぐくみ方-
Cybozucommunity
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
Yoshiki Hayama
馬玉山觀光工廠 - 紅頂穀創 整合行銷企劃 (整合行銷規劃師乙級證照檢定術科)
馬玉山觀光工廠 - 紅頂穀創 整合行銷企劃 (整合行銷規劃師乙級證照檢定術科)
柏文 王
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
Yu Morita
導演您的教學簡報
導演您的教學簡報
林 稚蓉
寫出一份令人無法拒絕的企劃案 ( Planning Case Lecture )
寫出一份令人無法拒絕的企劃案 ( Planning Case Lecture )
Norika
プロダクトオーナーが知るべき97のこと
プロダクトオーナーが知るべき97のこと
toshihiro ichitani
如何寫出一份能讓客戶買單的企劃案
如何寫出一份能讓客戶買單的企劃案
Norika
TOC/CCPM+アジャイルで不確実性をマネジメントする
TOC/CCPM+アジャイルで不確実性をマネジメントする
ESM SEC
Startup finace 2018 ② ベンチャーファイナンスの型
Startup finace 2018 ② ベンチャーファイナンスの型
Masa Tadokoro
한국 애니메이션 산업의 현황
한국 애니메이션 산업의 현황
Sam Lee
Cybozu Days 2017 東京 「俺たちのGaroon」
Cybozu Days 2017 東京 「俺たちのGaroon」
Cybozucommunity
Creator marketing startup Pearpop's $18M Series A pitch deck
Creator marketing startup Pearpop's $18M Series A pitch deck
Pitch Decks
Startup Scienceの要諦 ①
Startup Scienceの要諦 ①
Masa Tadokoro
How to Develop a Social Media Strategy
How to Develop a Social Media Strategy
Dr Karen Sutherland
Accounting teacher s_book
Accounting teacher s_book
SergioMndez19
觀光旅遊業提案|數位行銷解決方案|Instagram社群經營術|卡特整合行銷.2021.Q3
觀光旅遊業提案|數位行銷解決方案|Instagram社群經營術|卡特整合行銷.2021.Q3
Jialing Chang
開放資料暨資料視覺化 (D3.js)
開放資料暨資料視覺化 (D3.js)
維佋 唐
[朝陽科大] D3.js 資料視覺化入門
[朝陽科大] D3.js 資料視覺化入門
Kuro Hsu
Más contenido relacionado
La actualidad más candente
情報システム部門の組織開発
情報システム部門の組織開発
Kazutaka Sankai
今どきの若手育成にひそむ3つの思いこみ
今どきの若手育成にひそむ3つの思いこみ
Mariko Hayashi
UXデザインのはじめの一歩を体験しよう! 〜ユーザーインタビュー、ユーザー心理分析の基本〜
UXデザインのはじめの一歩を体験しよう! 〜ユーザーインタビュー、ユーザー心理分析の基本〜
Yoshiki Hayama
育ち盛りの7年目 -愛されるkintoneのはぐくみ方-
育ち盛りの7年目 -愛されるkintoneのはぐくみ方-
Cybozucommunity
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
Yoshiki Hayama
馬玉山觀光工廠 - 紅頂穀創 整合行銷企劃 (整合行銷規劃師乙級證照檢定術科)
馬玉山觀光工廠 - 紅頂穀創 整合行銷企劃 (整合行銷規劃師乙級證照檢定術科)
柏文 王
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
Yu Morita
導演您的教學簡報
導演您的教學簡報
林 稚蓉
寫出一份令人無法拒絕的企劃案 ( Planning Case Lecture )
寫出一份令人無法拒絕的企劃案 ( Planning Case Lecture )
Norika
プロダクトオーナーが知るべき97のこと
プロダクトオーナーが知るべき97のこと
toshihiro ichitani
如何寫出一份能讓客戶買單的企劃案
如何寫出一份能讓客戶買單的企劃案
Norika
TOC/CCPM+アジャイルで不確実性をマネジメントする
TOC/CCPM+アジャイルで不確実性をマネジメントする
ESM SEC
Startup finace 2018 ② ベンチャーファイナンスの型
Startup finace 2018 ② ベンチャーファイナンスの型
Masa Tadokoro
한국 애니메이션 산업의 현황
한국 애니메이션 산업의 현황
Sam Lee
Cybozu Days 2017 東京 「俺たちのGaroon」
Cybozu Days 2017 東京 「俺たちのGaroon」
Cybozucommunity
Creator marketing startup Pearpop's $18M Series A pitch deck
Creator marketing startup Pearpop's $18M Series A pitch deck
Pitch Decks
Startup Scienceの要諦 ①
Startup Scienceの要諦 ①
Masa Tadokoro
How to Develop a Social Media Strategy
How to Develop a Social Media Strategy
Dr Karen Sutherland
Accounting teacher s_book
Accounting teacher s_book
SergioMndez19
觀光旅遊業提案|數位行銷解決方案|Instagram社群經營術|卡特整合行銷.2021.Q3
觀光旅遊業提案|數位行銷解決方案|Instagram社群經營術|卡特整合行銷.2021.Q3
Jialing Chang
La actualidad más candente
(20)
情報システム部門の組織開発
情報システム部門の組織開発
今どきの若手育成にひそむ3つの思いこみ
今どきの若手育成にひそむ3つの思いこみ
UXデザインのはじめの一歩を体験しよう! 〜ユーザーインタビュー、ユーザー心理分析の基本〜
UXデザインのはじめの一歩を体験しよう! 〜ユーザーインタビュー、ユーザー心理分析の基本〜
育ち盛りの7年目 -愛されるkintoneのはぐくみ方-
育ち盛りの7年目 -愛されるkintoneのはぐくみ方-
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
馬玉山觀光工廠 - 紅頂穀創 整合行銷企劃 (整合行銷規劃師乙級證照檢定術科)
馬玉山觀光工廠 - 紅頂穀創 整合行銷企劃 (整合行銷規劃師乙級證照檢定術科)
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
導演您的教學簡報
導演您的教學簡報
寫出一份令人無法拒絕的企劃案 ( Planning Case Lecture )
寫出一份令人無法拒絕的企劃案 ( Planning Case Lecture )
プロダクトオーナーが知るべき97のこと
プロダクトオーナーが知るべき97のこと
如何寫出一份能讓客戶買單的企劃案
如何寫出一份能讓客戶買單的企劃案
TOC/CCPM+アジャイルで不確実性をマネジメントする
TOC/CCPM+アジャイルで不確実性をマネジメントする
Startup finace 2018 ② ベンチャーファイナンスの型
Startup finace 2018 ② ベンチャーファイナンスの型
한국 애니메이션 산업의 현황
한국 애니메이션 산업의 현황
Cybozu Days 2017 東京 「俺たちのGaroon」
Cybozu Days 2017 東京 「俺たちのGaroon」
Creator marketing startup Pearpop's $18M Series A pitch deck
Creator marketing startup Pearpop's $18M Series A pitch deck
Startup Scienceの要諦 ①
Startup Scienceの要諦 ①
How to Develop a Social Media Strategy
How to Develop a Social Media Strategy
Accounting teacher s_book
Accounting teacher s_book
觀光旅遊業提案|數位行銷解決方案|Instagram社群經營術|卡特整合行銷.2021.Q3
觀光旅遊業提案|數位行銷解決方案|Instagram社群經營術|卡特整合行銷.2021.Q3
Destacado
開放資料暨資料視覺化 (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
Destacado
(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 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
139说客客户端设计
139说客客户端设计
argoy
C:\Fakepath\Ucd书友会 139
C:\Fakepath\Ucd书友会 139
danisyang2010
《139说客客户端设计》 曾帆扬
《139说客客户端设计》 曾帆扬
top idea
Ucd书友会 139
Ucd书友会 139
bluesnail007
Autodesk Gameware Introduction
Autodesk Gameware Introduction
FAUST CHOU
面孔
面孔
geekparknet
Similar 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
139说客客户端设计
139说客客户端设计
C:\Fakepath\Ucd书友会 139
C:\Fakepath\Ucd书友会 139
《139说客客户端设计》 曾帆扬
《139说客客户端设计》 曾帆扬
Ucd书友会 139
Ucd书友会 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.
謝謝聆聽
Descargar ahora