Time axis changing in real time

index.html

<div id="box">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

script.js

var svg = d3.select("#box")
  .append("svg")
    .attr('width', 900)
    .attr('height', 100)

var endingDate = Date.now(),
    startingDate = endingDate - 1000 * 60;

var dt = 1000;

var x = d3.time.scale()
    .range([0,900])
    .domain([startingDate,endingDate]);

var axis = svg.append("g")
    .attr("class", "x axis")
    .call(d3.svg.axis().scale(x).orient("bottom"));
    
axis.transition = d3.select({})
  .transition()
    .duration(1000)
    .ease("linear");

(function tick() {
  
  axis.transition = axis.transition.each(function() {
    
    endingDate = Date.now();
    startingDate = endingDate - 1000 * 60;
  
    axis.call(d3.svg.axis()
        .scale(d3.time.scale()
          .range([0,900])
          .domain([startingDate,endingDate]))
        .orient("bottom"))
    
  }).transition().each("start", tick);
  
})()

style.css

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

Time axis changing in real time.markdown

Time axis changing in real time

A Pen by Riccardo Scalco on CodePen.

License.