Convert existing d3 live stream line graph to use seconds elapsed instead of time

Question

Still relatively new to D3, and the functionality that I'm looking for is a live streaming line graph, with new data coming in real time. I've come across an example online that is EXACTLY what I'd like to implement, with one minor issue. As it streams, the x axis shows the clock time, which looks great, but My needs require it to be shown as time elapsed instead.

Here's the code for this:

https://bl.ocks.org/boeric/3b57a788a4b96e1af211

I've been trying to adapt this script to work, but all I've done is break it, it seems that time is pretty well integrated into this example. Is it worth converting this, or am I better off implementing my own solution? I can, but it may lack some of the bells and whistles that come in this example.

The closest solution so far is that I've changed the chart scales from this:

var x = d3.time.scale().range([0, width]);

to

var x = d3v3.scale.linear().range([0, width]);

Now I'm getting something more similar to a timestamp at each tick, which isn't ideal. I can't seem to find anyone else on the internet that as done something as simple as this, strange as that may sound.

Answer 1

As you already know Bo Ericsson's Block 3b57a788a4b96e1af211 use his realTimeChart.js

You should try to adapt line 139,

var xAxis = d3.svg.axis().orient("bottom");

to

var xAxis = d3.svg.axis().orient("bottom").tickFormat(function(d) { 
  var dif = new Date() - d;
  var seconds = Math.round(dif / 1000);
  return seconds;
});

axis.tickFormat([format]) will do your thing.