jquery map

medicaid map javascript

var stateNames = {
  "AL":"Alabama",
  "AK":"Alaska",
  "AZ":"Arizona",
  "AR":"Arkansas",
  "CA":"California",
  "CO":"Colorado",
  "CT":"Connecticut",
  "DE":"Delaware",
  "DC":"District of Columbia",
  "FL":"Florida",
  "GA":"Georgia",
  "HI":"Hawaii",
  "ID":"Idaho",
  "IL":"Illinois",
  "IN":"Indiana",
  "IA":"Iowa",
  "KS":"Kansas",
  "KY":"Kentucky",
  "LA":"Louisiana",
  "ME":"Maine",
  "MD":"Maryland",
  "MA":"Massachusetts",
  "MI":"Michigan",
  "MN":"Minnesota",
  "MS":"Mississippi",
  "MO":"Missouri",
  "MT":"Montana",
  "NE":"Nebraska",
  "NV":"Nevada",
  "NH":"New Hampshire",
  "NJ":"New Jersey",
  "NM":"New Mexico",
  "NY":"New York",
  "NC":"North Carolina",
  "ND":"North Dakota",
  "OH":"Ohio",
  "OK":"Oklahoma",
  "OR":"Oregon",
  "PA":"Pennsylvania",
  "RI":"Rhode Island",
  "SC":"South Carolina",
  "SD":"South Dakota",
  "TN":"Tennessee",
  "TX":"Texas",
  "UT":"Utah",
  "VT":"Vermont",
  "VA":"Virginia",
  "WA":"Washington",
  "WV":"West Virginia",
  "WI":"Wisconsin",
  "WY":"Wyoming"
};

var colors = [  //colors for each state, coded by number of new enrollees. first color corresponds to "All States" view, second corresponds to "States That Sued".
  ["AL","#e8a06a","#e8a06a"],
  ["AK","#f7dfcd","#f7dfcd"],
  ["AZ","#f0bf9c","#f0bf9c"],
  ["AR","#e8a06a","#eee"],
  ["CA","#d96007","#eee"],
  ["CO","#e8a06a","#e8a06a"],
  ["CT","#f0bf9c","#eee"],
  ["DE","#f7dfcd","#eee"],
  ["FL","#d96007","#d96007"],
  ["GA","#d96007","#d96007"],
  ["HI","#f7dfcd","#eee"],
  ["ID","#f7dfcd","#f7dfcd"],
  ["IL","#d96007","#eee"],
  ["IN","#e8a06a","#e8a06a"],
  ["IA","#f0bf9c","#f0bf9c"],
  ["KS","#f0bf9c","#f0bf9c"],
  ["KY","#e8a06a","#eee"],
  ["LA","#e8a06a","#e8a06a"],
  ["ME","#f7dfcd","#f7dfcd"],
  ["MD","#e8a06a","#eee"],
  ["MA","#f7dfcd","#eee"],
  ["MI","#e18039","#e18039"],
  ["MN","#e8a06a","#eee"],
  ["MS","#e8a06a","#e8a06a"],
  ["MO","#e8a06a","#eee"],
  ["MT","#f7dfcd","#eee"],
  ["NE","#f7dfcd","#f7dfcd"],
  ["NV","#f0bf9c","#f0bf9c"],
  ["NH","#f7dfcd","#eee"],
  ["NJ","#e8a06a","#eee"],
  ["NM","#f0bf9c","#eee"],
  ["NY","#e8a06a","#eee"],
  ["NC","#d96007","#eee"],
  ["ND","#f7dfcd","#f7dfcd"],
  ["OH","#d96007","#d96007"],
  ["OK","#e8a06a","#eee"],
  ["OR","#e8a06a","#eee"],
  ["PA","#e18039","#e18039"],
  ["RI","#f7dfcd","#eee"],
  ["SC","#e8a06a","#e8a06a"],
  ["SD","#f7dfcd","#f7dfcd"],
  ["TN","#e8a06a","#eee"],
  ["TX","#d96007","#d96007"],
  ["UT","#f0bf9c","#f0bf9c"],
  ["VT","#f7dfcd","#eee"],
  ["VA","#e8a06a","#eee"],
  ["WA","#e8a06a","#e8a06a"],
  ["WV","#f7dfcd","#eee"],
  ["WI","#e8a06a","#e8a06a"],
  ["WY","#f7dfcd","#f7dfcd"]
];

var guff = { //number of new enrollees per state
  "AL":"351,567",
  "AK":"42,794",
  "AZ":"105,428",
  "AR":"200,690",
  "CA":"2,008,796",
  "CO":"245,730",
  "CT":"114,083",
  "DE":"12,081",
  "FL":"951,622",
  "GA":"646,557",
  "HI":"84,130",
  "ID":"85,883",
  "IL":"631,024",
  "IN":"297,737",
  "IA":"114,691",
  "KS":"143,445",
  "KY":"329,000",
  "LA":"366,318",
  "ME":"43,468",
  "MD":"245,996",
  "MA":"29,921",
  "MI":"589,965",
  "MN":"251,783",
  "MS":"320,748",
  "MO":"307,872",
  "MT":"57,356",
  "NE":"83,898",
  "NV":"136,563",
  "NH":"55,918",
  "NJ":"390,490",
  "NM":"145,024",
  "NY":"305,945",
  "NC":"633,485",
  "ND":"28,864",
  "OH":"667,376",
  "OK":"357,150",
  "OR":"294,600",
  "PA":"482,366",
  "RI":"41,185",
  "SC":"344,109",
  "SD":"31,317",
  "TN":"330,932",
  "TX":"1,798,314",
  "UT":"138,918",
  "VT":"4,484",
  "VA":"245,840",
  "WA":"295,662",
  "WV":"95,675",
  "WI":"205,987",
  "WY":"29,899",
};

var drawMap = function(index){
  
  var myColors = _.reduce(colors,function(memo,it){ 
    memo[it[0]] = it[index];
    return memo;
  },{}) 
  
  $("#states").html("");
  var paper = Raphael("states", 560, 420);
  propublica.map().continental().asSVG(560, 420, function(svg, it){ 
  var path = paper.path(svg).attr('fill', myColors[it.key] || "#f1f1f1").attr('stroke-width', 0.5).attr('stroke', '#fff').attr('stroke-linejoin', 'bevel');
   path.hover(function(){
     if(stateNames[it.key]) $(".state-box").html(stateNames[it.key]); //adds state names to state-box div
     if(guff[it.key]) $(".text-box").html(guff[it.key]); // adds guff to text-box div
    path.attr({"fill": "#444"}); // adds hover color
    },
    function(){
      path.attr({"fill": myColors[it.key]}); //sets colors by matching state abbrev to colors
    });
   
  });

  
  
  $("#alaska").html("");
  var alaska = Raphael("alaska", 140, 140);
  propublica.map().alaska().asSVG(140, 140, function(svg, it){
   var alaskaPath = alaska.path(svg).attr('fill', myColors[it.key]).attr('stroke-width', 0.5).attr('stroke', '#fff').attr('stroke-linejoin', 'bevel');
    alaskaPath.hover(function(){
      if(stateNames[it.key]) $(".state-box").html(stateNames[it.key]);
       if(guff[it.key]) $(".text-box").html(guff[it.key]);
      alaskaPath.attr({"fill": "#444"});
    },
    function(){
      alaskaPath.attr({"fill": myColors[it.key]});
    });
    
  });

  $("#hawaii").html("");
  var hawaii = Raphael("hawaii", 280, 280);
  propublica.map().hawaii().asSVG(280, 280, function(svg, it){
   var hawaiiPath = hawaii.path(svg).attr('fill', myColors[it.key]).attr('stroke-width', 0.5).attr('stroke', '#fff').attr('stroke-linejoin', 'bevel');
   hawaiiPath.hover(function(){
     if(stateNames[it.key]) $(".state-box").html(stateNames[it.key]);
      if(guff[it.key]) $(".text-box").html(guff[it.key]);
     hawaiiPath.attr({"fill": "#444"});
   },
   function(){
     hawaiiPath.attr({"fill": myColors[it.key]});
   });
  
  });
};

var menuClick = function(index) {
  drawMap(index);
  $(".state-box").html(""); //removes the state name from the state-box div
  $(".text-box").html(""); //remves the text from the tex-box div
};

$(function(){
  drawMap(1);
  $("#sidebar li.total").addClass("active"); //sets background color of active tab (default view)

  $("#sidebar li").click(function(e) { 
    $("#sidebar li").removeClass("active"); //removes background color of all tabs          
    $(e.currentTarget).addClass("active");  //sets background color of active tab          
  });

  
  $("#total-sort").click(function(e) {
    menuClick(1);
    $(".details-box").html("15.9 million"); //sets content of details-box div
  }); 
  $("#del-sort").click(function() { 
    menuClick(2);
    $(".details-box").html("8.5 million"); //sets content of details-box div
    
  });  

});