Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

D3 data, user, interaction

508 views

Published on

  • Be the first to comment

  • Be the first to like this

D3 data, user, interaction

  1. 1. D3 DATA, USER, INTERACTION Maksim Norkin / @MaksimNorkin
  2. 2. WHO AM I? SOFTWARE DEVELOPER @ RUPTELA "CTO" @ ANAVEST
  3. 3. D3 DEEE-THREEE ?
  4. 4. WHAT D3 IS NOT Library to draw maps?
  5. 5. NO
  6. 6. WHAT D3 IS NOT Library to draw fancy graphs?
  7. 7. NO
  8. 8. D3 DATA → DOCUMENT
  9. 9. DATA HOW TO TRANSFORM DATA TO DOCUMENT?
  10. 10. D3 SELECTIONS d.eet""; 3slc(p) d.eet"oypnhcid2"; 3slc(bd :t-hl()) d.eetl(dv) 3slcAl"i"; (a little overlapping with jQuery)
  11. 11. DATA HANDLING IS PERFORMED WITH TWO SELECTIONS slco eetr .ne( etr) slco eetr .xt) ei(
  12. 12. DATA BINDING JSON XML CSV/TSV
  13. 13. COMPLETE EXAMPLE d.eetl(p)/ slcin 3slcAl"" / eeto .aa[,2 3 4 5)/ dt bnig dt(1 , , , ] / aa idn .ne( / dt hnln etr) / aa adig .et"obr) / ato o etr tx(foa"; / cin n ne
  14. 14. COMPLETE EXAMPLE, USING DATA d.eetl(p)/ slcin 3slcAl"" / eeto .aa[,,,,] / dt bnig dt(12345) / aa idn .ne( / dt hnln etr) / aa adig .etfnto(){/ ato o etr tx(ucind / cin n ne rtr d eun ; }; ) Horay to closures!
  15. 15. INTERACTIONS
  16. 16. MOUSEOVER EXAMPLE d.eetl(p)/ slcin 3slcAl"" / eeto .aa[,,,,] / dt bnig dt(12345) / aa idn .ne( / dt hnln etr) / aa adig .etfnto(){/ ato o etr tx(ucind / cin n ne rtr d eun ; } ) .n"osoe" fnto(){/ rgse eet o(muevr, ucind / eitr vn cnoelg"utn w hv amuevro:,d; osl.o(Hso, e ae osoe n" ) } )
  17. 17. FYI
  18. 18. MATH Basic Statistic Methods Range/Domain Data Transformations
  19. 19. SVG Shapes Axes Layouts
  20. 20. GEO Paths Rotations Projections
  21. 21. DEMO TIME!
  22. 22. CLUSTER FORCE
  23. 23. GLOBE
  24. 24. AND MUCH MUCH MORE ON BL.OCKS.ORG and interwebs
  25. 25. THE END THANK YOU! QUESTION TIME!

×