Data-Driven Documents: Visualizing Library Data with D3.js

3668e40f4eca527856c208f48d37a61f?s=47 Bret Davidson
February 13, 2013
430

Data-Driven Documents: Visualizing Library Data with D3.js

3668e40f4eca527856c208f48d37a61f?s=128

Bret Davidson

February 13, 2013
Tweet

Transcript

  1. DATA-DRIVEN DOCUMENTS VISUALIZING LIBRARY DATA WITH D3.JS Bret Davidson |

    NCSU Libraries
  2. D3.js

  3. AGENDA Example Why D3? Data Join API Highlights D3 @

    NCSU Resources
  4. Trulia Trends

  5. WHY D3? Web Standards Capability Community

  6. None
  7. WHY NOT D3? Learning Curve Lower Level Simpler Needs

  8. EXAMPLE v a r d a t a s e

    t = [ 2 0 , 5 , 1 0 , 0 , 5 0 ] ; d 3 . s e l e c t ( ' b o d y ' ) . s e l e c t A l l ( ' p ' ) / / s e l e c t i o n . d a t a ( d a t a s e t ) / / d a t a b i n d i n g . e n t e r ( ) / / c r e a t e e n t e r s e l e c t i o n . a p p e n d ( ' p ' ) / / d o m m a n i p u l a t i o n . s t y l e ( ' f o n t - s i z e ' , ' 5 0 p x ' ) / / s t a t i c p r o p e r t y . t e x t ( f u n c t i o n ( d , i ) { / / d y n a m i c p r o p e r t y r e t u r n i + ' : m y v a l u e i s ' + d ; } ) ;
  9. OUTPUT

  10. DATA JOIN

  11. DATA JOIN DEMO Demo

  12. ENTER + UPDATE + EXIT / / E n t

    e r r e c t s . e n t e r ( ) . a p p e n d ( ' r e c t ' ) ; / / U p d a t e r e c t s . a t t r ( ' x ' , 2 0 ) . a t t r ( ' y ' , f u n c t i o n ( d , i ) { r e t u r n 6 5 * i ; } ) . a t t r ( ' h e i g h t ' , ' 6 0 ' ) . a t t r ( ' w i d t h ' , f u n c t i o n ( d , i ) { r e t u r n x ( d ) ; } ) ; / / E x i t r e c t s . e x i t ( ) . r e m o v e ( ) ;
  13. LINEAR SCALE

  14. LINEAR SCALE v a r f o n t S

    i z e = d 3 . s c a l e . l i n e a r ( ) . d o m a i n ( [ 0 , d 3 . m a x ( d a t a s e t ) ] ) . r a n g e ( [ 2 5 , 5 0 ] ) ;
  15. ARRAY METHODS d 3 . m a x ( a

    r r a y [ , a c c e s s o r ] ) ; d 3 . m i n ( a r r a y [ , a c c e s s o r ] ) ; d 3 . e x t e n t ( a r r a y [ , a c c e s s o r ] ) ; d 3 . s u m ( a r r a y [ , a c c e s s o r ] ) ; d 3 . m e a n ( a r r a y [ , a c c e s s o r ] ) ; d 3 . m e d i a n ( a r r a y [ , a c c e s s o r ] ) ; d 3 . r a n g e ( [ s t a r t , ] s t o p [ , s t e p ] ) ; d 3 . n e s t ( ) . k e y ( f u n c t i o n ( d ) { r e t u r n d . s c h o o l } ) . e n t r i e s ( a r r a y ) ;
  16. OTHER SCALES power() log() quantize() quantile() threshold() ordinal() time()

  17. SVG GENERATORS Area Line Chord Diagonal Symbol

  18. LAYOUTS Force Hiearchy Histogram Pack Treemap

  19. AND MORE! Axes Transitions Color Scales Formatting Geography

  20. D3 @ NCSU lib.ncsu.edu/dli/projects/spaceassesstool

  21. None
  22. None
  23. None
  24. None
  25. ACKNOWLEDGMENTS Mike Bostock Scott Cheng Scott Murray

  26. SUMA TEAM Jason Casden Joyce Chapman Bret Davidson Rob Rucker

    Rusty Earl Eric McEachern lib.ncsu.edu/dli/projects/spaceassesstool
  27. THANK YOU! bret_davidson@ncsu.edu go.ncsu.edu/c4l13-d3