Transportation Delay: Create Real-Time Visualization of Data Using NVD3 And PubNub

1.html

<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css' rel='stylesheet'>

10.js

{"driverId":1,"time":939,"precipitation":2,"delay":2}

11.js

function pubnubCallback(message) {
  point = {};
  point.x = message.precipitation;
  point.y = message.time;
  point.size = message.delay;
  data[message.driverId - 1].values.push(point);
  loadGraph();
};

12.js

function formatDateTick(time) {
  hours = Math.floor(time/60);
  minutes = time % 60;
  date = new Date();
  date.setHours(hours);
  date.setMinutes(minutes);
  return d3.time.format('%H:%M')(date);
};

2.html

<div id='chart' style='height:500px'>
  <svg></svg>
</div>

3.js

var chart = nv.models.scatterChart()
              .showDistX(true)
              .showDistY(true)
              .color(d3.scale.category10().range());

chart.xAxis.tickFormat(d3.format('.02f')).axisLabel('Precipitation (inch)');
chart.yAxis.tickFormat(formatDateTick).axisLabel('Time');

nv.addGraph(loadGraph);

4.js

function loadGraph() {
  d3.select('#chart svg')
      .datum(data)
    .transition().duration(500)
      .call(chart);
  nv.utils.windowResize(chart.update);
  return chart;
};

5.js

[{"key": "first_key",
  "values": [{"x": 1, "y": 2, "size": 3}, {"x": 2, "y": 4, "size": 2}, ... ]},
 {"key": "first_key",
  "values": [{"x": 1, "y": 2, "size": 3}, {"x": 2, "y": 4, "size": 2}, ... ]}]

6.js

var data = [
  {"key": "Driver 1",
   "values": [] },
  {"key": "Driver 2",
   "values": [] },
  {"key": "Driver 3",
   "values": [] },
  {"key": "Driver 4",
   "values": [] }];

7.html

<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.17.0.js"></script>

8.js

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

9.js

var channel = "BusApp";
pubnub.subscribe({
    channels: [channel],
});
pubnub.addListener({
  message: function (message) {
    pubnubCallback(message)
  }
})