Tutorials are best in blog format: http://www.pubnub.com/blog/fun-with-d3js-data-visualization-eye-candy-with-streaming-json/ In this slideshare, we'll show you how to build realtime, interactive data visualizations with D3.js and PubNub. In this case, we'll be creating a bubble chart and updates based on changes in the streamed data.

1. IN THIS TUTORIAL, WE SHOWCASE
WHAT MORE CAN BE DONE WITH
D3.js and PUBNUB!
+

2. WHAT IS D3.JS?
• A JavaScript Library
• Lets you stream data to create interactive
graphs & charts that run in the browser
• A very powerful tool for creating eye-
catching data visualizations

3. TODAY…WE SHOWCASE WHAT YOU CAN DO
MORE WITH D3 & PUBNUB.
LET’S BEGIN AND GET MORE
VISUAL WITH A BUBBLE
CHART!

4. PREREQUISITES
• Basic to intermediate
knowledge of JavaScript
Document Object Model
(DOM)
• Basic understanding of
SVG and D3.js

5. STEPS WE’LL TAKE
In this tutorial, you will learn how to:
1. Create a static bubble chart using D3.js
2. Bind streaming JSON data to the chart
3. Live-update and animate the bubble chart

6. STEP #1
CREATE A STATIC BUBBLE CHART
TO GET STARTED…
Include d3.min.js in your HTML file, then define a layout.

7. STEP 1: CREATE A STATIC BUBBLE
CHART
1.1. Use D3.js’s Graphical Layout
To draw a bubble chart, we create a pack layout using
d3.layout.pack() object.

8. STEP 1: CREATE A STATIC BUBBLE
CHART
1.2. WORK WITH JSON DATA
1. Sign up for a PubNub account.
2. Get your unique PubNub keys in the PubNub Developer Portal.
3. Clone the GitHub repository, and enter your unique PubNub keys on
the PubNub initialization.
For now, we’ll use simulated data, which is similar to the actual streaming
JSON we will use in this tutorial. Assume the data came from our global data
centers, and each data set represents a country, and access volume from the
country.

9. STEP 1: CREATE A STATIC BUBBLE
CHART
1.2. WORK WITH JSON DATA
4. Customize this raw data to be used in the pack layout.
The pack layout is part of D3′s family of hierarchical layouts and by
default, D3 assumes that the input data is an object with a children
array, so it is convenient to return the object looks like,
{children: [an array of objects]}

10. STEP 1: CREATE A STATIC BUBBLE
CHART
1.2. WORK WITH JSON DATA
5. The className values are to be used to colorize each SVG circle by
country, defined in CSS.

11. STEP 1: CREATE A STATIC BUBBLE
CHART
1.3. ENTER DATA INTO THE LAYOUT
1. We are loading the tailored data into layout object’s nodes()
function, which automagically populates graphical data (size of
each circle and positions) with a set of standard attributes, so all
the circles will nicely fit in a chart.
2. Then, use the generated layout calculations to display in SVG.

12. AWESOME!
YOU’VE CREATED A BUBBLE CHART!
JUST A FEW MORE STEPS…

13. STEP #2
MAKE D3.JS DYNAMIC WITH
STREAMING JSON
WE ARE READY TO REPLACE THE STATIC JSON
WITH LIVE JSON FROM PUBNUB DATA STREAMS

14. STEP 2: MAKE D3.js DYNAMIC WITH
STREAMING JSON
• Include the PubNub JavaScript libraries in your HTML to begin
(You’ll first need to sign up for a PubNub account. Once you
sign up, you can get your unique PubNub keys in the PubNub
Developer Portal).
• We are using a chunk of predefined set of data here for the
exercise, so let’s initialize the API with the existing channel.

15. STEP 2: MAKE D3.js DYNAMIC WITH
STREAMING JSON
2.1. SUBSCRIBE THE LIVE DATA
1. To retrieve the live data, you simply use PubNub subscribe()
API.
2. Once you successfully retrieve the data from the stream, call
the callback function to draw the chart.

16. NOW, EVERY TIME A NEW SET OF DATA COMES,
NEW BUBBLES ARE DISPLAYED!
HOWEVER, THEY KEEP BEING ADDED ON TOP OF THE
PREVIOUS CHART. THIS LOOKS PRETTY FUNKY, BUT IT IS
NOT WHAT WE WANT! WE NEED TO FIX THIS.

17. STEP #3
LIVE-UPDATE & ANIMATE THE
BUBBLES!
OK, let’s bind data to elements correctly!

18. STEP 3: LIVE-UPDATE & ANIMATE THE
BUBBLES!
3.1. ASSIGN EACH NODE WITH A UNIQUE NAME
D3 uses the enter, update, and exit pattern to join data to DOM.
At the previous step 1.3, you have enter() the initial data. To make
the node updateable, you need to assign a name to each node. D3
takes a key function as a second argument to the data() method.
Modify the code to assign a unique field name:

19. STEP 3: LIVE-UPDATE & ANIMATE THE
BUBBLES!
3.2. CREATE CHAINED TRANSISTIONS
• Also, at the step 1.3, we celled data(), enter() and append()
sequentially.
• 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.

20. STEP 3: LIVE-UPDATE & ANIMATE THE
BUBBLES!
3.2. CREATE CHAINED TRANSISTIONS
To make smooth transitions between old and new data, apply a
transition only to the updating nodes, and not entering nodes. The trick is to
create the transition on the updating elements before the entering elements
because enter().append() merges entering elements into the update
selection.
1 2 3

21. STEP 3: LIVE-UPDATE & ANIMATE THE
BUBBLES!
3.2. CREATE CHAINED TRANSISTIONS
Note: Some bubbles may be a null in upcoming data set,
and need to be removed. We use exit() and remove(). Also
giving an opacity (1 to 0) transition to create a complete
sequence of chained transitions.

22. STEP 3: LIVE-UPDATE & ANIMATE THE
BUBBLES!
3.2. CREATE CHAINED TRANSISTIONS
In this example, we are
transitioning the position and
radius of each bubble upon
updating the data, also opacity
upon entering and exiting.
Moreover, with using delay
method along with transition, we
are making the animation effect
more interesting. Tweak the
values and see what works the
best.

23. Fun with D3js: Data Visualization Eye Candy with Streaming JSON
More PubNub Visualization Tutorials
www.PubNub.com
FOR MORE INFO