Skip to content

Instantly share code, notes, and snippets.

@domadev812
Forked from ToeJamson/1.js
Last active November 15, 2017 21:06
Show Gist options
  • Save domadev812/1f5d31d1fd46dfb74949dcd110b24abb to your computer and use it in GitHub Desktop.
Save domadev812/1f5d31d1fd46dfb74949dcd110b24abb to your computer and use it in GitHub Desktop.
Bitcoin Graph Real-Time
pubnub = new PubNub({
publishKey : 'demo',
subscribeKey : 'demo'
})
// Subscribe for new data updates
pubnub.subscribe({
channels: ['d5f06780-30a8-4a48-a2f8-7ed181b4a13f'],
});
pubnub.addListener({
message: function(message) {
addData(message, graphData);
graphData = updateData(graphData);
updatePrice(message);
// Flip the coin!
flipCoin();
},
presence: function(presence) {
if (updateUsers != null) {
updateUsers(presence);
}
},
status: function(s) {
}
});
x.domain(d3.extent(data.map(function(d) { return d.ticker.now; })));
var maximum = d3.max(data.map(function(d) { return d.ticker.avg.value; })),
minimum = d3.min(data.map(function (d) { return d.ticker.avg.value; }));
y.domain([minimum - 10, maximum + 10]);
x2.domain(x.domain());
y2.domain(y.domain());
path1.datum(data)
.attr("d", area);
gy1.call(yAxis);
path2.datum(data)
.attr("d", area2);
gx2.call(xAxis2);
brushed();
pubnub.subscribe({
channels: ['d5f06780-30a8-4a48-a2f8-7ed181b4a13f']
});
pubnub.addListener({
message: function (message) {
console.log(
"The current price is: ",
message.ticker.avg.value,
" recorded at: ",
message.ticker.now
);
}
})
{
"channel":"d5f06780-30a8-4a48-a2f8-7ed181b4a13f",
"channel_name":"ticker.BTCUSD",
"op":"private",
"origin":"broadcast",
"private":"ticker",
"ticker": {
"avg": {
"value":"780.00000",
"value_int":"78000000",
"display":"$780.00000",
"display_short":"$780.00",
"currency":"USD"
},
… rest of tickers …
now: “1387324772657959”
}
}
function HistoryLoader(pubnub, channel) {
this.pubnub = pubnub;
this.channel = channel;
};
// Loads one piece of data for every <increment> and gives it to <callback>
HistoryLoader.prototype.loadHistory = function(startDate, increment, callback) {
var data = [], that = this;
function getHistory(history) {
if (history.length === 1) {
// Just push one value since we are only requesting one
data.push(history[0]);
// Increment our date
startDate += increment
// Request the next value
that.getHistory(startDate, 1, getHistory);
} else {
// We have reached the end
callback(data);
}
};
// Start the recursion
this.getHistory(startDate, 1, getHistory);
};
// Gets history for the given <date> and <count>
HistoryLoader.prototype.getHistory = function(date, count, callback) {
// PubNub wants dates with greater precision
date *= 10000
pubnub.history({
channel: this.channel,
count: count,
start: date,
reverse: true
}, function (status, response) {
console.log("History callback");
});
};
// Load the past 24 hours of history
var historyLoader = new HistoryLoader(pubnub, 'd5f06780-30a8-4a48-a2f8-7ed181b4a13f'),
oneHour = 1000 * 60 * 60;
historyLoader.loadHistory((Date.now() - oneHour * 24), oneHour, function (data) {
… Do something with data, load our graph, and listen for updates …
});
// Parse into a Date object and extract float value
function convertData(d) {
d.ticker.now = new Date(parseFloat(d.ticker.now) / 10000);
d.ticker.avg.value = parseFloat(d.ticker.avg.value);
};
data.forEach(convertData);
var area = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return x(d.ticker.now); })
.y0(height)
.y1(function(d) { return y(d.ticker.avg.value); });
var brush = d3.svg.brush()
.x(x2)
.on("brush", brushed);
// Callback for brushing on the minimap graph
function brushed() {
x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.select("path").attr("d", area);
focus.select(".x.axis").call(xAxis);
svg.selectAll("circle").attr("cx", function (d) {
var cx = x(d.ticker.now) + margin.left;
if (cx < margin.left) {
cx = -50;
}
return cx;
}).attr("cy", function (d) { return y(d.ticker.avg.value) + margin.top; });
};
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function (d) {
var cx = x(d.ticker.now) + margin.left;
if (cx < margin.left) {
cx = -50;
}
return cx;
})
.attr("cy", function (d) { return y(d.ticker.avg.value) + margin.top; })
.style("fill", "black")
.style("stroke", "none")
.style("pointer-events", "all")
.on("mouseover", function (d) {
tooltip.transition()
.duration(200)
.style("opacity", 0.9);
tooltip.html(d.ticker.avg.display)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function (d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment