map.js

$(function(){
  $("#article-big-image").replaceWith($("<div/>").attr({"id": "map-cont"}).html([
       '<img id="background" src="//www.propublica.org/projects/migration-map/images/background.png">'
    ,  '<img class="year year-1890" src="//www.propublica.org/projects/migration-map/images/1890.png" style="display: block;">'
    ,  '<img class="year year-1900" src="//www.propublica.org/projects/migration-map/images/1900.png">'
    ,  '<img class="year year-1910" src="//www.propublica.org/projects/migration-map/images/1910.png">'
    ,  '<img class="year year-1920" src="//www.propublica.org/projects/migration-map/images/1920.png">'
    ,  '<img class="year year-1930" src="//www.propublica.org/projects/migration-map/images/1930.png">'
    ,  '<img class="year year-1940" src="//www.propublica.org/projects/migration-map/images/1940.png">'
    ,  '<img class="year year-1950" src="//www.propublica.org/projects/migration-map/images/1950.png">'
    ,  '<img class="year year-1960" src="//www.propublica.org/projects/migration-map/images/1960.png">'
    ,  '<img class="year year-1970" src="//www.propublica.org/projects/migration-map/images/1970.png">'
    ,  '<img class="year year-1980" src="//www.propublica.org/projects/migration-map/images/1980.png">'
    ,  '<img class="year year-1990" src="//www.propublica.org/projects/migration-map/images/1990.png">'
    ,  '<img class="year year-2000" src="//www.propublica.org/projects/migration-map/images/2000.png">'
    ,  '<img class="year year-2010" src="//www.propublica.org/projects/migration-map/images/2010.png">'
    ,  '<div id="year_container">'
    ,    '<div id="year">1890</div>'
    ,    '<div id="instructions">'
    ,      '<img src="//www.propublica.org/projects/migration-map/images/move-horizontally.png" style="height:16px"><br>'
    ,      "Move or swipe back <br> and forth over the map"
    ,    "</div>"
    ,  "</div>"
    , '<div id="legend">'
    , '  <p>Black Population</p>'
    , '  <div class="line">'
    , '    <div class="break break-5"></div> <span> 5% &nbsp;&nbsp;- 15%  </span>'
    , '  </div>'
    , '  <div class="line">'
    , '    <div class="break break-15"></div><span> 15% - 30% </span>'
    , '  </div>'
    , '  <div class="line">'
    , '    <div class="break break-30"></div><span> 30% - 45% </span>'
    , '  </div>'
    , '  <div class="line">'
    , '    <div class="break break-45"></div><span> 45% - 60% </span>'
    , '  </div>'
    , '  <div class="line">'
    , '    <div class="break break-60"></div><span> 60%+      </span>'
    , '  </div>'
    , '</div>'
  ].join("\n")));


  var years  = [1890, 1900, 1910, 1920, 1930, 1940, 1950, 1960, 1970, 1980, 1990, 2000, 2010];
  for(var i = 0; i < years.length; i++) { document.createElement('img').src = "//www.propublica.org/projects/migration-map/images/" + years[i] + '.png'; }
  var last, img = $("#map-cont"), year = $('#year');
  var width  = 630;
  var height = 400;
  if($(window).width() < 500) {width = 300; height = 190};

  var movin = function(e){
    var bucket = (e.offsetX || e.pageX) / (width / years.length) | 0;
    if(last != bucket) {
      if(years[bucket]) {
        $("#map-cont .year").hide();
        $("#map-cont .year-" + years[bucket]).show();
        year.html(years[bucket]);
      }
      last = bucket;
    }
  };

  img.delegate('img', 'mousemove', movin);
  img.delegate('img', 'touchmove', function(e) { movin(e.originalEvent.changedTouches[0]);  e.preventDefault(); });
  var places = [{"name":"Minneapolis","pt":[216277.87750451907,840048.2744761633]},{"name":"Seattle","pt":[-1969742.1477182587,1398890.1185466507]},{"name":"Phoenix","pt":[-1475297.032496256,-317939.2875639032]},{"name":"San Diego","pt":[-1955290.0470836335,-304544.31421363156]},{"name":"San Francisco","pt":[-2275420.161849737,348480.9440672524]},{"name":"Los Angeles","pt":[-2015736.6662620176,-156389.46275733935]},{"name":"Denver","pt":[-762021.7904911675,287238.2883600842]},{"name":"St. Louis","pt":[496215.24087229546,142470.47762645723]},{"name":"Dallas","pt":[-78367.26370818785,-523010.94857262727]},{"name":"Houston","pt":[63563.38009685264,-856949.2656448284]},{"name":"Boston","pt":[2017674.2462967038,807401.1207800349]},{"name":"Tampa","pt":[1332796.6414209048,-969360.2204072868]},{"name":"Miami","pt":[1590150.3779420066,-1169876.0589518542]},{"name":"Atlanta","pt":[1063122.950496915,-345633.82076259423]},{"name":"Chicago","pt":[679310.1698866773,514821.730155338]},{"name":"Washington, D.C.","pt":[1620632.415799155,319533.6915349979]},{"name":"New York","pt":[1827257.9428244631,577052.7422730173]},{"name":"Detroit","pt":[1054415.261045972,613021.1095176046]}];
  var bounds = {ne: {x:2258243.997100, y: 1565781.660000}, sw: {x:-2356113.743199, y:-1337508.077280}};


  var scale = width / (bounds.ne.x - bounds.sw.x);

  var project = function(point){
    var lon = point[0];
    var lat = point[1];

    // Todo fix fudge
    lat = height - ((lat - bounds.sw.y) * scale | 0);
    lon = ((lon - bounds.sw.x) * scale | 0);
    return [lon, lat];
  };

  if($(window).width() > 500) {
    for(i = 0; i < places.length; i++) {
      var el = document.createElement('div');
      $(el).attr('class', 'pt');
      var pt = project(places[i].pt);
      el.style.left = pt[0] + 4 + 'px';
      el.style.top  = pt[1] - 5 + 'px';
      el.innerHTML = places[i].name;
      document.getElementById("map-cont").appendChild(el);
    }
  }
});