var margin = {top: 0, right: 10, bottom: 25, left: 10},

    width = 960 - margin.right - margin.left,

    height = 150 - margin.top - margin.bottom;

​

var x = d3.time.scale()

.domain([1, d3.select('input')[0][0].value])

.range([0, width]);

​

var svg = d3.select("body").append("svg")

.attr("width", width + margin.right + margin.left)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

​

svg.append("rect")

.attr("class", "grid-background")

.attr('y', 0)

.attr("width", width)

.attr("height", height*4);

​

var realAxisGroup = svg.append("g");

var minorAxisGroup = svg.append('g').attr('class', 'minor');

​

var now = d3.time.day(new Date());

​

sliderChange();

​

// ~

​

function sliderChange() {

  var v = d3.select('input')[0][0].value;

  d3.select('label').text(v);

​

  x.domain([now, new Date(now.getTime() + 1000 * 60 * 60 * 1 * v)]);

  redraw();

}

​

function redraw() {

  // this is the d3's axis

  realAxisGroup

    .attr("class", "axis")

    .attr("transform", "translate(0,0)")

    .call(d3.svg.axis().orient('bottom').scale(x).tickSize(12));

​

  var points = [];

​

  realAxisGroup.selectAll('g').data().forEach(function (d, i) {

    points.push(x(d));

  });

​

  points.sort(function(a,b) { return a-b; } );

  console.log(points);

​

  minorAxisGroup

    .attr('class', 'axis')

    .selectAll('g')

    .remove();

​

  for (var i = 0; i < points.length; i += 1) {

    var trans;

​

    if (i === points.length - 1) {

      trans = points[i] + (points[i] - points[i - 1]) / 2;

    }

    else {

      trans = points[i] + (points[i + 1] - points[i]) / 2;

    }

​

    var grrr = minorAxisGroup.append('g')

    .attr('class', 'tick')

    .attr('transform', 'translate(' + trans  + ')');

​

    grrr.append('line')

      .attr('y2', 24)

      .attr('x2', 0);

  }

}

​

function toggleReal() {

  var ds = d3.select('g.axis')[0][0].style;

  ds.display = (ds.display === '') ? 'none' : '';

}

​

function toggleFake() {

  var ds = d3.select('g.fake')[0][0].style;

  ds.display = (ds.display === '') ? 'none' : '';

}

​