D3.js 讓你的資料活起來
•
25 j'aime•3,710 vues
20160305 於 K.NET 社群分享簡報，包含 D3.js 的基本介紹、常用指令，以及利用政府開放資料，所做出來的一些綜合範例。
Contenu connexe
Tendances
Tendances (8)
En vedette
Similaire à D3.js 讓你的資料活起來
Similaire à D3.js 讓你的資料活起來 (20)
D3.js 讓你的資料活起來
- 2. WTF….
- 3. OXXO 張宗彥 ( 張小彥 ) oxxostudio.tw Webduino = Web x Arduino 視覺設計師 + 前端工程師 + 市場行銷 + 課程規劃 中研院、遠綠資訊、鴻海精密、中冠資訊 UI、UX、F2E、CSS ( LESS )、Growth Hack
- 4. 今天要講的 D3 不是 D3 今天要講的 D3 是 D3
- 8. 「工程師」的資料視覺化
- 9. 「設計師」的資料視覺化
- 10. 能不能合而為一呢？
- 11. 可以的！
- 12. 所以 工程師去學切圖 所以 設計師去學 HTML 和 CSS
- 15. 視覺化 = 講故事 沒有故事的視覺化 = 沒有視覺化
- 17. 但是，不一定「視覺化」就好
- 18. 不好的 資料視覺化
- 21. 好的 資料視覺化
- 25. 不正確的 資料視覺化
- 33. http://c3js.org
- 34. 為什麼要用 D3.js ?
- 35. D3 = Data-Driven Documents （ 資料 - 驅動的 - 文件 ）
- 38. 優點： - 可以直接操作 DOM，方便操控視覺效果 - 優越的資料處理能力 - 資料視覺化的 jQuery - 社群、討論支援度高 缺點： - 較為繁瑣 - 需要有 SVG 的基礎
- 41. 我的 Blog 也有不少 D3.js 的文章 ( 搜尋 d3 ) http://www.oxxostudio.tw/list.html
- 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
- 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
- 67. 不管了，直接看範例 XD
- 71. csv 打開之後長這樣
- 73. 真的這麼簡單？
- 76. 然後把 csv 轉成這個格式 ( ajax 的用法 )
- 77. 套用圖表程式
- 79. 同樣的方式也可以套別種圖表 http://example.oxxostudio.tw/d3/budget/circle.html http://bl.ocks.org/mbostock/7607535
- 81. 畫地圖 使用 TopoJSON topojson 是一個改善 geojson 要去存取過多的重複資 料所做的新的一種資料格式。 這種資料格式比 geojson 可以節省許多的檔案空間 ( 省 80% )，有利讀取的速度。
- 84. npm install topojson -g topojson -o map.json -p --shapefile-encoding big5 County_MOI_1041215.shp 轉換成 TopoJSON
- 88. 畫圖
- 89. 畫出來了
- 92. 工商服務
- 95. 高雄市政府資料開放平台 + PM2.5 數據 http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=FB&CaseNo2=1&Lang=C
- 101. 謝謝聆聽