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 / Михаил Дунаев (Rambler&Co)

1,371 views

Published on

Практический опыт использования библиотеки d3.js для создания инфографики. Загрузка, обработка, связывание и визуализация данных.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Визуализация данных в браузере с помощью D3.js / Михаил Дунаев (Rambler&Co)

  1. 1. Михаил Дунаев программист спецпроектов http://lenta.ru ! http://mdunaev.github.io/ Визуализация данных в браузере с помощью d3.js
  2. 2. !2
  3. 3. !3
  4. 4. !4
  5. 5. !5
  6. 6. !6 18 век
  7. 7. !7
  8. 8. !8
  9. 9. !9Charting culture
  10. 10. !10
  11. 11. нам нужно больше диаграмм !11
  12. 12. !12 barchart
  13. 13. !13
  14. 14. !14 circular area map
  15. 15. !15 stacked area
  16. 16. !16
  17. 17. !17
  18. 18. !18
  19. 19. !19
  20. 20. !20
  21. 21. !21
  22. 22. Стандартные диаграммы !22
  23. 23. Одна из лучших библиотек для визуализации данных !23
  24. 24. !24
  25. 25. !25
  26. 26. !26
  27. 27. !27
  28. 28. !28
  29. 29. !29
  30. 30. !30
  31. 31. !31
  32. 32. !32
  33. 33. !33
  34. 34. !34
  35. 35. !35
  36. 36. !36
  37. 37. !37
  38. 38. !38
  39. 39. !39
  40. 40. !40
  41. 41. !41
  42. 42. !42
  43. 43. !43
  44. 44. !44
  45. 45. !45
  46. 46. !46
  47. 47. !47
  48. 48. !48
  49. 49. !49
  50. 50. https://github.com/mbostock/d3/wiki/Gallery & http://bl.ocks.org/mbostock !50
  51. 51. !51
  52. 52. !52
  53. 53. !53
  54. 54. !54
  55. 55. !55
  56. 56. !56
  57. 57. !57
  58. 58. !58
  59. 59. !59
  60. 60. !60
  61. 61. !61
  62. 62. !62
  63. 63. d3.select("div"); d3.selectAll("div"); W3C Selectors API или Sizzle !63
  64. 64. Chaining d3.selectAll("a")! ! .style("color", "red")! ! .attr("href", "http://lenta.ru")! ! .on("click", function(d, i){! ! ! alert("click on a");! ! }); !64
  65. 65. !65
  66. 66. !66
  67. 67. scatter chart
  68. 68. !68 {! ! "deputates":[! ! ! {! ! ! ! "name": "Абалаков Александр Николаевич",! ! ! ! "income": 6641507,! ! ! ! "speeches": 57,! ! ! ! "party": "kprf"! ! ! },! ! ! {! ! ! ! "name": "Абасов Мамед Магарамович",! ! ! ! "income": 3888593,! ! ! ! "speeches": 10,! ! ! ! "party": "er"! ! ! },! ! ! {! ! ! ! "name": "Абрамов Иван Николаевич",! ! ! ! "income": 3877450,! ! ! ! "speeches": 38,! ! ! ! "party": "ldpr"! ! ! }! ....! ! ]! }
  69. 69. <script src="http://d3js.org/d3.v3.min.js" charset="utf-8">! </script>! ! <script type="text/javascript">! ! </script> !69
  70. 70. <script src="http://d3js.org/d3.v3.min.js" charset="utf-8">! </script>! ! <script type="text/javascript">! ! d3.json('data.json', function(error, json){! ! });! ! </script> !70
  71. 71. d3.json('data.json', function(error, json){! ! }); !71
  72. 72. d3.json('data.json', function(error, json){! ! var svg = d3.select('body').append('svg');! ! }); !72
  73. 73. d3.json('data.json', function(error, json){! ! var svg = d3.select('body').append('svg')! ! ! .attr('width', 300).attr('height', 300);! ! }); !73
  74. 74. !74
  75. 75. d3.json('data.json', function(error, json){! ! var svg = d3.select('body').append('svg')! ! ! .attr('width', 300).attr('height', 300);! ! }); !75
  76. 76. d3.json('data.json', function(error, json){! ! var svg = d3.select('body').append('svg')! ! ! .attr('width', 300).attr('height', 300);! ! svg.selectAll('rect'); // []! }); !76
  77. 77. d3.json('data.json', function(error, json){! ! var svg = d3.select('body').append('svg')! ! ! .attr('width', 300).attr('height', 300);! ! svg.selectAll('rect')! .data(json.deputates);! }); !77
  78. 78. !78 Data DOM Data-driven
  79. 79. !79 Data DOM
  80. 80. !80 Data DOM
  81. 81. d3.json('data.json', function(error, json){! ! var svg = d3.select('body').append('svg')! ! ! .attr('width', 300).attr('height', 300);! ! svg.selectAll('rect')! .data(json.deputates);! }); !81
  82. 82. d3.json('data.json', function(error, json){! ! var svg = d3.select('body').append('svg')! ! ! .attr('width', 300).attr('height', 300);! ! svg.selectAll('rect')! .data(json.deputates)! .enter()! .append('rect');! }); !82
  83. 83. !83
  84. 84. d3.json('data.json', function(error, json){! ! var svg = d3.select('body').append('svg')! ! ! .attr('width', 300).attr('height', 300);! ! svg.selectAll('rect')! .data(json.deputates)! .enter()! .append('rect');! }); !84
  85. 85. d3.json('data.json', function(error, json){! ! var svg = d3.select('body').append('svg')! ! ! .attr('width', 300).attr('height', 300);! ! svg.selectAll('rect')! .data(json.deputates)! .enter()! .append('rect')! .attr('width', 10)! .attr('height', 10);! }); !85
  86. 86. d3.json('data.json', function(error, json){! ! var svg = d3.select('body').append('svg')! ! ! .attr('width', 300).attr('height', 300);! ! svg.selectAll('rect')! .data(json.deputates)! .enter()! .append('rect')! .attr('width', 10)! .attr('height', 10);! }); !86
  87. 87. svg.selectAll('rect')! .data(json.deputates)! .enter()! .append('rect')! .attr('width', 10)! .attr('height', 10);! !87
  88. 88. svg.selectAll('rect')! .data(json.deputates)! .enter()! .append('rect')! .attr('width', 10)! .attr('height', 10)! .attr('x', function(d,i){! ! ! ! return d.speeches! ! ! });! !88 {! ! "name": "Абалаков Александр Николаевич",! ! "income": 6641507,! ! "speeches": 57,! ! "party": "kprf"! }
  89. 89. svg.selectAll('rect')! .data(json.deputates)! .enter()! .append('rect')! .attr('width', 10)! .attr('height', 10)! .attr('x', function(d,i){! ! ! ! return d.speeches! ! ! })! .attr('y', function(d,i){! ! ! ! return d.income/100000! ! ! });! !89
  90. 90. !90
  91. 91. svg.selectAll('rect')! .data(json.deputates)! .enter()! .append('rect')! .attr('width', 10)! .attr('height', 10)! .attr('x', function(d,i){! ! ! ! return d.speeches! ! ! })! .attr('y', function(d,i){! ! ! ! return d.income/100000! ! ! })! .attr('fill', function(d,i){! var colors = { kprf:'#FF0000', ! er: '#0000FF',! ldpr:'#00FF00' };! ! ! ! return colors[d.party]! ! ! });! !91
  92. 92. !92
  93. 93. ! <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>! <script type="text/javascript">! ! ! d3.json('data.json', function(error, json){! ! var svg = d3.select('body').append('svg')! ! ! .attr('width', 300).attr('height', 300);! ! ! svg.selectAll('rect')! ! ! .data(json.deputates)! ! ! .enter()! ! ! .append('rect')! ! ! .attr('width', 10)! ! ! .attr('height', 10)! ! ! .attr('x', function(d,i){! ! ! ! return d.speeches! ! ! }).attr('y', function(d,i){! ! ! ! return d.income/100000! ! ! }).attr('fill', function(d,i){! ! ! ! var colors = {kprf:'#FF0000', er:'#0000FF', ldpr:'#00FF00'};! ! ! ! return colors[d.party]! ! ! })! });! ! </script> !93
  94. 94. !94
  95. 95. !95
  96. 96. Анимация! !96 d3.select("body") ! .style("color", "green")! .transition()! .style("color", "red");
  97. 97. http://easings.net !97
  98. 98. layouts Bundle - apply Holten's hierarchical bundling algorithm to edges.! Chord - produce a chord diagram from a matrix of relationships.! Cluster - cluster entities into a dendrogram.! Force - position linked nodes using physical simulation.! Hierarchy - derive a custom hierarchical layout implementation.! Histogram - compute the distribution of data using quantized bins.! Pack - produce a hierarchical layout using recursive circle-packing.! Partition - recursively partition a node tree into a sunburst or icicle.! Pie - compute the start and end angles for arcs in a pie or donut chart.! Stack - compute the baseline for each series in a stacked bar or area chart.! Tree - position a tree of nodes tidily.! Treemap - use recursive spatial subdivision to display a tree of nodes. !98
  99. 99. Streamgraph !99
  100. 100. Hierarchical Edge Bundling !100
  101. 101. Treemap !101
  102. 102. Итого: ! просто быстро красиво !102
  103. 103. https://yadi.sk/d/Jte89fIegnhyR

×