Data Visualization Eye Candy withStreaming JSON

Tomomi Imura

D3.js

2

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

1. Create a Static Bubble Chart with D3

5

1.1. Use D3's Graphical LayoutCreate a pack layout with d3.layout.pack() object

var svg = d3.select('#chart').append('svg') .attr('width', 600).attr('height', 600);

var bubble = d3.layout.pack() .size([diameter, diameter]) // new data will be loaded to bubble layout .value(function(d) {return d.size;})

6

1.2. Work with JSON Data

var data = {"countries_msg_vol": { "CA": 170, "US": 393, "CU": 9, "BR": 89, "MX": 192, ..., "Other": 254}};

7

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

{children: [an array of objects]}

8

...cont'dfunction processData(data) { var obj = data.countries_msg_vol;

var newDataSet = [];

for(var prop in obj) { newDataSet.push({name: prop, className: prop.toLowerCase(), size: obj[prop]}); } return {children: newDataSet};}

9

Define Fill Colors with CSS

.ca, .us { fill: #DF4949;}.uc, .br, .mx { fill: #E27A3F;}.other { fill: #45B29D;}...

10

1.3. Enter Data into the LayoutLoad the tailored data into the layout object's nodes() function

var nodes = bubble.nodes(processData(data)) // filter out the outer bubble .filter(function(d) { return !d.children; });

11

Display in SVGUse the generated layout calculations to display in SVG

var g = svg.append('g');var vis = svg.selectAll('circle') .data(nodes, function(d) { return d.name; });

vis.enter().append('circle') .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; }) .attr('r', function(d) { return d.r; }) .attr('class', function(d) { return d.className; });

12

2. Make It Dynamic with StreamingJSON

13

Use PubNub API

<script src="//cdn.pubnub.com/pubnub.min.js"></script>

var channel = 'my-data-channel';

var pubnub = PUBNUB.init({ subscribe_key: my_subscription_key_here});

01.

02.

14

2.1. Subscribe the Live DataTo retrieve your data stream, use subscribe() API

pubnub.subscribe({ channel: channel, callback: drawBubbles(message) { // place the code from Step 1.3 }});

15

Oopsie: Overlapping BubblesNew set of data comes in, new bubbles are displayed on top

16

3. Live-Update and Animate theBubbles!

17

3.1. Assign Each Node with a UniqueNameTo make the node updateable, you need to assign a name to each node.

D3 takes a key function as a 2nd argument to the data():

var vis = svg.selectAll('circle') .data(nodes, function(d) { return d.name; });

18

3.2. Create Chained TransitionsTo 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

D3 Data Life Cycle: Enter

20

Update

21

Exit (as new data enter)

22

Smooth TransitionsCreate the transition on the updating elements before the entering

elements because enter().append() merges entering elements

into the update selection

23

Update// update - This only applies to updating nodesvis.transition() .duration(duration) .delay(function(d, i) {delay = i * 7; return delay;}) .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; }) .attr('r', function(d) { return d.r; })

24

Enter// enter vis.enter().append('circle') .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; }) .attr('r', function(d) { return d.r; }) .attr('class', function(d) { return d.className; }) .style('opacity', 0) .transition() .duration(duration * 1.2)

25

Exit// exitvis.exit() .transition() .duration(duration + delay) .style('opacity', 0) .remove();

26

Demo: http://pubnub.github.io/d3-bubble/

27

Full Article pubnub.com/blog/fun-with-d3js-data-visualization-eye-candy-

with-streaming-json/

28

Thank you!Tomomi Imura @ PubNub

pubnub.com

@pubnub

@girlie_mac

github.com/pubnub

29

Photo Credit

•  Cover: https://flic.kr/p/bB7nBS by arbyreed b n a

30