Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fun with D3.js & PubNub: Data Visualization Eye...

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/

Tomomi Imura

October 07, 2014
Tweet

More Decks by Tomomi Imura

Other Decks in Technology

Transcript

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

  3. 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
  4. 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
  5. 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
  6. ...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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. Thank you! Tomomi Imura @ PubNub  pubnub.com  @pubnub

     @girlie_mac  github.com/pubnub 29