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

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/

1b741e5d8f5efe12c6307db4ebfab8f9?s=128

Tomomi Imura

October 07, 2014
Tweet

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

  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