Александр Кузнецов «Визуализируем данные в JavaScript с помощью D3.js» Frontend Dev Conf'14 www.fdconf.by

1. Data Visualization
with D3.js

2. More and more data

3. Data should be analyzed

4. Visualization can help

5. Data-Driven Documents

7. Web Standards

8. Open source: under BSD license

9. Plenty of examples

10. Need a developer…

11. … and money

12. Learning curve

13. Web Standards
Open Source
Plenty of
examples
Need a Developer
Learning Curve

14. An example

15. Sample data
00
01
01
02
02
03
03
04
04
05
05
06
06
07
07
08
08
09
09
10
10
11
11
12
12
13
13
14
14
15
15
16
16
17
17
18
18
19
19
20
20
21
21
22
22
23
23
00
Sun
Mon
Tue
Wed
Thu
Fri
Sat

16. 00
01
01
02
02
03
03
04
04
05
05
06
06
07
07
08
08
09
09
10
10
11
11
12
12
13
Sun
Mon
2
Tue
Wed
Thu
Hour
range
Day of
week
Commits
number

17. Sample data
00
01
01
02
02
03
03
04
04
05
05
06
06
07
07
08
08
09
09
10
10
11
11
12
12
13
13
14
14
15
15
16
16
17
17
18
18
19
19
20
20
21
21
22
22
23
23
00
Sun 1 0 0 0 0 0 0 0 0 0 1 5 9 9 6 9 2 1 2 0 2 11 2 0
Mon 0 2 1 1 0 0 0 0 0 0 3 2 7 15 2 11 13 7 6 1 1 3 4 7
Tue 5 2 1 0 0 0 1 0 4 1 0 9 6 8 5 4 10 6 5 4 1 2 5 3
Wed 1 2 2 0 1 0 0 0 0 1 1 4 12 6 2 7 6 5 4 3 0 3 13 10
Thu 3 0 2 1 2 0 0 1 0 0 2 2 7 10 3 5 5 7 6 2 3 6 4 7
Fri 3 3 3 0 0 1 0 0 1 0 4 5 8 8 3 2 9 4 7 2 2 3 4 2
Sat 1 0 0 0 1 0 0 0 0 0 0 0 5 3 3 0 2 1 0 2 7 3 4 3

18. Visualization

19. SVG Source

20. Data-driven transformations
Data
selection

21. Data-driven transformations
Data
binding
Data
selection

22. Data-driven transformations
Data
binding
Data
selection
Entering
data

23. Scales
Input
domain

24. Scales
Input
domain
Output
range

25. Scales
Input
domain
Output
rangeScaling
algorithm

26. Transitions
Animation

27. Thank you!
Alexander Kuznetsov
alexkuznetsov@stiltsoft.com
https://www.facebook.com/kuznetsov.sasha