Bitcoin Graph Real-Time

1.js

pubnub = new PubNub({
	publishKey : 'demo',
	subscribeKey : 'demo'
})

10.js

// 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) {       
        }
    });    

11.js

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();

12.js

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
		);
	}
})

2.js

{
  "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”
  }
}

3.js

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");
  });
};

4.js

// 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 …
  });

5.js

// 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);

6.js

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); });

7.js

var brush = d3.svg.brush()
    .x(x2)
    .on("brush", brushed);

8.js

// 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; });
};

9.js

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);
    });