Визуализация данных в браузере с помощью D3.js / Михаил Дунаев (Rambler&Co)
0 likes1,847 views
Практический опыт использования библиотеки d3.js для создания инфографики. Загрузка, обработка, связывание и визуализация данных.
![!68
{!
! "deputates":[!
! ! {!
! ! ! "name": "Абалаков Александр Николаевич",!
! ! ! "income": 6641507,!
! ! ! "speeches": 57,!
! ! ! "party": "kprf"!
! ! },!
! ! {!
! ! ! "name": "Абасов Мамед Магарамович",!
! ! ! "income": 3888593,!
! ! ! "speeches": 10,!
! ! ! "party": "er"!
! ! },!
! ! {!
! ! ! "name": "Абрамов Иван Николаевич",!
! ! ! "income": 3877450,!
! ! ! "speeches": 38,!
! ! ! "party": "ldpr"!
! ! }!
....!
! ]!
}](https://image.slidesharecdn.com/d3-160130181812/85/D3-js-Rambler-Co-68-320.jpg)
![d3.json('data.json', function(error, json){!
!
var svg = d3.select('body').append('svg')!
! ! .attr('width', 300).attr('height', 300);!
!
svg.selectAll('rect'); // []!
});
!76](https://image.slidesharecdn.com/d3-160130181812/85/D3-js-Rambler-Co-76-320.jpg)
![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](https://image.slidesharecdn.com/d3-160130181812/85/D3-js-Rambler-Co-91-320.jpg)
![!
<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](https://image.slidesharecdn.com/d3-160130181812/85/D3-js-Rambler-Co-93-320.jpg)
Визуализация данных в браузере с помощью D3.js / Михаил Дунаев (Rambler&Co)
- 1. Михаил Дунаев программист спецпроектов http://lenta.ru ! http://mdunaev.github.io/ Визуализация данных в браузере с помощью d3.js
- 2. !2
- 3. !3
- 4. !4
- 5. !5
- 6. !6 18 век
- 7. !7
- 8. !8
- 10. !10
- 11. нам нужно больше диаграмм !11
- 12. !12 barchart
- 13. !13
- 15. !15 stacked area
- 16. !16
- 17. !17
- 18. !18
- 19. !19
- 20. !20
- 21. !21
- 23. Одна из лучших библиотек для визуализации данных !23
- 24. !24
- 25. !25
- 26. !26
- 27. !27
- 28. !28
- 29. !29
- 30. !30
- 31. !31
- 32. !32
- 33. !33
- 34. !34
- 35. !35
- 36. !36
- 37. !37
- 38. !38
- 39. !39
- 40. !40
- 41. !41
- 42. !42
- 43. !43
- 44. !44
- 45. !45
- 46. !46
- 47. !47
- 48. !48
- 49. !49
- 51. !51
- 52. !52
- 53. !53
- 54. !54
- 55. !55
- 56. !56
- 57. !57
- 58. !58
- 59. !59
- 60. !60
- 61. !61
- 62. !62
- 63. d3.select("div"); d3.selectAll("div"); W3C Selectors API или Sizzle !63
- 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
- 66. !66
- 67. scatter chart
- 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. <script src="http://d3js.org/d3.v3.min.js" charset="utf-8">! </script>! ! <script type="text/javascript">! ! </script> !69
- 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
- 72. d3.json('data.json', function(error, json){! ! var svg = d3.select('body').append('svg');! ! }); !72
- 73. d3.json('data.json', function(error, json){! ! var svg = d3.select('body').append('svg')! ! ! .attr('width', 300).attr('height', 300);! ! }); !73
- 74. !74
- 75. d3.json('data.json', function(error, json){! ! var svg = d3.select('body').append('svg')! ! ! .attr('width', 300).attr('height', 300);! ! }); !75
- 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. 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
- 79. !79 Data DOM
- 80. !80 Data DOM
- 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. 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
- 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. 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. 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
- 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. 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
- 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
- 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
- 95. !95
- 96. Анимация! !96 d3.select("body") ! .style("color", "green")! .transition()! .style("color", "red");
- 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. Streamgraph !99
- 101. Treemap !101