public
Created

  • Download Gist
map.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
$(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);
}
}
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.