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 的第一堂課 | WeiYuan

166 views

Published on

資料視覺化 - D3 的第一堂課 | WeiYuan

Published in: Technology
  • Be the first to comment

  • Be the first to like this

資料視覺化 - D3 的第一堂課 | WeiYuan

  1. 1. 資料視覺化 - D3 的第⼀堂課 2017/06/27 (Wed.) WeiYuan
  2. 2. site: v123582.github.io line: weiwei63 § 全端⼯程師 + 資料科學家 略懂⼀點網站前後端開發技術,學過資料探勘與機器 學習的⽪⽑。平時熱愛參與技術社群聚會及貢獻開源 程式的樂趣。
  3. 3. Outline § Introduction to D3.js § Environment Setup § First D3 example § Selection and Append § SVG § Data Binding § Style and Attribute § Bar Chart and Plot chart § Transition § Scale, Axis § Chart and C3.js 3
  4. 4. Outline § Introduction to D3.js § Environment Setup § First D3 example § Selection and Append § SVG § Data Binding § Style and Attribute § Bar Chart and Plot chart § Transition § Scale, Axis § Chart and C3.js 4
  5. 5. 5Reference: http://blog.infographics.tw/2015/06/three-keys-to-visualization/
  6. 6. 6Reference: https://source.opennews.org/articles/what-i-learned-recreating-one-chart-using-24-tools/
  7. 7. § D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. 7 Introduction to D3
  8. 8. § D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. 8 Introduction to D3
  9. 9. Why D3 ? 9 Flexibility Interactivity Pretty
  10. 10. Visualizing != Charting 10
  11. 11. What is SVG ? § SVG => Scalable Vector Graphics 11
  12. 12. Hot is data driven ? § document.getElements() + foo loop § Data Binding to DOM 12
  13. 13. D3 Example? § Over 2000 D3.js Examples and Demos § D3 Gallery § 資料視覺化 § Data Visualization 13
  14. 14. Bubble Chart 14 [ [1, 0.3, 0, 0.8, 0, 0.2, 1, 0.5, 0, 0.75], [0.3, 1, 0.5, 0.2, 0.4, 0.3, 0.8, 0.1, 1, 0], [0, 0.5, 1, 0.4, 0, 0.9, 0, 0.2, 1, 0.3], [0.8, 0.2, 0.4, 1, 0.3, 0.4, 0.1, 1, 0.2, 0.9], [0, 0.4, 0, 0.3, 1, 0.1, 0.4, 0, 0.6, 0.7], [0.2, 0.3, 0.9, 0.4, 0.1, 1, 0, 0.1, 0.4, 0.1], [1, 0.8, 0, 0.1, 0.4, 0, 1, 0.5, 0, 1], [0.5, 0.1, 0.2, 1, 0.1, 0, 0.5, 1, 0, 0.4], [0, 1, 1, 0.2, 0.6, 0.4, 0, 0, 1, 0.6], [0.75, 0, 0.3, 0.9, 0.7, 0.1, 1, 0.4, 0.6, 1] ]
  15. 15. Choropleth 15
  16. 16. 16
  17. 17. Prerequisite knowledge § Must: Javascript、HTML § Optinal: CSS、SVG 17
  18. 18. Prerequisite knowledge 18Reference: http://blog.csdn.net/tianxuzhang/article/details/11317667
  19. 19. Outline § Introduction to D3.js § Environment Setup § First D3 example § Selection and Append § SVG § Data Binding § Style and Attribute § Bar Chart and Plot chart § Transition § Scale, Axis § Chart and C3.js 19
  20. 20. Environment Setup § 1. unzip Example.zip § 2. Create index.html inside Example/ § 3. Create index.html and type: 20 1 2 3 4 5 <body></body> <script src="d3.min.js"></script> <script> d3.select("body").text("Hello World!"); </script>
  21. 21. Environment Setup § 1. Download D3.js (https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js) § 2. Create index.html and type: 21 1 2 3 4 5 <body></body> <script src="d3.min.js"></script> <script> d3.select("body").text("Hello World!"); </script>
  22. 22. Outline § Introduction to D3.js § Environment Setup § First D3 example § Selection § SVG § Data Binding § Bar Chart and Plot chart § Transition § Scale, Axis § Chart and C3.js 22
  23. 23. First D3 Example 23 1 2 3 4 5 6 7 8 9 10 11 12 13 14 # Environment Setup <script src="//d3.min.js"></script> # JavaScript Section <script type="text/javascript"> ## Data Binding ## Data Rendering </script> 1. D3 object 2. select and append 3. data binding 4. data rendering
  24. 24. First D3 Example 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ## Data Binding var death_rate = [['越南', 24.26],['阿魯巴', 17.48],['關島', 10.01]]; div_selection = d3.select("body").selectAll("div"); div_data_bind = div_selection.data(death_rate); div_set = div_data_bind.enter().append("div"); div_set = div_data_bind.exit().remove(); div_set.text(function(d,i) { return i + " / " + d[0];}); Reference: http://blog.infographics.tw/2015/03/d3js-the-introduction/
  25. 25. First D3 Example 25 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ## Data Drawing div_set.style("height", "20px"); div_set.style("background", "red"); div_set.style("margin", "5px"); div_set.style("width", function(d,i) { return (d[1] * 10)+"px"; }); Reference: http://blog.infographics.tw/2015/03/d3js-the-introduction/
  26. 26. Try it! 26 § #練習:試著畫⼀個 n 筆資料的⾧條圖。
  27. 27. Try it! 27 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ## Data Binding var dataset = [1, 2, 3, 4, 3, 2, 1]; d3.select(______).selectAll(______).data(______) .enter().append(______) .exit().remove(); ## Data Drawing d3.select(______).selectAll() .style("width", "20px") .style("display", " inline-block") .style("margin-right", "2px") .style("background-color", "RoyalBlue") .style('height', function(d){ return ______ + 'px’ })
  28. 28. Outline § Introduction to D3.js § Environment Setup § First D3 example § Selection and Append § SVG § Data Binding § Style and Attribute § Bar Chart and Plot chart § Transition § Scale, Axis § Chart and C3.js 28
  29. 29. D3 Selection 29 1. D3 object 2. select 3. append 4. data binding 5. data rendering Reference: http://www.open-open.com/lib/view/open1438439248706.html
  30. 30. Select and Append 30 1 2 3 d3.select("body") .append("p") .text("New paragraph!"); 1. D3 object 2. select and append 3. data binding 4. data rendering 1 2 3 var body = d3.select("body"); var p = body.append("p"); p.text("New paragraph!"); 1 d3.select("body").append("p").text("New paragraph!");
  31. 31. Try it! 31 § #練習:試著使⽤ D3 印出字串 “Hello World”。
  32. 32. Try it! 32 § #練習:完成以下⼯作, 1. 插⼊⼀個 紅⾊的 h1 標題「我是標題」 2. 插⼊⼀個 藍⾊的 p 段落「我是段落…」 3. 把網⾴背景變成⿊⾊
  33. 33. Try it! 33 § #練習:插⼊ [ 5, 10, 15, 20, 25 ] 數字到 div,其中⼤於 15 的數 字顯⽰為紅⾊。
  34. 34. Outline § Introduction to D3.js § Environment Setup § First D3 example § Selection and Append § SVG § Data Binding § Style and Attribute § Bar Chart and Plot chart § Transition § Scale, Axis § Chart and C3.js 34
  35. 35. SVG § SVG is used to define vector-based graphics for the Web § SVG is a W3C recommendation 35
  36. 36. What is the relationship between D3 and SVG? 36 vector-based graphics structured dynamic Flexibility Interactivity Versatility
  37. 37. How to use SVG ? 37 1 <{shapes tag} {x} {y} {width} {height} {style}> § shapes tag § x, y, width, height, rx, cx, cy, r § style § More SVG Element: reference
  38. 38. Square Rectangle 38 1 2 3 4 5 6 <svg width="100%" height="105"> <rect x="2" y="2" width="100" height="100" style="stroke: #333; stroke-width: 3; fill: FireBrick;"/> <rect x="120" y="2" width="200" height="100" style="stroke: #333; stroke-width: 3; fill: LightSkyBlue;"/> </svg> § reac tag § x, y, width, height § style § fill, stroke
  39. 39. Fillet Rectangle 39 1 2 3 4 5 6 <svg width="100%" height="105"> <rect x="2" y="2" width="100" height="100" rx="10" style="stroke: #333; stroke-width: 3; fill: FireBrick;"></rect> <rect x="120" y="0" width="200" height="100" rx="40" ry="10" style="stroke: #333; stroke-width: 3; fill: red;"></rect> </svg> § reac tag § x, y, width, height, rx § style § fill, stroke
  40. 40. SVG: Circle 40 1 2 3 4 5 6 7 8 9 <svg width="100%" height="105"> <circle cx="100" cy="51" r="50" stroke="#333" stroke-width="3" fill="SeaShell"/> </svg> <svg width="100%" height="100%"> <circle style="cx:220;cy:45;r:10;fill:red;stroke:green"/> </svg> § circle tag § cx, cy, rw § style § fill, stroke
  41. 41. The attribute of SVG 样式/属性 含义 可能的值 fill 填充 颜⾊值 stroke 描边 颜⾊值 stroke-width 描边宽度 数字(通常以像素为单 位) opacity 不透明度 0.0(完全透明)和1.0 (完全不透明)之间的 数值 font-family 字体 text标签特有,CSS字体 font-size 字体⼤⼩ text标签特有,数字 text-anchor 对⻬⽅式 text标签特有, left/center/right 41
  42. 42. The attribute of SVG 42 § Note. 其中顏色可以被指定為: 1. 命名的顏色 green 2. 十六進制值#3388aa或#38A 3. RGB 值 RGB(10,150,20) 4. RGB 與 Alpha 透明 RGBA(10,150,20,0.5)
  43. 43. Try it! 43 § #練習:利⽤ SVG 畫⼀個紅⾊的圓。
  44. 44. Try it! 44 § #練習:承上題,紅⾊圈圈外⾯加⼀個⽅框框
  45. 45. Try it! 45 § #練習:利⽤ SVG 畫⼀個臉。
  46. 46. Use D3 to SVG (attr) 46 1 2 3 4 <svg width="100%" height="105"> <circle cx="100" cy="51" r="50" stroke="#333" stroke-width="3" fill="SeaShell"/> </svg> 1 2 3 4 5 6 7 8 9 //Create SVG element var svg = d3.select("body") .append("svg") .append("circle") .attr("cx", 100) .attr("cy", 50); .attr("r", 50); .attrs({'stroke': '#333'; 'stroke-width': 3; 'fill': 'SeaShell';})
  47. 47. Use D3 to SVG (div) 47 1 2 3 4 <svg width="100%" height="105"> <circle style="cx:220;cy:45;r:10;fill:red;stroke:green"/> </svg> 1 2 3 4 5 6 7 8 9 //Create SVG element var svg = d3.select("body") .append("svg") .append("circle") .style("cx", 100) .style("cy", 50); .style("r", 50); .styles({'stroke': '#333'; 'stroke-width': 3; 'fill': 'SeaShell';})
  48. 48. Try it! 48 § #練習:利⽤ SVG 畫⼀個紅⾊的圓且外⾯加⼀個⽅框框。
  49. 49. Try it! 49 § #練習:利⽤ D3 把所有圓圈變紅。
  50. 50. Try it! 50 § #練習:承上題,要怎麼只把眼睛的外圈變紅?
  51. 51. Try it! 51 § #練習:承上題,加⼀個臉的輪廓。
  52. 52. Try it! 52 § #練習:我們在 first d3 example 使⽤過 div 來話⾧條圖,現在 試著改成⽤ SVG + D3 畫畫看。
  53. 53. Try it! 53 § #練習:承上題,改成直的⾧條圖。
  54. 54. Try it! 54 § #練習:試試看畫下列越來越⼤的圓。
  55. 55. Try it! 55 § #練習:畫⼀個點散布圖。
  56. 56. Outline § Introduction to D3.js § Environment Setup § First D3 example § Selection and Append § SVG § Data Binding § Style and Attribute § Bar Chart and Plot chart § Transition § Scale, Axis § Chart and C3.js 56
  57. 57. Data Binding 57 1 2 3 4 5 6 7 8 9 10 11 // Data var dataset = [ 5, 10, 15, 20, 25 ]; // Selectionp = d3.select("body").selectAll("p"); // binding p.data(dataset) .enter() .append("p") .text("New paragraph!"); 1. D3 object 2. select and append 3. data binding 4. data rendering
  58. 58. 58Reference: http://ptamarit.com/slides-data-viz-web-d3/en/#/
  59. 59. 59Reference: https://www.slideshare.net/kurotanshi/d3-48180820
  60. 60. 60Reference: https://www.slideshare.net/kurotanshi/d3-48180820
  61. 61. 61Reference: https://www.slideshare.net/kurotanshi/d3-48180820
  62. 62. Data Binding with Function Callback 62 1 2 3 4 5 6 7 8 9 10 11 // Data var dataset = [ 5, 10, 15, 20, 25 ]; // Selectionp = d3.select("body").selectAll("p"); // binding p.data(dataset) .enter() .append("p") .text(function(d,i){return d + i}); 1. D3 object 2. select and append 3. data binding 4. data rendering
  63. 63. Outline § Introduction to D3.js § Environment Setup § First D3 example § Selection and Append § SVG § Data Binding § Style and Attribute § Bar Chart and Plot chart § Transition § Scale, Axis § Chart and C3.js 63
  64. 64. Outline § Introduction to D3.js § Environment Setup § First D3 example § Selection and Append § SVG § Data Binding § Style and Attribute § Bar Chart and Plot chart § Transition § Scale, Axis § Chart and C3.js 64
  65. 65. Outline § Introduction to D3.js § Environment Setup § First D3 example § Selection and Append § SVG § Data Binding § Style and Attribute § Bar Chart and Plot chart § Transition § Scale, Axis § Chart and C3.js 65
  66. 66. Outline § Introduction to D3.js § Environment Setup § First D3 example § Selection and Append § SVG § Data Binding § Style and Attribute § Bar Chart and Plot chart § Transition § Scale, Axis § Chart and C3.js 66
  67. 67. Outline § Introduction to D3.js § Environment Setup § First D3 example § Selection and Append § SVG § Data Binding § Style and Attribute § Bar Chart and Plot chart § Transition § Scale, Axis § Chart and C3.js 67
  68. 68. Thanks for listening. 2017/06/27 (Wed.) 資料視覺化 - D3 的第⼀堂課 Wei-Yuan Chang v123582@gmail.com v123582.github.io

×