streaming and visualizing data with d3.js

IN THIS TUTORIAL, WE SHOWCASE WHAT MORE CAN BE DONE WITH

D3.js and PUBNUB!

+

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

TODAY…WE SHOWCASE WHAT YOU CAN DO

MORE WITH D3 & PUBNUB.

LET’S BEGIN AND GET MORE

VISUAL WITH A BUBBLE CHART!

PREREQUISITES

• Basic to intermediate knowledge of JavaScript Document Object Model (DOM)

• Basic understanding of SVG and D3.js

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

STEP #1CREATE A STATIC BUBBLE

CHART

TO GET STARTED…Include d3.min.js in your HTML file, then define a layout.

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.

STEP 1: CREATE A STATIC BUBBLE CHART

1.2. WORK WITH JSON DATA1. 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.

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

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.

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.

AWESOME!YOU’VE CREATED A BUBBLE CHART!

JUST A FEW MORE STEPS…

STEP #2MAKE D3.JS DYNAMIC WITH

STREAMING JSON

WE ARE READY TO REPLACE THE STATIC JSONWITH LIVE JSON FROM PUBNUB DATA STREAMS

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.

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.

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.

STEP #3LIVE-UPDATE & ANIMATE THE

BUBBLES!

OK, let’s bind data to elements correctly!

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:

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.

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

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.

STEP 3: LIVE-UPDATE & ANIMATE THE BUBBLES!

3.2. CREATE CHAINED TRANSISTIONSIn 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.

Fun with D3js: Data Visualization Eye Candy with Streaming JSON

More PubNub Visualization Tutorials

www.PubNub.comFOR MORE INFO