fun with d3.js: data visualization eye candy with streaming json
DESCRIPTION
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/TRANSCRIPT
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
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