D3 Examples - Contextually aware axis ticks

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
  <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
  <style>
​
.axis text {
  font: 14px 'Inconsolata';
}
​
.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.axis path {
  stroke: none;
}
​
body {
  min-height: 500px;
}
​
.end {
  fill: steelblue;
}
  </style>
  </head>
  <body>
    <h1 id="title"></h1>
    <div id="axis"></div>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="src.js"></script>
    <script>
var customTimeFormat = d3.time.format;
​
​
​
var data = [
  { key: 'several years',   values: [new Date(2008, 0, 1), new Date(2013, 0, 1)]  },
  { key: 'one year',        values: [new Date(2012, 0, 1), new Date(2013, 0, 1)]  },
  { key: 'several months',  values: [new Date(2012, 0, 1), new Date(2012, 5, 1)]  },
  { key: 'one month',       values: [new Date(2012, 0, 1), new Date(2012, 1, 1)]  },
  { key: 'several weeks',   values: [new Date(2012, 0, 1), new Date(2012, 0, 21)] },
  { key: 'one week',        values: [new Date(2012, 0, 1), new Date(2012, 0, 7)]  },
  { key: 'several days',    values: [new Date(2012, 0, 1), new Date(2012, 0, 4)]  },
  { key: 'one day',         values: [new Date(2012, 0, 1), new Date(2012, 0, 2)]  },
  { key: 'several hours',   values: [new Date(2012, 0, 1), new Date(1325433600000)] },
  { key: 'one hour',        values: [new Date(2012, 0, 1), new Date(1325408400000)] },
  { key: 'several minutes', values: [new Date(2012, 0, 1), new Date(1325406600000)] },
  { key: 'one minute',      values: [new Date(2012, 0, 1), new Date(1325404860000)] },
  { key: 'several seconds', values: [new Date(2012, 0, 1), new Date(1325404830000)] },
  { key: 'one second',      values: [new Date(2012, 0, 1), new Date(1325404801000)] },
  { key: 'several milliseconds', values: [new Date(2012, 0, 1), new Date(1325404800400)] },
  { key: 'one millisecond',      values: [new Date(2012, 0, 1), new Date(1325404800001)] },
];
​
var i = -1,
    interval = 2000;
​
var update = function() {
  ++i;
  if (i >= data.length) i = 0;
  var w = Math.random()*600 + 500;
  var margin = {top: 250, right: 40, bottom: 250, left: 40},
    width = w - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
  var x = d3.time.scale()
    .domain(data[i].values)
    .range([0, width]);
​
  var xAxis = d3.svg.haxis()
      .scale(x)
      .tickMultiFormat([
        ["%-Lms", function(d) { return d.getMilliseconds(); }], // milliseconds
        ["%-Ss", function(d) { return d.getSeconds(); }], // seconds
        ["%-I:%M", function(d) { return d.getMinutes(); }], // minute
        ["%-I %p", function(d) { return d.getHours(); }], // hour
        ["%-d", function(d) { return d.getDay() && d.getDate() != 1; }], // day
        ["%b %-d", function(d) { return d.getDate() != 1; }], // monday of the week
        ["%b", function(d) { return d.getMonth(); }], // month
        ["%Y", function() { return true; }] // year
      ])
      .endTickMultiFormat([
        [":%M:%S.%Lms", function(d) { return d.getMilliseconds(); }], // milliseconds
        [":%M:%Ss", function(d) { return d.getSeconds(); }], // seconds
        ["%-I:%M %p", function(d) { return d.getMinutes(); }], // minute
        ["%-I %p", function(d) { return d.getHours(); }], // hour
        ["%b %-d", function(d) { return d.getDay() && d.getDate() != 1; }], // day
        ["%b %-d", function(d) { return d.getDate() != 1; }], // monday of the week
        ["%Y %b", function(d) { return d.getMonth(); }], // month
        ["%Y", function() { return true; }] // year
      ]);
​
  d3.select("#title").text(data[i].key);
​
  var svg = d3.select('#axis')
                .selectAll('svg')
                  .data([i]);
​
  svg.enter()
    .append("svg")
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
  svg.attr("width", width + margin.left + margin.right);
  svg.selectAll('.x.axis')
      .transition()
        .duration(interval/2)
      .call(xAxis);
};
​
update();
d3.select("body").on('click', update);
setInterval(update, 5000);
    </script>
  </body>
</html>
    