Fun with D3.js & PubNub: Data Visualization Eye Candy with Streaming JSON

D3.js is a JavaScript library that lets you bring data to create interactive graphs and charts that run on a browser. It is a very powerful tool for creating eye-catching data visualization.

This slide deck is a quick showcase of what can be done with D3 and PubNub data stream. Let's get visual with a bubble chart!

Full tutorial:
http://www.pubnub.com/blog/fun-with-d3js-data-visualization-eye-candy-with-streaming-json/

Transcript

1. Data Visualization Eye Candy with Streaming JSON Tomomi Imura
2. D3.js 2
3. Bubble Chart •  a type of chart that displays data in bubble-like circles •  the size of each circle corresponds with the value of data •  not the most precise chart yet you can pack hundres of bubbles in a area •  fun and very visually appealing. 3
5. 1. Create a Static Bubble Chart with D3 5
6. 1.1. Use D3's Graphical Layout Create a pack layout with d 3 . l a y o u t . p a c k ( ) object v a r s v g = d 3 . s e l e c t ( ' # c h a r t ' ) . a p p e n d ( ' s v g ' ) . a t t r ( ' w i d t h ' , 6 0 0 ) . a t t r ( ' h e i g h t ' , 6 0 0 ) ; v a r b u b b l e = d 3 . l a y o u t . p a c k ( ) . s i z e ( [ d i a m e t e r , d i a m e t e r ] ) / / n e w d a t a w i l l b e l o a d e d t o b u b b l e l a y o u t . v a l u e ( f u n c t i o n ( d ) { r e t u r n d . s i z e ; } ) 6
7. 1.2. Work with JSON Data v a r d a t a = { " c o u n t r i e s _ m s g _ v o l " : { " C A " : 1 7 0 , " U S " : 3 9 3 , " C U " : 9 , " B R " : 8 9 , " M X " : 1 9 2 , . . . , " O t h e r " : 2 5 4 } } ; 7
8. Tweak Raw JSON for D3 Pack Layout •  The pack layout is part of D3's family of hierarchical layouts •  D3 assumes that the input data is an object with a children array by default { c h i l d r e n : [ a n a r r a y o f o b j e c t s ] } 8
9. ...cont'd f u n c t i o n p r o c e s s D a t a ( d a t a ) { v a r o b j = d a t a . c o u n t r i e s _ m s g _ v o l ; v a r n e w D a t a S e t = [ ] ; f o r ( v a r p r o p i n o b j ) { n e w D a t a S e t . p u s h ( { n a m e : p r o p , c l a s s N a m e : p r o p . t o L o w e r C a s e ( ) , s i z e : o b j [ p r o p ] } ) ; } r e t u r n { c h i l d r e n : n e w D a t a S e t } ; } 9
10. Define Fill Colors with CSS . c a , . u s { f i l l : # D F 4 9 4 9 ; } . u c , . b r , . m x { f i l l : # E 2 7 A 3 F ; } . o t h e r { f i l l : # 4 5 B 2 9 D ; } . . . 10
11. 1.3. Enter Data into the Layout Load the tailored data into the layout object's n o d e s ( ) function v a r n o d e s = b u b b l e . n o d e s ( p r o c e s s D a t a ( d a t a ) ) / / f i l t e r o u t t h e o u t e r b u b b l e . f i l t e r ( f u n c t i o n ( d ) { r e t u r n ! d . c h i l d r e n ; } ) ; 11
12. Display in SVG Use the generated layout calculations to display in SVG v a r g = s v g . a p p e n d ( ' g ' ) ; v a r v i s = s v g . s e l e c t A l l ( ' c i r c l e ' ) . d a t a ( n o d e s , f u n c t i o n ( d ) { r e t u r n d . n a m e ; } ) ; v i s . e n t e r ( ) . a p p e n d ( ' c i r c l e ' ) . a t t r ( ' t r a n s f o r m ' , f u n c t i o n ( d ) { r e t u r n ' t r a n s l a t e ( ' + d . x + ' , ' + d . y + ' ) ' ; } ) . a t t r ( ' r ' , f u n c t i o n ( d ) { r e t u r n d . r ; } ) . a t t r ( ' c l a s s ' , f u n c t i o n ( d ) { r e t u r n d . c l a s s N a m e ; } ) ; 12
13. 2. Make It Dynamic with Streaming JSON 13
14. Use PubNub API < s c r i p t s r c = " / / c d n . p u b n u b . c o m / p u b n u b . m i n . j s " > < / s c r i p t > v a r c h a n n e l = ' m y - d a t a - c h a n n e l ' ; v a r p u b n u b = P U B N U B . i n i t ( { s u b s c r i b e _ k e y : m y _ s u b s c r i p t i o n _ k e y _ h e r e } ) ; 0 1 . 0 2 . 14
15. 2.1. Subscribe the Live Data To retrieve your data stream, use s u b s c r i b e ( ) API p u b n u b . s u b s c r i b e ( { c h a n n e l : c h a n n e l , c a l l b a c k : d r a w B u b b l e s ( m e s s a g e ) { / / p l a c e t h e c o d e f r o m S t e p 1 . 3 } } ) ; 15
16. Oopsie: Overlapping Bubbles New set of data comes in, new bubbles are displayed on top 16
17. 3. Live-Update and Animate the Bubbles! 17
18. 3.1. Assign Each Node with a Unique Name To make the node updateable, you need to assign a name to each node. D3 takes a key function as a 2nd argument to the d a t a ( ): v a r v i s = s v g . s e l e c t A l l ( ' c i r c l e ' ) . d a t a ( n o d e s , f u n c t i o n ( d ) { r e t u r n d . n a m e ; } ) ; 18
19. 3.2. Create Chained Transitions To enter new data to the existing nodes, we are going to update them. This way, each assigned bubble circle updates its size and position correctly, instead of creating a new one with new data. 19
20. D3 Data Life Cycle: Enter 20
21. Update 21
22. Exit (as new data enter) 22
23. Smooth Transitions Create the transition on the updating elements before the entering elements because e n t e r ( ) . a p p e n d ( ) merges entering elements into the update selection 23
24. Update / / u p d a t e - T h i s o n l y a p p l i e s t o u p d a t i n g n o d e s v i s . t r a n s i t i o n ( ) . d u r a t i o n ( d u r a t i o n ) . d e l a y ( f u n c t i o n ( d , i ) { d e l a y = i * 7 ; r e t u r n d e l a y ; } ) . a t t r ( ' t r a n s f o r m ' , f u n c t i o n ( d ) { r e t u r n ' t r a n s l a t e ( ' + d . x + ' , ' + d . y + ' ) ' ; } ) . a t t r ( ' r ' , f u n c t i o n ( d ) { r e t u r n d . r ; } ) 24
25. Enter / / e n t e r v i s . e n t e r ( ) . a p p e n d ( ' c i r c l e ' ) . a t t r ( ' t r a n s f o r m ' , f u n c t i o n ( d ) { r e t u r n ' t r a n s l a t e ( ' + d . x + ' , ' + d . y + ' ) ' ; } ) . a t t r ( ' r ' , f u n c t i o n ( d ) { r e t u r n d . r ; } ) . a t t r ( ' c l a s s ' , f u n c t i o n ( d ) { r e t u r n d . c l a s s N a m e ; } ) . s t y l e ( ' o p a c i t y ' , 0 ) . t r a n s i t i o n ( ) . d u r a t i o n ( d u r a t i o n * 1 . 2 ) 25
26. Exit / / e x i t v i s . e x i t ( ) . t r a n s i t i o n ( ) . d u r a t i o n ( d u r a t i o n + d e l a y ) . s t y l e ( ' o p a c i t y ' , 0 ) . r e m o v e ( ) ; 26
27. Demo: http://pubnub.github.io/d3-bubble/ 27
28. Full Article  pubnub.com/blog/fun-with-d3js-data-visualization-eye-candy- with-streaming-json/ 28
29. Thank you! Tomomi Imura @ PubNub  pubnub.com  @pubnub  @girlie_mac  github.com/pubnub 29
30. Photo Credit •  Cover: https://flic.kr/p/bB7nBS by arbyreed bna 30