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

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

9. !9Charting culture

10. !10

11. нам нужно больше диаграмм
!11

12. !12
barchart

13. !13

14. !14
circular area map

15. !15
stacked area

16. !16

17. !17

18. !18

19. !19

20. !20

21. !21

22. Стандартные диаграммы
!22

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

50. https://github.com/mbostock/d3/wiki/Gallery
&
http://bl.ocks.org/mbostock
!50

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

71. d3.json('data.json', function(error, json){!
!
});
!71

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

78. !78
Data DOM
Data-driven

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

87. svg.selectAll('rect')!
.data(json.deputates)!
.enter()!
.append('rect')!
.attr('width', 10)!
.attr('height', 10);!
!87

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");

97. http://easings.net
!97

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

100. Hierarchical Edge Bundling
!100

101. Treemap
!101

102. Итого:
!
просто
быстро
красиво
!102

103. https://yadi.sk/d/Jte89fIegnhyR