$(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% - 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); | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment