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

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
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
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