Skip to content

Instantly share code, notes, and snippets.

@domadev812
Forked from ToeJamson/1.html
Last active November 15, 2017 21:06
Show Gist options
  • Save domadev812/f78596e14071087a87b0956548b60e0a to your computer and use it in GitHub Desktop.
Save domadev812/f78596e14071087a87b0956548b60e0a to your computer and use it in GitHub Desktop.
Transportation Delay: Create Real-Time Visualization of Data Using NVD3 And PubNub
<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'>
{"driverId":1,"time":939,"precipitation":2,"delay":2}
function pubnubCallback(message) {
point = {};
point.x = message.precipitation;
point.y = message.time;
point.size = message.delay;
data[message.driverId - 1].values.push(point);
loadGraph();
};
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);
};
<div id='chart' style='height:500px'>
<svg></svg>
</div>
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);
function loadGraph() {
d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
};
[{"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}, ... ]}]
var data = [
{"key": "Driver 1",
"values": [] },
{"key": "Driver 2",
"values": [] },
{"key": "Driver 3",
"values": [] },
{"key": "Driver 4",
"values": [] }];
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.17.0.js"></script>
var pubnub = new PubNub({
publishKey : 'demo',
subscribeKey : 'demo'
})
var channel = "BusApp";
pubnub.subscribe({
channels: [channel],
});
pubnub.addListener({
message: function (message) {
pubnubCallback(message)
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment