iOS-friendly histogram

An iOS-friendly histogram of my motion activity on my phone. Meant to be used inside a UIWebView.

Open on a phone and scrub back and forth with your finger.

var chart = svg.append('g')
    .attr('transform', 'translate(' + margin.left + ' ' + margin.top + ')');

d3.json('motion.json', function(err, data) {
    console.log(Object.keys(data[0]));
    for (var i = 0; i < data.length; i++)
      data[i].startDate = moment(data[i].startDate);

var max = d3.max(data, function(d) { return d.startDate });

var x = d3.time.scale()
      //.domain([new Date - 1000*60*60*24*days, new Date])
      .domain([max - 1000*60*60*24*days, max])
      .range([0, width]);

var histogram = d3.layout.histogram()
      .value(function(d) { return d.startDate })
      .range(x.domain())
      .bins(bins);
    var walking = histogram(data.filter(function(d) { return true }));

var y = d3.scale.sqrt()
      .domain([0, d3.max(walking, function(d) { return d.y })])
      .range([height, 0]).nice();

var xAxis = d3.svg.axis().scale(x)
      .ticks(4);
    chart.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0 ' + height + ')')
      .call(xAxis);

var bars = chart.selectAll('rect')
      .data(walking)
      .enter().append('rect')
      .attr('x', function(d) { return x(d.x) })
      .attr('width', x(Number(x.domain()[0]) + walking[0].dx))
      .attr('y', function(d) { return y(d.y) })
      .attr('height', function(d) { return height - y(d.y) });

var scrub = chart.append('g').attr('class', 'scrub');
    scrub.append('line')
      .attr('y2', height + xAxis.tickSize());
    scrub.append('text')
      .attr('y', height + 18)
      .attr('text-anchor', 'middle');

d3.select('body').on('mousemove', move(d3.mouse));
    d3.select('body').on('touchmove', move(function(c) { return d3.touches(c).pop() }));

Modified http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.js