pre-k sortable bar
var bars=Snap('#bars') var ordered=0 var sorting=0 var maxdata0=0 var maxdata1=0 var maxdata2=0 var sortbar_data={'WA': [710, 7.8, 9, 'WA'], 'DE': [783, 9.4, 7, 'DE'], 'DC': [831, 37, 0, 'DC'], 'WI': [813, 18, 7, 'WI'], 'WV': [685, 16, 3, 'WV'], 'HI': [730, 7.3, 9, 'HI'], 'FL': [549, 8.7, 9, 'FL'], 'WY': [995, 8.1, 8, 'WY'], 'NH': [575, 11, 9, 'NH'], 'NJ': [728, 9.5, 8, 'NJ'], 'NM': [771, 11, 7, 'NM'], 'TX': [762, 8.2, 9, 'TX'], 'LA': [860, 9.5, 8, 'LA'], 'NC': [616, 7.2, 9, 'NC'], 'ND': [918, 11, 7, 'ND'], 'NE': [839, 9.5, 8, 'NE'], 'TN': [690, 7.9, 9, 'TN'], 'NY': [922, 13, 7, 'NY'], 'PA': [820, 10, 8, 'PA'], 'AK': [1050, 10, 7, 'AK'], 'NV': [677, 7.4, 9, 'NV'], 'VA': [723, 9.1, 9, 'VA'], 'CO': [763, 9.8, 8, 'CO'], 'CA': [855, 8.0, 9, 'CA'], 'AL': [689, 7.1, 9, 'AL'], 'AR': [687, 10.0, 7, 'AR'], 'VT': [592, 36, 0, 'VT'], 'IL': [771, 9.9, 8, 'IL'], 'GA': [671, 7.0, 9, 'GA'], 'IN': [763, 7.5, 9, 'IN'], 'IA': [779, 9.3, 8, 'IA'], 'OK': [701, 11, 6, 'OK'], 'AZ': [712, 8.9, 8, 'AZ'], 'ID': [768, 7.2, 9, 'ID'], 'CT': [789, 10, 7, 'CT'], 'ME': [536, 15, 2, 'ME'], 'MD': [773, 8.8, 8, 'MD'], 'MA': [687, 7.8, 9, 'MA'], 'OH': [805, 8.5, 8, 'OH'], 'UT': [974, 7.8, 8, 'UT'], 'MO': [723, 8.2, 10, 'MO'], 'MN': [781, 8.5, 8, 'MN'], 'MI': [792, 9.7, 7, 'MI'], 'RI': [711, 11, 7, 'RI'], 'KS': [804, 9.8, 8, 'KS'], 'MT': [749, 9.6, 8, 'MT'], 'MS': [763, 9.1, 8, 'MS'], 'SC': [586, 6.7, 10, 'SC'], 'KY': [681, 12, 6, 'KY'], 'OR': [758, 12, 7, 'OR'], 'SD': [878, 12, 7, 'SD']}
var header1=bars.text(35,20,'Where does your state rank?').attr({'font-family':'Lato','font-size':20,'font-weight':700}) var header1=bars.text(35,40,'Every state benefits from universal pre-k. Click a column header to sort the chart, or hover over a row for more detail.').attr({'font-family':'Lato','font-size':16,'font-weight':400})
draw_bars()
function sort_data(index){ data_list=[] for (var key in sortbar_data) { data_list.push([key,sortbar_data[key][index]]) }
if (index!=3){ data_list.sort(function(a,b){ var x=a[1]; var y=b[1] if (index==0 || index==1){return y-x} if (index==2){return x-y} }) } if (index==3){ data_list.sort(function(a,b){ if (a[1] < b[1]) return -1; if (a[1] > b[1]) return 1; return 0 }) } return data_list }
function draw_bars(){ // Headers // var clickarea=bars.rect(0,0,980,970).attr({opacity:.05,fill:'#c78521'}) var head_text_0=bars.text(80.5,75,'Net Benefits Per Capita in 2050').attr({'font-weight':400,'font-size':15,'font-family':'Lato','text-anchor':'start','id':0}) var head_text_1=bars.text(420.5,75,'Ratio of Benefits to Costs').attr({'font-weight':400,'font-size':15,'font-family':'Lato','text-anchor':'start','id':1}) var head_text_2=bars.text(760.5,75,'Years to Break Even on Investment').attr({'font-weight':400,'font-size':15,'font-family':'Lato','text-anchor':'start','id':2})
var arrow_3=bars.polyline(46.5,68,56.5,68,51.5,73).attr({fill:'#D0D0D0','ident':'arrow_3',cursor:'pointer'}) var arrow_0=bars.polyline(295.5,68,305.5,68,300.5,73).attr({'ident':'arrow_0',cursor:'pointer'}) var arrow_1=bars.polyline(592.5,68,602.5,68,597.5,73).attr({fill:'#D0D0D0','ident':'arrow_1',cursor:'pointer'}) var arrow_2=bars.polyline(993.5,73,1003.5,73,998.5,68).attr({fill:'#D0D0D0','ident':'arrow_2',cursor:'pointer'})
var header_backing_3=bars.rect(38,53,30,27).attr({'fill':'white',opacity:0,cursor:'pointer'}) var header_backing_0=bars.rect(77,53,238,27).attr({'fill':'white',opacity:0,cursor:'pointer'}) var header_backing_1=bars.rect(417,53,200,27).attr({'fill':'white',opacity:0,cursor:'pointer'}) var header_backing_2=bars.rect(757,53,253,27).attr({'fill':'white',opacity:0,cursor:'pointer'})
sortbar_click_handler(header_backing_3,3) sortbar_click_handler(header_backing_0,0) sortbar_click_handler(header_backing_1,1) sortbar_click_handler(header_backing_2,2)
// Section divs var section_div0=bars.line(80.5,85,80.5,1006).attr({strokeWidth:1,'stroke':'#a0a0a0'}) var section_div1=bars.line(420.5,85,420.5,1006).attr({strokeWidth:1,'stroke':'#a0a0a0'}) var section_div2=bars.line(760.5,85,760.5,1006).attr({strokeWidth:1,'stroke':'#a0a0a0'})
// Drawing the bars sorted0=sort_data(0) sorted1=sort_data(1) sorted2=sort_data(2)
maxdata0=sorted0[0][1] maxdata1=sorted1[0][1] maxdata2=sorted2[50][1]
for (var i=0;i<50;i++) {
if (i%2==0){
bars.rect(30,86+i*18,1070,18).attr({opacity:0.02,fill:'#000000',strokeWidth:0,stroke:'black'})
}
}
for (var i=0;i