$30 off During Our Annual Pro Sale. View Details »

D3: Data, User, Interaction

D3: Data, User, Interaction

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

Maksim Norkin

December 19, 2013
Tweet

Other Decks in Programming

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!