Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

D3.js 讓你的資料活起來

3,186 views

Published on

20160305 於 K.NET 社群分享簡報,包含 D3.js 的基本介紹、常用指令,以及利用政府開放資料,所做出來的一些綜合範例。

Published in: Internet
  • Hi, 很感興趣您的分享,不知道有沒有機會能與您見面請教及探討合作的可能呢!?謝謝!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

D3.js 讓你的資料活起來

  1. 1. D3.js 讓你的資料活起來
  2. 2. WTF….
  3. 3. OXXO 張宗彥 ( 張小彥 ) oxxostudio.tw Webduino = Web x Arduino 視覺設計師 + 前端工程師 + 市場行銷 + 課程規劃 中研院、遠綠資訊、鴻海精密、中冠資訊 UI、UX、F2E、CSS ( LESS )、Growth Hack
  4. 4. 今天要講的 D3 不是 D3 今天要講的 D3 是 D3
  5. 5. 開始之前,要先來聊一下 資料視覺化
  6. 6. 「工程師」的資料視覺化
  7. 7. 「設計師」的資料視覺化
  8. 8. 能不能合而為一呢?
  9. 9. 可以的!
  10. 10. 所以 工程師去學切圖 所以 設計師去學 HTML 和 CSS
  11. 11. 因此,在正式開始之前 先稍微要有一些資料視覺化的認知
  12. 12. 視覺化 = 講故事 沒有故事的視覺化 = 沒有視覺化
  13. 13. 如同一部沒有劇情的電影是不可能拿奧斯卡獎的
  14. 14. 但是,不一定「視覺化」就好
  15. 15. 不好的 資料視覺化
  16. 16. http://tpebudget.tonyq.org/budget
  17. 17. 好的 資料視覺化
  18. 18. http://env.g0v.tw/air/
  19. 19. http://kiang.github.io/TainanDengueMap
  20. 20. http://water.taiwanstat.com/
  21. 21. 不正確的 資料視覺化
  22. 22. 資料視覺化 不能一目了然的 資料 一目了然的 資料
  23. 23. 資料視覺化 一定要用到 D3.js 嗎?
  24. 24. http://www.highcharts.com/demo
  25. 25. https://developers.google.com/chart/?hl=zh-TW
  26. 26. http://c3js.org
  27. 27. 為什麼要用 D3.js ?
  28. 28. D3 = Data-Driven Documents ( 資料 - 驅動的 - 文件 )
  29. 29. https://d3js.org/
  30. 30. Mike Bostock https://bost.ocks.org/mike/
  31. 31. 優點: - 可以直接操作 DOM,方便操控視覺效果 - 優越的資料處理能力 - 資料視覺化的 jQuery - 社群、討論支援度高 缺點: - 較為繁瑣 - 需要有 SVG 的基礎
  32. 32. 但... 需要「略懂」SVG...
  33. 33. http://www.oxxostudio.tw/articles/201410/svg-tutorial.html
  34. 34. 我的 Blog 也有不少 D3.js 的文章 ( 搜尋 d3 ) http://www.oxxostudio.tw/list.html
  35. 35. 開始使用 D3.js <script src="//d3js.org/d3.v3.min.js"></script>
  36. 36. 選擇器 d3.select('body').selectAll('.a') .style({ 'color':'#f00', 'font-size':'50px' }); .select() .selectAll() https://jsbin.com/carinu/1/edit?html,js,output
  37. 37. 屬性 d3.select('body') .selectAll('circle') .attr({ 'r':'20', 'cx':'50', 'cy':'50' }); .attr() https://jsbin.com/jiqobef/1/edit?html,js,output
  38. 38. 樣式名稱 d3.selectAll('div') .classed({ 'big':true, 'red':false }); .classed() https://jsbin.com/kezusi/1/edit?html,css,js,output
  39. 39. 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
  40. 40. DATA
  41. 41. 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
  42. 42. enter update exit
  43. 43. update enter https://jsbin.com/tonepo/1/edit?html,js,output data element
  44. 44. https://jsbin.com/munugu/1/edit?html,js,output data element update exit
  45. 45. DATA.nest()
  46. 46. 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'} ]; 假設有一堆資料
  47. 47. 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 把資料做「巢狀」處理
  48. 48. DATA.map()
  49. 49. 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']} ]; 假設有一堆資料
  50. 50. 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 把資料做「數據地圖」處理
  51. 51. SCALE
  52. 52. Scale ( 恥尺度 ) 示意圖
  53. 53. 白話一點來說
  54. 54. var scale = d3.scale.linear() .range([0,1000]) .domain([0,200]); console.log(scale(20)); https://jsbin.com/maxepiyevo/1/edit?html,js,output
  55. 55. TRANSITION
  56. 56. 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
  57. 57. http://www.oxxostudio.tw/demo/201509/svg-d3-15-transition-tween-demo9.html Transition 展示
  58. 58. 其實還有很多 兩個小時講不完 ><
  59. 59. 例如「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
  60. 60. 不管了,直接看範例 XD
  61. 61. 範例 1 2016 台北市政府預算
  62. 62. TonyQ 大神做的 http://tpebudget.tonyq.org/view3
  63. 63. 先來抓檔案,tpe2016ap.csv
  64. 64. csv 打開之後長這樣
  65. 65. 套用 Treemap 的範例就可以 http://bl.ocks.org/mbostock/4063582
  66. 66. 真的這麼簡單?
  67. 67. 試一下就知道,換成長條圖 http://bl.ocks.org/mbostock/raw/1283663/
  68. 68. 重點在於 先了解這個圖表的 資料格式
  69. 69. 然後把 csv 轉成這個格式 ( ajax 的用法 )
  70. 70. 套用圖表程式
  71. 71. 大功告成 http://example.oxxostudio.tw/d3/budget/index.html
  72. 72. 同樣的方式也可以套別種圖表 http://example.oxxostudio.tw/d3/budget/circle.html http://bl.ocks.org/mbostock/7607535
  73. 73. 範例 2 2016 總統大選政黨票分佈
  74. 74. 畫地圖 使用 TopoJSON topojson 是一個改善 geojson 要去存取過多的重複資 料所做的新的一種資料格式。 這種資料格式比 geojson 可以節省許多的檔案空間 ( 省 80% ),有利讀取的速度。
  75. 75. 下載地圖資料 http://data.gov.tw/node/7442
  76. 76. 安裝轉換程式,SHP to TopoJSON https://github.com/mbostock/topojson/wiki/Command-Line-Reference
  77. 77. npm install topojson -g topojson -o map.json -p --shapefile-encoding big5 County_MOI_1041215.shp 轉換成 TopoJSON
  78. 78. <script src="//d3js.org/d3.v3.min.js"></script> <script src="//d3js.org/topojson.v1.min.js"></script> 載入 JS
  79. 79. 了解資料格式 https://bost.ocks.org/mike/map/step-3.html
  80. 80. 套用地圖 TopoJSON https://bost.ocks.org/mike/map/
  81. 81. 畫圖
  82. 82. 畫出來了
  83. 83. 依據政黨票比例數據,套用顏色、滑鼠事件
  84. 84. 大功告成 http://example.oxxostudio.tw/d3/map/taiwan.html
  85. 85. 工商服務
  86. 86. https://webduino.io/index.html
  87. 87. http://bin.webduino.io/hogel/edit?html,js,output 擷取現場環境溫濕度,繪製圖表
  88. 88. 高雄市政府資料開放平台 + PM2.5 數據 http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=FB&CaseNo2=1&Lang=C
  89. 89. Webduino 高雄市校園空氣品質監測地圖 http://marty5499.github.io/air-schools/index.html
  90. 90. 參考資源 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/
  91. 91. Kuro Hsu http://www.slideshare.net/kurotanshi?utm_campaign=profiletracking&utm_medium=sssite&utm_source=ssslideview
  92. 92. 資料視覺化 Blog http://blog.infographics.tw/
  93. 93. oxxostudio.tw http://oxxostudio.tw
  94. 94. 謝謝聆聽

×