D3: Data, User, Interaction

Small presentation about D3: http://d3js.org

Transcript

1. D3 DATA, USER, INTERACTION Maksim Norkin / @MaksimNorkin
2. WHO AM I? SOFTWARE DEVELOPER @ RUPTELA "CTO" @ ANAVEST
3. D3 DEEE-THREEE ?
4. WHAT D3 IS NOT Library to draw maps?
5. NO
6. WHAT D3 IS NOT Library to draw fancy graphs?
7. NO
8. D3 DATA → DOCUMENT
9. DATA HOW TO TRANSFORM DATA TO DOCUMENT?
10. D3 SELECTIONS d 3 . s e l e c t ( " p " ) ; d 3 . s e l e c t ( " b o d y p : n t h - c h i l d ( 2 ) " ) ; d 3 . s e l e c t A l l ( " d i v " ) ; (a little overlapping with jQuery)
11. DATA HANDLING IS PERFORMED WITH TWO SELECTIONS s e l e c t o r . e n t e r ( ) s e l e c t o r . e x i t ( )
12. DATA BINDING JSON XML CSV/TSV
13. COMPLETE EXAMPLE d 3 . s e l e c t A l l ( " p " ) / / s e l e c t i o n . d a t a ( [ 1 , 2 , 3 , 4 , 5 ] ) / / d a t a b i n d i n g . e n t e r ( ) / / d a t a h a n d l i n g . t e x t ( " f o o b a r " ) ; / / a c t i o n o n e n t e r
14. COMPLETE EXAMPLE, USING DATA d 3 . s e l e c t A l l ( " p " ) / / s e l e c t i o n . d a t a ( [ 1 , 2 , 3 , 4 , 5 ] ) / / d a t a b i n d i n g . e n t e r ( ) / / d a t a h a n d l i n g . t e x t ( f u n c t i o n ( d ) { / / a c t i o n o n e n t e r r e t u r n d ; } ) ; Horay to closures!
15. INTERACTIONS
16. MOUSEOVER EXAMPLE d 3 . s e l e c t A l l ( " p " ) / / s e l e c t i o n . d a t a ( [ 1 , 2 , 3 , 4 , 5 ] ) / / d a t a b i n d i n g . e n t e r ( ) / / d a t a h a n d l i n g . t e x t ( f u n c t i o n ( d ) { / / a c t i o n o n e n t e r r e t u r n d ; } ) . o n ( " m o u s e o v e r " , f u n c t i o n ( d ) { / / r e g i s t e r e v e n t c o n s o l e . l o g ( " H u s t o n , w e h a v e a m o u s e o v e r o n : " , d ) ; } )
17. FYI
18. MATH Basic Statistic Methods Range/Domain Data Transformations
19. SVG Shapes Axes Layouts
20. GEO Paths Rotations Projections
21. DEMO TIME!
22. CLUSTER FORCE
23. GLOBE
24. AND MUCH MUCH MORE ON BL.OCKS.ORG and interwebs
25. THE END THANK YOU! QUESTION TIME!