Data Visualization
with D3.js
More and more data
Data should be analyzed
Visualization can help
Data-Driven Documents
Web Standards
Open source: under BSD license
Plenty of examples
Need a developer…
… and money
Learning curve
Web Standards
Open Source
Plenty of
examples
Need a Developer
Learning Curve
An example
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...
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...
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...
Visualization
SVG Source
Data-driven transformations
Data
selection
Data-driven transformations
Data
binding
Data
selection
Data-driven transformations
Data
binding
Data
selection
Entering
data
Scales
Input
domain
Scales
Input
domain
Output
range
Scales
Input
domain
Output
rangeScaling
algorithm
Transitions
Animation
Thank you!
Alexander Kuznetsov
alexkuznetsov@stiltsoft.com
https://www.facebook.com/kuznetsov.sasha
Визуализируем данные в JavaScript с помощью D3.js
Upcoming SlideShare
Loading in...5
×

Визуализируем данные в JavaScript с помощью D3.js

252

Published on

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

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
252
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Визуализируем данные в JavaScript с помощью D3.js

  1. 1. Data Visualization with D3.js
  2. 2. More and more data
  3. 3. Data should be analyzed
  4. 4. Visualization can help
  5. 5. Data-Driven Documents
  6. 6. Web Standards
  7. 7. Open source: under BSD license
  8. 8. Plenty of examples
  9. 9. Need a developer…
  10. 10. … and money
  11. 11. Learning curve
  12. 12. Web Standards Open Source Plenty of examples Need a Developer Learning Curve
  13. 13. An example
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. Visualization
  18. 18. SVG Source
  19. 19. Data-driven transformations Data selection
  20. 20. Data-driven transformations Data binding Data selection
  21. 21. Data-driven transformations Data binding Data selection Entering data
  22. 22. Scales Input domain
  23. 23. Scales Input domain Output range
  24. 24. Scales Input domain Output rangeScaling algorithm
  25. 25. Transitions Animation
  26. 26. Thank you! Alexander Kuznetsov alexkuznetsov@stiltsoft.com https://www.facebook.com/kuznetsov.sasha
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×