Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

D3.js 讓你的資料活起來

2 838 vues

Publié le

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

Publié dans : Internet
  • Hi, 很感興趣您的分享,不知道有沒有機會能與您見面請教及探討合作的可能呢!?謝謝!!
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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. 謝謝聆聽

×