ft animated intro
function mobilecheck(){ var check = false; (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; }
if(mobilecheck()==true){ console.log('check') jQuery('#wrapper').remove() } else{ jQuery('#popout').hide() }
// census data from tables p2 and f7 and participation data from FRED var data={1948: {'lf_female': 32.7, 'mm_income': 20576, 'mhh_income': 27369, 'mf_income': 8665, 'lf_male': 86.6}, 1949: {'lf_female': 33.2, 'mm_income': 20398, 'mhh_income': 27015, 'mf_income': 8347, 'lf_male': 86.6}, 1950: {'lf_female': 33.8, 'mm_income': 22070, 'mhh_income': 28502, 'mf_income': 8184, 'lf_male': 86.3}, 1951: {'lf_female': 34.6, 'mm_income': 23494, 'mhh_income': 29519, 'mf_income': 8317, 'lf_male': 86.5}, 1952: {'lf_female': 34.7, 'mm_income': 24268, 'mhh_income': 30403, 'mf_income': 8965, 'lf_male': 86.3}, 1953: {'lf_female': 34.5, 'mm_income': 25006, 'mhh_income': 32932, 'mf_income': 9052, 'lf_male': 86.0}, 1954: {'lf_female': 34.6, 'mm_income': 24569, 'mhh_income': 32064, 'mf_income': 8926, 'lf_male': 85.6}, 1955: {'lf_female': 35.6, 'mm_income': 25954, 'mhh_income': 34146, 'mf_income': 8656, 'lf_male': 85.3}, 1956: {'lf_female': 36.8, 'mm_income': 27405, 'mhh_income': 36378, 'mf_income': 8744, 'lf_male': 85.5}, 1957: {'lf_female': 36.9, 'mm_income': 27095, 'mhh_income': 36593, 'mf_income': 8842, 'lf_male': 84.8}, 1958: {'lf_female': 37.1, 'mm_income': 26842, 'mhh_income': 36480, 'mf_income': 8433, 'lf_male': 84.3}, 1959: {'lf_female': 37.1, 'mm_income': 28429, 'mhh_income': 38528, 'mf_income': 8699, 'lf_male': 83.7}, 1960: {'lf_female': 37.8, 'mm_income': 28552, 'mhh_income': 39329, 'mf_income': 8824, 'lf_male': 83.4}, 1961: {'lf_female': 38.1, 'mm_income': 29023, 'mhh_income': 39734, 'mf_income': 8861, 'lf_male': 82.9}, 1962: {'lf_female': 37.9, 'mm_income': 29992, 'mhh_income': 40858, 'mf_income': 9206, 'lf_male': 82.0}, 1963: {'lf_female': 38.3, 'mm_income': 30524, 'mhh_income': 42284, 'mf_income': 9284, 'lf_male': 81.3}, 1964: {'lf_female': 38.7, 'mm_income': 31022, 'mhh_income': 43852, 'mf_income': 9673, 'lf_male': 81.0}, 1965: {'lf_female': 39.2, 'mm_income': 33025, 'mhh_income': 45740, 'mf_income': 10000, 'lf_male': 80.7}, 1966: {'lf_female': 40.3, 'mm_income': 33923, 'mhh_income': 48155, 'mf_income': 10472, 'lf_male': 80.4}, 1967: {'lf_female': 41.1, 'mm_income': 34427, 'mhh_income': 49182, 'mf_income': 11166, 'lf_male': 80.4}, 1968: {'lf_female': 41.6, 'mm_income': 35675, 'mhh_income': 51496, 'mf_income': 12045, 'lf_male': 80.1}, 1969: {'lf_female': 42.7, 'mm_income': 36716, 'mhh_income': 53872, 'mf_income': 12176, 'lf_male': 79.8}, 1970: {'lf_female': 43.4, 'mm_income': 36304, 'mhh_income': 53705, 'mf_income': 12176, 'lf_male': 79.7}, 1971: {'lf_female': 43.4, 'mm_income': 35995, 'mhh_income': 53630, 'mf_income': 12556, 'lf_male': 79.1}, 1972: {'lf_female': 43.9, 'mm_income': 37716, 'mhh_income': 56276, 'mf_income': 13158, 'lf_male': 78.9}, 1973: {'lf_female': 44.7, 'mm_income': 38382, 'mhh_income': 57416, 'mf_income': 13321, 'lf_male': 78.8}, 1974: {'lf_female': 45.7, 'mm_income': 36608, 'mhh_income': 55882, 'mf_income': 13349, 'lf_male': 78.7}, 1975: {'lf_female': 46.4, 'mm_income': 35432, 'mhh_income': 54908, 'mf_income': 13548, 'lf_male': 77.9}, 1976: {'lf_female': 47.3, 'mm_income': 35673, 'mhh_income': 56609, 'mf_income': 13534, 'lf_male': 77.5}, 1977: {'lf_female': 48.4, 'mm_income': 36037, 'mhh_income': 56990, 'mf_income': 14029, 'lf_male': 77.6}, 1978: {'lf_female': 50.0, 'mm_income': 36429, 'mhh_income': 58766, 'mf_income': 13552, 'lf_male': 77.8}, 1979: {'lf_female': 50.9, 'mm_income': 35842, 'mhh_income': 59601, 'mf_income': 13243, 'lf_male': 77.8}, 1980: {'lf_female': 51.5, 'mm_income': 34287, 'mhh_income': 57528, 'mf_income': 13463, 'lf_male': 77.5}, 1981: {'lf_female': 52.1, 'mm_income': 33663, 'mhh_income': 55938, 'mf_income': 13637, 'lf_male': 77.0}, 1982: {'lf_female': 52.6, 'mm_income': 32871, 'mhh_income': 55217, 'mf_income': 13872, 'lf_male': 76.7}, 1983: {'lf_female': 52.9, 'mm_income': 33086, 'mhh_income': 55585, 'mf_income': 14290, 'lf_male': 76.3}, 1984: {'lf_female': 53.6, 'mm_income': 33868, 'mhh_income': 57387, 'mf_income': 14911, 'lf_male': 76.3}, 1985: {'lf_female': 54.5, 'mm_income': 34236, 'mhh_income': 58215, 'mf_income': 15148, 'lf_male': 76.3}, 1986: {'lf_female': 55.3, 'mm_income': 35283, 'mhh_income': 60732, 'mf_income': 15689, 'lf_male': 76.2}, 1987: {'lf_female': 56.0, 'mm_income': 35470, 'mhh_income': 61762, 'mf_income': 16542, 'lf_male': 76.2}, 1988: {'lf_female': 56.6, 'mm_income': 36373, 'mhh_income': 61925, 'mf_income': 17090, 'lf_male': 76.2}, 1989: {'lf_female': 57.4, 'mm_income': 36685, 'mhh_income': 63093, 'mf_income': 17748, 'lf_male': 76.4}, 1990: {'lf_female': 57.5, 'mm_income': 35664, 'mhh_income': 62131, 'mf_income': 17698, 'lf_male': 76.4}, 1991: {'lf_female': 57.4, 'mm_income': 34710, 'mhh_income': 60944, 'mf_income': 17765, 'lf_male': 75.8}, 1992: {'lf_female': 57.8, 'mm_income': 33829, 'mhh_income': 60485, 'mf_income': 17719, 'lf_male': 75.8}, 1993: {'lf_female': 57.9, 'mm_income': 34057, 'mhh_income': 59649, 'mf_income': 17827, 'lf_male': 75.4}, 1994: {'lf_female': 58.8, 'mm_income': 34337, 'mhh_income': 61311, 'mf_income': 18127, 'lf_male': 75.0}, 1995: {'lf_female': 59.0, 'mm_income': 34829, 'mhh_income': 62692, 'mf_income': 18725, 'lf_male': 75.0}, 1996: {'lf_female': 59.3, 'mm_income': 35823, 'mhh_income': 63578, 'mf_income': 19261, 'lf_male': 74.9}, 1997: {'lf_female': 59.8, 'mm_income': 37093, 'mhh_income': 65570, 'mf_income': 20160, 'lf_male': 75.0}, 1998: {'lf_female': 59.9, 'mm_income': 38455, 'mhh_income': 67843, 'mf_income': 20946, 'lf_male': 74.9}, 1999: {'lf_female': 60.0, 'mm_income': 38792, 'mhh_income': 69405, 'mf_income': 21752, 'lf_male': 74.7}, 2000: {'lf_female': 59.9, 'mm_income': 38963, 'mhh_income': 69741, 'mf_income': 22082, 'lf_male': 74.8}, 2001: {'lf_female': 59.8, 'mm_income': 38913, 'mhh_income': 68740, 'mf_income': 22216, 'lf_male': 74.5}, 2002: {'lf_female': 59.6, 'mm_income': 38475, 'mhh_income': 68007, 'mf_income': 22123, 'lf_male': 74.1}, 2003: {'lf_female': 59.5, 'mm_income': 38527, 'mhh_income': 67809, 'mf_income': 22216, 'lf_male': 73.5}, 2004: {'lf_female': 59.2, 'mm_income': 38247, 'mhh_income': 67756, 'mf_income': 22143, 'lf_male': 73.3}, 2005: {'lf_female': 59.2, 'mm_income': 37914, 'mhh_income': 68122, 'mf_income': 22519, 'lf_male': 73.3}, 2006: {'lf_female': 59.4, 'mm_income': 37886, 'mhh_income': 68582, 'mf_income': 23501, 'lf_male': 73.5}, 2007: {'lf_female': 59.3, 'mm_income': 37904, 'mhh_income': 70057, 'mf_income': 23889, 'lf_male': 73.2}, 2008: {'lf_female': 59.5, 'mm_income': 36463, 'mhh_income': 67648, 'mf_income': 22945, 'lf_male': 73.0}, 2009: {'lf_female': 59.2, 'mm_income': 35513, 'mhh_income': 66303, 'mf_income': 23125, 'lf_male': 72.0}, 2010: {'lf_female': 58.6, 'mm_income': 34970, 'mhh_income': 65408, 'mf_income': 22559, 'lf_male': 71.2}, 2011: {'lf_female': 58.1, 'mm_income': 34723, 'mhh_income': 64185, 'mf_income': 22213, 'lf_male': 70.5}, 2012: {'lf_female': 57.7, 'mm_income': 34959, 'mhh_income': 64179, 'mf_income': 22190, 'lf_male': 70.2}, 2013: {'lf_female': 57.2, 'mm_income': 36213, 'mhh_income': 66542, 'mf_income': 22488, 'lf_male': 69.7}, 2014: {'lf_female': 57.0, 'mm_income': 36302, 'mhh_income': 66632, 'mf_income': 22240, 'lf_male': 69.2}} var morphed=0 var g=Snap('#graph1') var g15=Snap('#graph15') var g2=Snap('#graph2') var g3=Snap('#graph3') var gwidth=jQuery(window).width() var gheight=jQuery(window).height()-73 if(gwidth>1045){gwidth=1045} tallflag=0 if(gheight>gwidth*1.3){tallflag=1} var gcenter1=[gwidth/4,gheight/4] var gcenter2=[3*gwidth/4,3*gheight/4] var gxbounds2=[gwidth/16+10,gwidth-70] var gybounds2=[parseInt(70+(gheight-160)/2),gheight-30] var gybounds3=[0,(2/3)*gheight-50] var gxdomain=gxbounds2[1]-gxbounds2[0] var gydomain=gybounds2[1]-gybounds2[0] var gxmiddle=gwidth/2 var gymiddle=gheight/2 var ymax=75000 var yearinterval=(gxbounds2[1]-gxbounds2[0])/66 var year=1964
jQuery('#graph1').width(gwidth) jQuery('#graph1').height(gheight) jQuery('#pin2').width(gwidth) jQuery('#pin2').height(gheight) jQuery('#graph2').width(gwidth*(7/16)+10) jQuery('#graph2').height(gheight*(2/3)) jQuery('#graph2').css('marginTop',gheight*(1/3)) jQuery('#graph3').width(gwidth*(7/16)+10) jQuery('#graph3').height(gheight*(2/3)) jQuery('#graph3').css('marginTop',gheight*(1/3)) jQuery('#graph15').width(gwidth) jQuery('#graph15').height(gheight) // document.getElementById('graph3').style.marginLeft=(gwidth*(8/16)) var num=1
if(tallflag==1){ jQuery('#graph2').width(gwidth) jQuery('#graph2').height(gheight*(2/6)) jQuery('#graph3').width(gwidth) jQuery('#graph3').height(gheight*(2/6)) jQuery('#graph3').css('marginTop',0) jQuery("#graph3").css({position: 'static'}); var gybounds3=[0,(2/6)*gheight-50] }
var controller=new ScrollMagic.Controller()
drawpeopleicons(function(){ // main control function, very slight callback hell timeseries(function(){ setup() setup2()
tween = new TimelineMax() // animate up until the first stop .add(TweenMax.from("#stop0text", 21, {opacity:1, ease:Linear.easeNone}),5) .add(TweenMax.to("#graphlabel", 10, {opacity:0, ease:Linear.easeNone}),8) .add(TweenMax.to("#mhhmarker", 31, {marginLeft:gxbounds2[0]+(yearinterval)*31+4, ease:Linear.easeNone}),0) .add(TweenMax.to("#mmmarker", 31, {marginLeft:gxbounds2[0]+(yearinterval)*31+4, ease:Linear.easeNone}),0) .add(TweenMax.to("#mfmarker", 31, {marginLeft:gxbounds2[0]+(yearinterval)*31+4, ease:Linear.easeNone}),0) .add(TweenMax.to("rect#mask", 31, {attr:{width:(yearinterval)*31}, ease:Linear.easeNone}),0) .add(TweenMax.to("#female_lf_texthold", 2, {opacity:.8, ease:Linear.easeNone}),10) .add(TweenMax.to("#male_lf_texthold", 2, {opacity:.8, ease:Linear.easeNone}),10) .add(TweenMax.to("#pointer", 2, {opacity:.8, ease:Linear.easeNone}),10)
// first stop tween.to("line#familytrend1", 3, {opacity:1, ease:Linear.easeNone},31) tween.to("line#familytrend1", 3, {opacity:0, ease:Linear.easeNone},43) tween.to("path#mhh_income_path", 3, {opacity:.3, ease:Linear.easeNone},31) tween.to("path#mhh_income_path", 3, {opacity:1, ease:Linear.easeNone},43) tween.to("path#mhh_income_path2", 0, {opacity:0, ease:Linear.easeNone},31) tween.to("path#mhh_income_path2", 0, {opacity:1, ease:Linear.easeNone},46) .add(TweenMax.to("#stop1text", 5, {opacity:1, ease:Linear.easeNone}),26) .add(TweenMax.to("#stop1text", 5, {opacity:0, ease:Linear.easeNone}),46)
// continue after the first stop .add(TweenMax.to("#stop2text1", 5, {opacity:1, ease:Linear.easeNone}),51) .add(TweenMax.to("#stop2text1", 5, {opacity:0, ease:Linear.easeNone}),66) .add(TweenMax.to("#stop2text12", 5, {opacity:1, ease:Linear.easeNone}),71) .add(TweenMax.to("#stop2text12", 5, {opacity:0, ease:Linear.easeNone}),96) tween.to("line#maletrend", 3, {opacity:1, ease:Linear.easeNone},81) tween.to("line#maletrend", 3, {opacity:0, ease:Linear.easeNone},101) tween.to("path#mm_income_path2", 3, {opacity:.3, ease:Linear.easeNone},81) tween.to("path#mm_income_path2", 3, {opacity:1, ease:Linear.easeNone},101) tween.to("line#familytrend2", 3, {opacity:1, ease:Linear.easeNone},101) tween.to("line#familytrend2", 3, {opacity:0, ease:Linear.easeNone},121) tween.to("path#mhh_income_path2", 3, {opacity:.3, ease:Linear.easeNone},101) tween.to("path#mhh_income_path2", 3, {opacity:1, ease:Linear.easeNone},121) .add(TweenMax.to("#mhhmarker", 35, {marginLeft:gxbounds2[1]+4, ease:Linear.easeNone}),46) .add(TweenMax.to("#mmmarker", 35, {marginLeft:gxbounds2[1]+4, ease:Linear.easeNone}),46) .add(TweenMax.to("#mfmarker", 35, {marginLeft:gxbounds2[1]+4, ease:Linear.easeNone}),46) .add(TweenMax.to("rect#mask", 35, {attr:{width:gxdomain}, ease:Linear.easeNone}),46)
// fade out income markers as they draw close to end .add(TweenMax.to("#mhhmarker",5,{opacity:0}),75) .add(TweenMax.to("#mmmarker",5,{opacity:0}),75) .add(TweenMax.to("#mfmarker",5,{opacity:0}),75)
// second stop .add(TweenMax.to("#stop2text2", 5, {opacity:1, ease:Linear.easeNone}),101) .add(TweenMax.to("#stop2text2", 5, {opacity:0, ease:Linear.easeNone}),116) .add(TweenMax.to("#stop2text3", 5, {opacity:1, ease:Linear.easeNone}),121) .add(TweenMax.to("#stop2text3", 5, {opacity:1, ease:Linear.easeNone}),156)
tween2 = new TimelineMax() // continue with story after scroll .add(TweenMax.to("#stop3text1", 0, {opacity:1, ease:Linear.easeNone}),0) .add(TweenMax.to("#stop3text1", 5, {opacity:0, ease:Linear.easeNone}),60) .add(TweenMax.to("#stop3text2", 5, {opacity:1, ease:Linear.easeNone}),65) .add(TweenMax.to("#stop3text2", 5, {opacity:0, ease:Linear.easeNone}),90) .add(TweenMax.to("#stop3text3", 5, {opacity:1, ease:Linear.easeNone}),95) .add(TweenMax.to("#stop3text3", 5, {opacity:0, ease:Linear.easeNone}),120)
.add(TweenMax.to("#scrollfirst", 25, {marginTop:-gheight, ease:Linear.easeNone}),45) .add(TweenMax.to("#graph15", 10, {opacity:.2, ease:Linear.easeNone}),45) .add(TweenMax.to("#graph15", 25, {marginTop:0,height:0, ease:Linear.easeNone}),70) .add(TweenMax.to("#scrollfirst", 25, {marginTop:0,height:0, ease:Linear.easeNone}),70)
.add(TweenMax.to("#stop3text4", 5, {opacity:1, ease:Linear.easeNone}),125) .add(TweenMax.to("#stop3text4", 5, {opacity:0, ease:Linear.easeNone}),150) .add(TweenMax.to("#stop3text5", 5, {opacity:1, ease:Linear.easeNone}),155) .add(TweenMax.to("#stop3text5", 5, {opacity:0, ease:Linear.easeNone}),180) .add(TweenMax.to("#stop3text6", 5, {opacity:1, ease:Linear.easeNone}),185) .add(TweenMax.to("#stop3text6", 5, {opacity:1, ease:Linear.easeNone}),210)
// bars .add(TweenMax.from("rect#mpaid2", 45, {attr:{height:0,y:get_value2(0)}, ease:Linear.easeOut}),60) .add(TweenMax.from("rect#mhouse2", 45, {attr:{height:0,y:get_value2(0)}, ease:Linear.easeOut}),60) .add(TweenMax.from("rect#mcare2", 45, {attr:{height:0,y:get_value2(0)}, ease:Linear.easeOut}),60)
.add(TweenMax.from("rect#fpaid2", 45, {attr:{height:0,y:get_value2(0)}, ease:Linear.easeOut}),60) .add(TweenMax.from("rect#fhouse2", 45, {attr:{height:0,y:get_value2(0)}, ease:Linear.easeOut}),60) .add(TweenMax.from("rect#fcare2", 45, {attr:{height:0,y:get_value2(0)}, ease:Linear.easeOut}),60)
// tags .add(TweenMax.from("text#mtag2", 15, {opacity:0, ease:Linear.easeOut}),25) .add(TweenMax.from("text#ftag2", 15, {opacity:0, ease:Linear.easeOut}),25)
// yearmarker updates for(var i=0;i<83;i++){ if(i<32){ tween.set(jQuery("#yearmarker"), {text:String(1948+i)},0+i) } else if(i>46){ tween.set(jQuery("#yearmarker"), {text:String(1948+i-15)},i) } }
// people popping in and out for(var i=0;i<82;i++){ if(i<32){var cyear=1948+i} else if(i>46){var cyear=1948+i-15}
if(i<32 | i>46){ var current_female=Math.round(data[cyear]['lf_female']) var current_male=Math.round(data[cyear]['lf_male'])
try{ var next_female=Math.round(data[cyear+1]['lf_female']) var next_male=Math.round(data[cyear+1]['lf_male']) timing=i+1
if(current_female
if(current_male
// income tags for (var i=0;i<82;i++){ if(i<32){var cyear=1948+i} else if(i>46){var cyear=1948+i-15}
if(i<32 | i>46){ timing=i+1 var female=data[cyear]['mf_income'] var male=data[cyear]['mm_income'] var family=data[cyear]['mhh_income']
tween.to(jQuery("#mhhmarker"), .5, {marginTop:get_value(family)-20,ease:Linear.easeNone},timing-1) tween.to(jQuery("#mmmarker"), 1, {marginTop:get_value(male)-20,ease:Linear.easeNone},timing-1) tween.to(jQuery("#mfmarker"), 1, {marginTop:get_value(female)-20,ease:Linear.easeNone},timing-1)
tween.set(jQuery("#mhhmarker"), {text:'Families $'+Math.round(family/1000)+'k'},timing-1) tween.set(jQuery("#mfmarker"), {text:'Women $'+Math.round(female/1000)+'k'},timing-1) tween.set(jQuery("#mmmarker"), {text:'Men $'+Math.round(male/1000)+'k'},timing-1) } }
new ScrollMagic.Scene({offset:jQuery('#trigger').offset()['top']-253,duration:8000,}) .setPin('#pin') .setTween(tween) .addTo(controller)
new ScrollMagic.Scene({offset:jQuery('#trigger2').offset()['top']-253,duration:8000*(205/126),}) .setPin('#pin2') .setTween(tween2) .addTo(controller) }) })
function setup(){ // use this function to position everything
// linemarkers jQuery("#mhhmarker").width(40) jQuery("#mhhmarker").css('marginTop',get_value(27369)-20) jQuery("#mhhmarker").css('marginLeft',gwidth/16+14)
jQuery("#mmmarker").width(40) jQuery("#mmmarker").css('marginTop',get_value(20576)-20) jQuery("#mmmarker").css('marginLeft',gwidth/16+14)
jQuery("#mfmarker").width(40) jQuery("#mfmarker").css('marginTop',get_value(8665)-20) jQuery("#mfmarker").css('marginLeft',gwidth/16+14)
// stoptext positions function sizes(callback){ jQuery('.stoptext').css({width:gxbounds2[1]-(gxbounds2[0]+jQuery('#yearmarker').width()+30),left:gxbounds2[0]+jQuery('#yearmarker').width()+30}) callback() }
sizes(function(){
a=jQuery('.stoptext')
for(var i=0;i
var g15top=(gheight-g15height)/2+40 gybounds4=[g15top,gheight-50] // g2.text(60,get_value2(40),'Hours per week').attr({'font-family':'Lato','font-size':'1.4em','font-weight':700,'fill':'#777'})
var baselength=gwidth-100 var barwidth15=(baselength-50)/9 var lowcenter=50+barwidth15+barwidth15/2 var midcenter=50+4*barwidth15+barwidth15/2 var procenter=50+7*barwidth15+barwidth15/2 g15.text(lowcenter,get_value3(0)+18,'low-income').attr({'font-family':'Lato','font-size':'1em','fill':'#3d3242','text-anchor':'middle'}) g15.text(midcenter,get_value3(0)+18,'middle-class').attr({'font-family':'Lato','font-size':'1em','fill':'#3d3242','text-anchor':'middle'}) g15.text(procenter,get_value3(0)+18,'professional').attr({'font-family':'Lato','font-size':'1em','fill':'#3d3242','text-anchor':'middle'})
g15.line(45,get_value3(20),baselength+5,get_value3(20)).attr({'stroke-width':1,'stroke':'#ddd','shape-rendering':'crispEdges'}) g15.line(45,get_value3(40),baselength+5,get_value3(40)).attr({'stroke-width':1,'stroke':'#ddd','shape-rendering':'crispEdges'}) g15.line(45,get_value3(60),baselength+5,get_value3(60)).attr({'stroke-width':1,'stroke':'#ddd','shape-rendering':'crispEdges'}) g15.line(45,get_value3(80),baselength+5,get_value3(80)).attr({'stroke-width':1,'stroke':'#ddd','shape-rendering':'crispEdges'})
g15.text(40,get_value3(20)+6,'20').attr({'font-family':'Lato',fill:'#3d3242','text-anchor':'end'}) g15.text(40,get_value3(40)+6,'40').attr({'font-family':'Lato',fill:'#3d3242','text-anchor':'end'}) g15.text(40,get_value3(60)+6,'60').attr({'font-family':'Lato',fill:'#3d3242','text-anchor':'end'}) g15.text(40,get_value3(80)+6,'80%').attr({'font-family':'Lato',fill:'#3d3242','text-anchor':'end'})
g15.text(60,g15top-20,'Children with full-time').attr({'font-family':'Lato','font-size':'1.4em','font-weight':700,'fill':'#777'}) g15.text(60,g15top,'stay-at-home caregiver').attr({'font-family':'Lato','font-size':'1.4em','font-weight':700,'fill':'#777'})
var c151='#8C9FCA' var c152='#CCDAF0' var c153='#8da0cb'
g15.text(8*barwidth15/2+50,get_value3(71)-3,'1960').attr({'font-family':'Lato','fill':c151,'text-anchor':'middle','font-weight':700}) g15.text(10*barwidth15/2+50,get_value3(28)-3,'2012').attr({'font-family':'Lato','fill':c152,'text-anchor':'middle','font-weight':700})
// g15.rect(50+baselength-160,g15top-25,20,20).attr({'shape-rendering':'crispEdges',fill:c151}) // g15.rect(50+baselength-160,g15top+0,20,20).attr({'shape-rendering':'crispEdges',fill:c152}) // g15.rect(50+baselength-160,g15top+25,20,20).attr({'shape-rendering':'crispEdges',fill:c153})
// g15.text(50+baselength-130,g15top-9,'Low-income').attr({'font-family':'Lato','font-size':'1em','fill':'#3d3242'}) // g15.text(50+baselength-130,g15top+16,'Middle-class').attr({'font-family':'Lato','font-size':'1em','fill':'#3d3242'}) // g15.text(50+baselength-130,g15top+41,'Professional').attr({'font-family':'Lato','font-size':'1em','fill':'#3d3242'})
// bars // low-income g15.rect(barwidth15/2+50,get_value3(57),barwidth15,get_value3(0)-get_value3(57)).attr({'shape-rendering':'crispEdges',fill:c151}) g15.rect(barwidth15/2+50+barwidth15,get_value3(22),barwidth15,get_value3(0)-get_value3(22)).attr({'shape-rendering':'crispEdges',fill:c152})
// middle-income g15.rect(barwidth15/2+50+barwidth15*3,get_value3(71),barwidth15,get_value3(0)-get_value3(71)).attr({'shape-rendering':'crispEdges',fill:c151}) g15.rect(barwidth15/2+50+barwidth15*4,get_value3(28),barwidth15,get_value3(0)-get_value3(28)).attr({'shape-rendering':'crispEdges',fill:c152})
// professional g15.rect(barwidth15/2+50+barwidth15*6,get_value3(79),barwidth15,get_value3(0)-get_value3(79)).attr({'shape-rendering':'crispEdges',fill:c151}) g15.rect(barwidth15/2+50+barwidth15*7,get_value3(28),barwidth15,get_value3(0)-get_value3(28)).attr({'shape-rendering':'crispEdges',fill:c152})
g15.line(50,get_value3(0),baselength,get_value3(0)).attr({'stroke-width':2,'stroke':'black','shape-rendering':'crispEdges'})
g2.line(45,get_value2(10),7*ninths+50,get_value2(10)).attr({'stroke-width':1,'stroke':'#ddd','shape-rendering':'crispEdges'}) g2.line(45,get_value2(20),7*ninths+50,get_value2(20)).attr({'stroke-width':1,'stroke':'#ddd','shape-rendering':'crispEdges'}) g2.line(45,get_value2(30),7*ninths+50,get_value2(30)).attr({'stroke-width':1,'stroke':'#ddd','shape-rendering':'crispEdges'}) g2.line(45,get_value2(40),7*ninths+50,get_value2(40)).attr({'stroke-width':1,'stroke':'#ddd','shape-rendering':'crispEdges'})
g3.line(45,get_value2(10),7*ninths+50,get_value2(10)).attr({'stroke-width':1,'stroke':'#ddd','shape-rendering':'crispEdges'}) g3.line(45,get_value2(20),7*ninths+50,get_value2(20)).attr({'stroke-width':1,'stroke':'#ddd','shape-rendering':'crispEdges'}) g3.line(45,get_value2(30),7*ninths+50,get_value2(30)).attr({'stroke-width':1,'stroke':'#ddd','shape-rendering':'crispEdges'}) g3.line(45,get_value2(40),7*ninths+50,get_value2(40)).attr({'stroke-width':1,'stroke':'#ddd','shape-rendering':'crispEdges'})
g2.text(40,get_value2(10)+6,'10').attr({'font-family':'Lato',fill:'#3d3242','text-anchor':'end'}) g2.text(40,get_value2(20)+6,'20').attr({'font-family':'Lato',fill:'#3d3242','text-anchor':'end'}) g2.text(40,get_value2(30)+6,'30').attr({'font-family':'Lato',fill:'#3d3242','text-anchor':'end'}) g2.text(40,get_value2(40)+6,'40').attr({'font-family':'Lato',fill:'#3d3242','text-anchor':'end'})
g2.text(50+2*thirds-.5*barwidth,get_value2(31.9)-3,'1948').attr({'font-family':'Lato','fill':c1,'text-anchor':'middle','font-weight':700}) g3.text(50+.5*thirds-.5*barwidth,get_value2(42)-3,'1948').attr({'font-family':'Lato','fill':c2,'text-anchor':'middle','font-weight':700}) g2.text(50+2*thirds+.5*barwidth,get_value2(17.6)-3,'2012').attr({'font-family':'Lato','fill':c3,'text-anchor':'middle','font-weight':700,id:'mtag2'}) g3.text(50+.5*thirds+.5*barwidth,get_value2(38.5)-3,'2012').attr({'font-family':'Lato','fill':c4,'text-anchor':'middle','font-weight':700,id:'ftag2'})
g2.text(50+.5*thirds,get_value2(0)+18,'paid work').attr({'font-family':'Lato','font-size':'1em','fill':'#3d3242','text-anchor':'middle'}) g2.text(50+2*thirds,get_value2(0)+18,'housework').attr({'font-family':'Lato','font-size':'1em','fill':'#3d3242','text-anchor':'middle'}) g2.text(50+3.5*thirds,get_value2(0)+18,'child care').attr({'font-family':'Lato','font-size':'1em','fill':'#3d3242','text-anchor':'middle'})
g3.text(50+.5*thirds,get_value2(0)+18,'paid work').attr({'font-family':'Lato','font-size':'1em','fill':'#3d3242','text-anchor':'middle'}) g3.text(50+2*thirds,get_value2(0)+18,'housework').attr({'font-family':'Lato','font-size':'1em','fill':'#3d3242','text-anchor':'middle'}) g3.text(50+3.5*thirds,get_value2(0)+18,'child care').attr({'font-family':'Lato','font-size':'1em','fill':'#3d3242','text-anchor':'middle'})
// bars g2.rect(50+.5*thirds-barwidth,get_value2(8.4),barwidth,get_value2(0)-get_value2(8.4)).attr({id:'mpaid1',fill:c1,'shape-rendering':'crispEdges'}) g2.rect(50+.5*thirds,get_value2(21.7),barwidth,get_value2(0)-get_value2(21.7)).attr({id:'mpaid2',fill:c3,'shape-rendering':'crispEdges'}) g2.rect(50+2*thirds-barwidth,get_value2(31.9),barwidth,get_value2(0)-get_value2(31.9)).attr({id:'mhouse1',fill:c1,'shape-rendering':'crispEdges'}) g2.rect(50+2*thirds,get_value2(17.6),barwidth,get_value2(0)-get_value2(17.6)).attr({id:'mhouse2',fill:c3,'shape-rendering':'crispEdges'}) g2.rect(50+3.5*thirds-barwidth,get_value2(10.2),barwidth,get_value2(0)-get_value2(10.2)).attr({id:'mcare1',fill:c1,'shape-rendering':'crispEdges'}) g2.rect(50+3.5*thirds,get_value2(11.8),barwidth,get_value2(0)-get_value2(11.8)).attr({id:'mcare2',fill:c3,'shape-rendering':'crispEdges'})
g3.rect(50+.5*thirds-barwidth,get_value2(42),barwidth,get_value2(0)-get_value2(42)).attr({id:'fpaid1',fill:c2,'shape-rendering':'crispEdges'}) g3.rect(50+.5*thirds,get_value2(38.5),barwidth,get_value2(0)-get_value2(38.5)).attr({id:'fpaid2',fill:c4,'shape-rendering':'crispEdges'}) g3.rect(50+2*thirds-barwidth,get_value2(4.4),barwidth,get_value2(0)-get_value2(4.4)).attr({id:'fhouse1',fill:c2,'shape-rendering':'crispEdges'}) g3.rect(50+2*thirds,get_value2(8.8),barwidth,get_value2(0)-get_value2(8.8)).attr({id:'fhouse2',fill:c4,'shape-rendering':'crispEdges'}) g3.rect(50+3.5*thirds-barwidth,get_value2(2.5),barwidth,get_value2(0)-get_value2(2.5)).attr({id:'fcare1',fill:c2,'shape-rendering':'crispEdges'}) g3.rect(50+3.5*thirds,get_value2(7.1),barwidth,get_value2(0)-get_value2(7.1)).attr({id:'fcare2',fill:c4,'shape-rendering':'crispEdges'})
g2.line(50,get_value2(0),7*ninths+50,get_value2(0)).attr({'stroke-width':2,'stroke':'black','shape-rendering':'crispEdges'}) g3.line(50,get_value2(0),7*ninths+50,get_value2(0)).attr({'stroke-width':2,'stroke':'black','shape-rendering':'crispEdges'})
g2.text(7*ninths+50,get_value2(40),'Mothers').attr({'font-family':'Lato','font-size':'1.5em','fill':'#67c2a5','font-weight':700,'text-anchor':'end'}) g3.text(7*ninths+50,get_value2(40),'Fathers').attr({'font-family':'Lato','font-size':'1.5em','fill':'#fc8d62','font-weight':700,'text-anchor':'end'}) g2.text(60,get_value2(40),'Hours per week').attr({'font-family':'Lato','font-size':'1.4em','font-weight':700,'fill':'#777'}) }
function get_value2(y){ return gybounds3[1]-(y/45)*(gybounds3[1]-gybounds3[0]) }
function get_value3(y){ return gybounds4[1]-(y/80)*(gybounds4[1]-gybounds4[0]) }
// setup for the labor force people function drawpeopleicons(callback){
// ares and venus setup jQuery("#ares").width(gydomain/5) jQuery("#ares").css('marginLeft',gwidth/60) jQuery("#ares").css('marginTop',gheight/32) if(tallflag==1){jQuery("#ares").css('marginLeft',gxmiddle-180)}
jQuery("#venus").width(gydomain/5*.75) jQuery("#venus").css('marginLeft',16*gwidth/32) jQuery("#venus").css('marginTop',gheight/32-5)
// change this based on the width of the person icon personwidth=17 // change this to have more/fewer columns, can control how 'vertical' this part of the graphic is var maxcolumns=20 var columns=Math.floor((15*gwidth/32)/personwidth) if(columns>maxcolumns){ columns=maxcolumns }
var aresheight=gydomain/5 var venusheight=(gydomain/5*.75)*(400/266) var starty=Math.max(aresheight,venusheight)+gheight/32+10 var startx=gwidth/32
var maxmales=87 var maxfemales=60
var startmales=87 var startfemales=33
// males var lrow=Math.ceil(maxmales/columns)-1 for(var i=maxmales;i>0;i--){ var x=startx+((i-1) % columns*(personwidth))+lrow*10 if(tallflag==1){var x=gxmiddle-180+((i-1) % columns*(personwidth))+lrow*10} var y=starty+lrow*27-((i-1) % columns)*4 if((i-1) % columns==0){ lrow=lrow-1 } jQuery('#inner').prepend("") jQuery('#micon'+i).css('marginTop',y) jQuery('#micon'+i).css('marginLeft',x) if(i>68){ jQuery('#inner').prepend("") jQuery('#fadeicon'+i).css('marginTop',y) jQuery('#fadeicon'+i).css('marginLeft',x) jQuery('#fadeicon'+i).css('opacity',.3) } } var lrow=Math.ceil(maxmales/columns)-1 endy=20+starty+lrow*27-((i-maxmales) % columns)*4
// females
if(tallflag!=1){
var lrow=Math.ceil(maxfemales/columns)-1
for(var i=maxfemales;i>0;i--){
var x=gxmiddle+((i-1) % columns*(personwidth))+lrow*10
var y=starty+lrow*27-((i-1) % columns)*4
if((i-1) % columns==0){
lrow=lrow-1
}
if(i
var starty=(gydomain/5*.75)*(400/266)+endy+10
var lrow=Math.ceil(maxfemales/columns)-1
for(var i=maxfemales;i>0;i--){
var x=gxmiddle-180+((i-1) % columns*(personwidth))+lrow*10
var y=starty+lrow*27-((i-1) % columns)*4
if((i-1) % columns==0){
lrow=lrow-1
}
if(i
var lrow=Math.ceil(maxfemales/columns)-1 endy=starty+lrow*27-((i-maxfemales) % columns)*4+55 }
// labor force participation markers jQuery('#male_lf_text').css('marginLeft',parseInt(jQuery('#micon87').css('margin-left'))+2*personwidth) jQuery('#male_lf_text').css('marginTop',parseInt(jQuery('#micon87').css('margin-top'))-8+jQuery('#female_lf_text').height()/2)
jQuery('#female_lf_text').css('marginLeft',parseInt(jQuery('#ficon33').css('margin-left'))+2*personwidth) jQuery('#female_lf_text').css('marginTop',parseInt(jQuery('#ficon33').css('margin-top'))-8+jQuery('#female_lf_text').height()/2)
jQuery('#male_lf_texthold').css('marginLeft',parseInt(jQuery('#micon87').css('margin-left'))+2*personwidth) jQuery('#male_lf_texthold').css('marginTop',parseInt(jQuery('#micon87').css('margin-top'))-8+jQuery('#female_lf_text').height()/2)
jQuery('#female_lf_texthold').css('marginLeft',parseInt(jQuery('#ficon33').css('margin-left'))+2*personwidth-(1.9*personwidth)) jQuery('#female_lf_texthold').css('marginTop',parseInt(jQuery('#ficon33').css('margin-top'))-28+jQuery('#female_lf_text').height()/2-38)
jQuery('#pointer').css('marginLeft',parseInt(jQuery('#ficon33').css('margin-left'))+2*personwidth-(1.9*personwidth)+21) jQuery('#pointer').css('marginTop',parseInt(jQuery('#ficon33').css('margin-top'))-46+jQuery('#female_lf_text').height()/2+7)
if(tallflag==1){ jQuery('#female_lf_texthold').css('marginLeft',parseInt(jQuery('#ficon33').css('margin-left'))+2*personwidth-(1.9*personwidth)+210) jQuery('#female_lf_texthold').css('marginTop',parseInt(jQuery('#ficon33').css('margin-top'))-18+jQuery('#female_lf_text').height()/2)
jQuery('#pointer').width(185) jQuery('#pointer').height(1) jQuery('#pointer').css('marginLeft',parseInt(jQuery('#ficon33').css('margin-left'))+2*personwidth-(1.9*personwidth)+25) jQuery('#pointer').css('marginTop',parseInt(jQuery('#ficon33').css('margin-top'))-32+jQuery('#female_lf_text').height()/2+27) }
// lf1 and lf2 jQuery("#lf1").width(startx+columns*personwidth-jQuery('#ares').width()-40) jQuery("#lf1").css('marginLeft',startx+jQuery('#ares').width()+10) jQuery("#lf1").css('marginTop',gheight/32) if(tallflag==1){jQuery("#lf1").css('marginLeft',gxmiddle-180+jQuery('#ares').width()+10)}
jQuery("#lf2").width(startx+columns*personwidth-jQuery('#venus').width()-40) jQuery("#lf2").css('marginLeft',gxmiddle+jQuery('#venus').width()+10) jQuery("#lf2").css('marginTop',gheight/32)
if(tallflag==1){ jQuery("#lf2").css('marginLeft',gxmiddle-180+jQuery('#venus').width()+10) jQuery("#lf2").css('marginTop',preserve+27) jQuery("#lf1").css('marginTop',gheight/32+27) jQuery("#lf2").css('fontSize','1.8em') jQuery("#lf1").css('fontSize','1.8em') }
// update to the bounds for next part of graph to draw from gybounds2[0]=endy callback() }
function timeseries(callback){
// yearmarker setup jQuery("#yearmarker").css('marginTop',gybounds2[0]) jQuery("#yearmarker").css('marginLeft',gxbounds2[0]-10) jQuery("#yearmarker").width(140)
var yearmarker_line=g.line(-5+gxbounds2[0]+jQuery('#yearmarker').width()+10,gybounds2[0],-5+gxbounds2[0]+jQuery('#yearmarker').width()+10,gybounds2[0]+jQuery('#yearmarker').height()).attr({stroke:'#3d3242','stroke-width':1,'shape-rendering':'crispEdges'}) midline=gybounds2[0]+jQuery('#yearmarker').height()/2
// graph label setup jQuery("#graphlabel").css('marginTop',gybounds2[0]+(gybounds2[1]-gybounds2[0])/2) jQuery("#graphlabel").css('marginLeft',gxbounds2[0]+(gxbounds2[1]-gxbounds2[0])/3) jQuery("#graphlabel").width(480)
gybounds2[0]=gybounds2[0]+85
var mm_path='' var mhh_path='' var mf_path=''
for(var i=1948;i<1980;i++){ var y_mm=parseInt(get_value(data[i]['mm_income'])) var y_mhh=parseInt(get_value(data[i]['mhh_income'])) var y_mf=parseInt(get_value(data[i]['mf_income'])) var x=parseInt(gxbounds2[0]+(i-1948)*(yearinterval)) if(i==1948){ mm_path='M'+x+' '+y_mm mhh_path='M'+x+' '+y_mhh mf_path='M'+x+' '+y_mf } else{ mm_path=mm_path+'L'+x+' '+y_mm mhh_path=mhh_path+'L'+x+' '+y_mhh mf_path=mf_path+'L'+x+' '+y_mf } } for(var i=1979;i<2015;i++){ var y_mm=parseInt(get_value(data[i]['mm_income'])) var y_mhh=parseInt(get_value(data[i]['mhh_income'])) var y_mf=parseInt(get_value(data[i]['mf_income'])) var x=parseInt(gxbounds2[0]+(i-1948)*(yearinterval)) if(i==1979){ mm_path2='M'+x+' '+y_mm mhh_path2='M'+x+' '+y_mhh mf_path2='M'+x+' '+y_mf } else{ mm_path2=mm_path2+'L'+x+' '+y_mm mhh_path2=mhh_path2+'L'+x+' '+y_mhh mf_path2=mf_path2+'L'+x+' '+y_mf } } linegroup=g.group() // shaded recessions var rec1=g.rect(gxbounds2[0]+yearinterval*22,get_value(75000),yearinterval*(.917),get_value(0)-get_value(75000)).attr({fill:'#eee','shape-rendering':'crispEdges',class:'recessions'}) var rec2=g.rect(gxbounds2[0]+yearinterval*25.917,get_value(75000),yearinterval*(1.333),get_value(0)-get_value(75000)).attr({fill:'#eee','shape-rendering':'crispEdges',class:'recessions'}) var rec3=g.rect(gxbounds2[0]+yearinterval*32.083,get_value(75000),yearinterval*(.5),get_value(0)-get_value(75000)).attr({fill:'#eee','shape-rendering':'crispEdges',class:'recessions'}) var rec4=g.rect(gxbounds2[0]+yearinterval*33.583,get_value(75000),yearinterval*(1.333),get_value(0)-get_value(75000)).attr({fill:'#eee','shape-rendering':'crispEdges',class:'recessions'}) var rec5=g.rect(gxbounds2[0]+yearinterval*42.583,get_value(75000),yearinterval*(.667),get_value(0)-get_value(75000)).attr({fill:'#eee','shape-rendering':'crispEdges',class:'recessions'}) var rec6=g.rect(gxbounds2[0]+yearinterval*53.25,get_value(75000),yearinterval*(.667),get_value(0)-get_value(75000)).attr({fill:'#eee','shape-rendering':'crispEdges',class:'recessions'}) var rec7=g.rect(gxbounds2[0]+yearinterval*60,get_value(75000),yearinterval*(1.5),get_value(0)-get_value(75000)).attr({fill:'#eee','shape-rendering':'crispEdges',class:'recessions'}) var rec8=g.rect(gxbounds2[0]+yearinterval*.917,get_value(75000),yearinterval*(.917),get_value(0)-get_value(75000)).attr({fill:'#eee','shape-rendering':'crispEdges',class:'recessions'}) var rec9=g.rect(gxbounds2[0]+yearinterval*5.583,get_value(75000),yearinterval*(.833),get_value(0)-get_value(75000)).attr({fill:'#eee','shape-rendering':'crispEdges',class:'recessions'}) var rec10=g.rect(gxbounds2[0]+yearinterval*9.667,get_value(75000),yearinterval*(.667),get_value(0)-get_value(75000)).attr({fill:'#eee','shape-rendering':'crispEdges',class:'recessions'}) var rec11=g.rect(gxbounds2[0]+yearinterval*12.333,get_value(75000),yearinterval*(.833),get_value(0)-get_value(75000)).attr({fill:'#eee','shape-rendering':'crispEdges',class:'recessions'}) linegroup.append(rec1) linegroup.append(rec2) linegroup.append(rec3) linegroup.append(rec4) linegroup.append(rec5) linegroup.append(rec6) linegroup.append(rec7) linegroup.append(rec8) linegroup.append(rec9) linegroup.append(rec10) linegroup.append(rec11) var mm_income_path=g.path(mm_path).attr({fill:'none','stroke-width':'4px','stroke':'#fc8d62','id':'mm_income_path','stroke-linecap':'round'}) var rmhh_income_path=g.path(mhh_path).attr({fill:'none','stroke-width':'4px','stroke':'#3d3242','id':'mhh_income_path','stroke-linecap':'round'}) var mf_income_path=g.path(mf_path).attr({fill:'none','stroke-width':'4px','stroke':'#67c2a5','id':'mf_income_path','stroke-linecap':'round'}) var mm_income_path2=g.path(mm_path2).attr({fill:'none','stroke-width':'4px','stroke':'#fc8d62','id':'mm_income_path2','stroke-linecap':'round'}) var rmhh_income_path2=g.path(mhh_path2).attr({fill:'none','stroke-width':'4px','stroke':'#3d3242','id':'mhh_income_path2','stroke-linecap':'round'}) var mf_income_path2=g.path(mf_path2).attr({fill:'none','stroke-width':'4px','stroke':'#67c2a5','id':'mf_income_path2','stroke-linecap':'round'}) linegroup.append(mm_income_path) linegroup.append(mhh_income_path) linegroup.append(mf_income_path) linegroup.append(mm_income_path2) linegroup.append(mhh_income_path2) linegroup.append(mf_income_path2) var mask=g.rect(gxbounds2[0],gybounds2[0],0,gybounds2[1]-gybounds2[0]+50).attr({fill:'#fff',id:'mask'}) maskgroup=g.group(mask) linegroup.attr({mask:maskgroup}) // decade markers var dec50=g.text(gxbounds2[0]+yearinterval*2,gybounds2[1]+15,'1950').attr({'font-family':'Lato','text-anchor':'middle','font-size':'.8em',fill:'#3d3242'}) var dec60=g.text(gxbounds2[0]+yearinterval*12,gybounds2[1]+15,'1960').attr({'font-family':'Lato','text-anchor':'middle','font-size':'.8em',fill:'#3d3242'}) var dec70=g.text(gxbounds2[0]+yearinterval*22,gybounds2[1]+15,'1970').attr({'font-family':'Lato','text-anchor':'middle','font-size':'.8em',fill:'#3d3242'}) var dec80=g.text(gxbounds2[0]+yearinterval*32,gybounds2[1]+15,'1980').attr({'font-family':'Lato','text-anchor':'middle','font-size':'.8em',fill:'#3d3242'}) var dec90=g.text(gxbounds2[0]+yearinterval*42,gybounds2[1]+15,'1990').attr({'font-family':'Lato','text-anchor':'middle','font-size':'.8em',fill:'#3d3242'}) var dec00=g.text(gxbounds2[0]+yearinterval*52,gybounds2[1]+15,'2000').attr({'font-family':'Lato','text-anchor':'middle','font-size':'.8em',fill:'#3d3242'}) var dec10=g.text(gxbounds2[0]+yearinterval*62,gybounds2[1]+15,'2010').attr({'font-family':'Lato','text-anchor':'middle','font-size':'.8em',fill:'#3d3242'}) var dec50tick=g.line(gxbounds2[0]+yearinterval*2,gybounds2[1],gxbounds2[0]+yearinterval*2,gybounds2[1]+3).attr({stroke:'#3d3242','stroke-width':1,'shape-rendering':'crispEdges'}) var dec60tick=g.line(gxbounds2[0]+yearinterval*12,gybounds2[1],gxbounds2[0]+yearinterval*12,gybounds2[1]+3).attr({stroke:'#3d3242','stroke-width':1,'shape-rendering':'crispEdges'}) var dec70tick=g.line(gxbounds2[0]+yearinterval*22,gybounds2[1],gxbounds2[0]+yearinterval*22,gybounds2[1]+3).attr({stroke:'#3d3242','stroke-width':1,'shape-rendering':'crispEdges'}) var dec80tick=g.line(gxbounds2[0]+yearinterval*32,gybounds2[1],gxbounds2[0]+yearinterval*32,gybounds2[1]+3).attr({stroke:'#3d3242','stroke-width':1,'shape-rendering':'crispEdges'}) var dec90tick=g.line(gxbounds2[0]+yearinterval*42,gybounds2[1],gxbounds2[0]+yearinterval*42,gybounds2[1]+3).attr({stroke:'#3d3242','stroke-width':1,'shape-rendering':'crispEdges'}) var dec00tick=g.line(gxbounds2[0]+yearinterval*52,gybounds2[1],gxbounds2[0]+yearinterval*52,gybounds2[1]+3).attr({stroke:'#3d3242','stroke-width':1,'shape-rendering':'crispEdges'}) var dec10tick=g.line(gxbounds2[0]+yearinterval*62,gybounds2[1],gxbounds2[0]+yearinterval*62,gybounds2[1]+3).attr({stroke:'#3d3242','stroke-width':1,'shape-rendering':'crispEdges'}) callback() } function get_value(y){ return gybounds2[1]-(y/ymax)*(gybounds2[1]-gybounds2[0]) }