Select a picture of the day by zanarmstrong

index.html

<!-- Bostock's slider brush: //bl.ocks.org/mbostock/6452972-->
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="slider.css">
</head>
<body>
  <p>Slide to see a picture from that day.</p>
  <div id="photo"></div>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="photos.json"></script>
  <script src="slider.js"></script>
</body>

slider.css

body {
  background-color: #393939;
  font-size: 14px;
  font-family: 'Raleway', sans-serif;
}

p {
  color: white;
  margin: 50px;
}

a {
  color: #4FDEF2;
}

.axis {
  fill: gray;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.axis .halo {
  stroke: gray;
  stroke-width: 4px;
  stroke-linecap: round;
}

.slider .handle path {
  stroke: white;
  stroke-width: 3px;
  stroke-linecap: round;
  pointer-events: none;
}

.slider .handle text {
  fill: white;
  text-align: center;
  font-size: 18px;
}

#photo {
   position: absolute;
   top: 50px;
   left: 400px;
}

slider.js


/// image stuff

image = document.getElementById('photo');


//// slider stuff
formatDate = d3.time.format("%b %d");

// parameters
var margin = {
    top: 50,
    right: 50,
    bottom: 50,
    left: 50
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.bottom - margin.top;


// scale function
var timeScale = d3.time.scale()
  .domain([new Date('2012-01-02'), new Date('2013-01-01')])
  .range([0, width])
  .clamp(true);


// initial value
var startValue = timeScale(new Date('2012-03-20'));
startingValue = new Date('2012-03-20');

//////////

// defines brush
var brush = d3.svg.brush()
  .x(timeScale)
  .extent([startingValue, startingValue])
  .on("brush", brushed);

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  // classic transform to position g
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
  .attr("class", "x axis")
// put in middle of screen
.attr("transform", "translate(0," + height / 2 + ")")
// inroduce axis
.call(d3.svg.axis()
  .scale(timeScale)
  .orient("bottom")
  .tickFormat(function(d) {
    return formatDate(d);
  })
  .tickSize(0)
  .tickPadding(12)
  .tickValues([timeScale.domain()[0], timeScale.domain()[1]]))
  .select(".domain")
  .select(function() {
    console.log(this);
    return this.parentNode.appendChild(this.cloneNode(true));
  })
  .attr("class", "halo");

var slider = svg.append("g")
  .attr("class", "slider")
  .call(brush);

slider.selectAll(".extent,.resize")
  .remove();

slider.select(".background")
  .attr("height", height);

var handle = slider.append("g")
  .attr("class", "handle")

handle.append("path")
  .attr("transform", "translate(0," + height / 2 + ")")
  .attr("d", "M 0 -20 V 20")

handle.append('text')
  .text(startingValue)
  .attr("transform", "translate(" + (-18) + " ," + (height / 2 - 25) + ")");

slider
  .call(brush.event)

function brushed() {
  var value = brush.extent()[0];

  if (d3.event.sourceEvent) { // not a programmatic event
    value = timeScale.invert(d3.mouse(this)[0]);
    brush.extent([value, value]);
  }

  handle.attr("transform", "translate(" + timeScale(value) + ",0)");
  handle.select('text').text(formatDate(value));
  console.log(d3.event.sourceEvent.type)

  if(d3.event.sourceEvent.type == 'mousemove' || d3.event.sourceEvent.type == 'touchend'){
      if (photos[MonthDaytoNumDay(value.getMonth()+1,value.getDate())][(value.getHours() + 8) % 24][0]['URL']){
        console.log(photos[MonthDaytoNumDay(value.getMonth()+1,value.getDate())][(value.getHours() + 8) % 24][0]['URL'])
        image.innerHTML = '<IMG SRC="' + photos[MonthDaytoNumDay(value.getMonth()+1,value.getDate())][(value.getHours() + 8) % 24][0]['URL'] + '" ALT="shiza">'
      }  else {
        console.log(MonthDaytoNumDay(value.getMonth()+1,value.getDate()), (value.getHours() + 8) % 24, photos[MonthDaytoNumDay(value.getMonth()+1,value.getDate())][(value.getHours() + 8) % 24])
      }
  }

  
}


function MonthDaytoNumDay(month, day){
  var daysInMonth = [1, 32, 60, 91, 121, 152, 182, 213, 244, 274,305,335];
  var dayNum = daysInMonth[month -1] + day - 1;
  return dayNum
}

// helper functions
function dayToMonth(day) {
  var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul","Aug","Sep","Oct","Nov","Dec"];
  var daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
  var i = 0;
  while(day > 0){
    day = day - daysInMonth[i];
    i++
  }
  return months[i-1]
}


function dayToMonthDay(day) {
  var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul","Aug","Sep","Oct","Nov","Dec"];
  var daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
  var i = 0;
  while(day > 0){
    day = day - daysInMonth[i];
    i++
  }
  day = day + daysInMonth[i-1]
  return months[i-1] + " " + day
}