-
-
Save domadev812/551fb8611ac422801df78fca5cadb464 to your computer and use it in GitHub Desktop.
Snippets for D3 Bubble Chart blog
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Demo: http://pubnub.github.io/d3-bubble/ | |
Tutorial: http://www.developer.com/java/fun-with-d3.js-data-visualization-eye-candy-with-streaming-json.html |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var diameter = 600; | |
var svg = d3.select('#chart').append('svg') | |
.attr('width', diameter) | |
.attr('height', diameter); | |
var bubble = d3.layout.pack() | |
.size([diameter, diameter]) | |
.padding(3); // padding between adjacent circles | |
.value(function(d) {return d.size;}) // new data will be loaded to bubble layout |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var data = {"countries_msg_vol": { | |
"CA": 170, "US": 393, "CU": 9, "BR": 89, "MX": 192, ..., "Other": 254 | |
}}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function 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}; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.ca, .us {fill: #DF4949;} | |
.uc, .br, .mx {fill: #E27A3F;} | |
.other {fill: #45B29D;} | |
... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var nodes = bubble.nodes(processData(data)) | |
.filter(function(d) { return !d.children; }); // filter out the outer bubble |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.17.0.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var channel = 'rts-xNjiKP4Bg4jgElhhn9v9'; | |
var pubnub = new PubNub({ | |
subscribeKey: 'e19f2bb0-623a-11df-98a1-fbd39d75aa3f', | |
publishKey: 'myPublishKey', | |
ssl: true | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
pubnub.subscribe({ | |
channels: ['my_channel'], | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
pubnub.addListener({ | |
message: function (message) { | |
console.log(message) | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var vis = svg.selectAll('circle') | |
.data(nodes, function(d) { return d.name; }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var duration = 200; | |
var delay = 0; | |
// update - This only applies to updating nodes | |
vis.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; }) | |
// 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) | |
.style('opacity', 1); | |
// exit | |
vis.exit() | |
.transition() | |
.duration(duration + delay) | |
.style('opacity', 0) | |
.remove(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment