US Data Visualization (with fake data)

data.js

var us;
var stateNames = {};
var stateIds = {};
var stateNamesByAbbr = {};
var stateAbbrById = {};
var g;
var data = {};
var year = 2013;

var width = 960,
    height = 600,
    centered;

var projection = d3.geo.albersUsa()
    .scale(1070)
    .translate([width / 2, (height-100) / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var full = {
  purple: '#54278f',
  red: '#d60000',
  blue: '#0000d6',
  orange: '#DBA400'
};

var color = {};

color.purple = d3.scale.linear()
  .domain([1,4])
  .range(['#eeeeee',full.purple]);
color.red = d3.scale.linear()
  .domain([1,4])
  .range(['#f6eeee',full.red]);
color.blue = d3.scale.linear()
  .domain([1,5])
  .range(['#eeeeee',full.blue]);
color.orange = d3.scale.linear()
  .domain([3,13])
  .range(['#eeeeee',full.orange]);


var description = {
  rel: ["","No rights", "Limited rights", "Civil union or domestic partnerships allowed", "Marriage equality", "No data"],
  ban: ["","No law, statute or amendment","Statute banning marriage/relationship recognition","Constitutional amendment banning marriage","Statute banning same sex marriage recognition","No ban"],
  inter: ["","No interstate relationship recognition","Divorce only","Civil unions only","Marriage only","All out-of-state unions recognized"]
};

function loadGeoData(){
  d3.json("us.json", loadStateNames);
}

function loadStateNames(err, _us){
  us = _us;
  $.get("states.list", processStateNames);
}

function processStateNames(input){
  input = input.split("\n");
  for(var i=0;i<input.length;i++){
    var spl = input[i].split(';');
    if(spl.length<2) continue;
    var name = spl[0];
    var abbr = spl[1];
    var id = i+1;
    stateNames[id] = name;
    stateIds[name] = id;
    stateNamesByAbbr[abbr] = name;
    stateAbbrById[id] = abbr;
  }
  $.get("fakedata.csv", loadData);
}

function getData(year, abbr){
  var key = year+'-'+abbr;
  return data[key];
}

function loadData(_data){
  _data = _data.split('\n');

  for(var i=0;i<_data.length;i++){
    var row = _data[i].split(',');
    var year = row[0];
    var state = row[1];
    var key = year+"-"+state;
    data[key] = {
      ban: parseInt(row[2]),
      rel: parseInt(row[3]),
      inter: parseInt(row[4])
    };
    console.log(key,data[key]);
    data[key].sum = data[key].ban + data[key].rel + data[key].inter;
  }
  g = svg.append("g");

  var sc2 = d3.scale.linear()
    .domain([width-600,width-10])
    .range([1996,2013]);

  var t = d3.time.scale()
    .domain([new Date(1996,0,1),new Date(2013,0,1)])
    .range([width-600,width-10]);
  var timeline = d3.svg.axis().scale(t)
    .ticks(d3.time.year);
  g.append("g")
    .attr("class","timeline")
    .attr("transform", "translate(0,"+(height-50)+")")
    .call(timeline)
    .selectAll('text')
      .attr('y',0)
      .attr('x',9)
      .attr('dy','.35em')
      .attr('transform','rotate(90)')
      .style('text-anchor','start')

  var slider = svg.append("g").append("circle")
    .attr("cx",width-10)
    .attr("cy",height-50)
    .attr("r",8)
    .style("cursor","ew-resize")

  var menu = g.append("g").attr("class","menu");

  var menuRect = menu.append("rect")
    .attr("x", 10)
    .attr("y", (height-75))
    .attr("width", 300)
    .attr("height", 50)
    .attr("fill", full.purple)

  var currentVar = menu.append("text")
    .attr("x",20)
    .attr("y", (height-36))
    .attr("font-size","40px")
    .text("Recognition")

  menu.append("path")
    .attr("d","M295,"+(height-55)+"L265,"+(height-55)+"L280,"+(height-40)+"Z")
    .attr("fill","#0f0")
    .attr("class","dropdn")


  var yearDisplay = g.append("text")
    .attr("x",width-300)
    .attr("y",75)
    .style("fill","#000")
    .style("font-family","Roboto Slab")
    .style("text-anchor","start")
    .style("font-size","50px")
    .text(2013)


  var states = g.append("g")
      .attr("id", "states");
  states.selectAll("path")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
      .attr("d", path)
      .attr("title", function(d){
           var dat = getData(2013,stateAbbrById[d.id]);
           if(dat) dat = dat.rel;
           else dat = 5;
           return stateNames[d.id]+", 2013: "+description.rel[dat]; 
         })
      .style("fill", function(d){
         var dat = getData(2013, stateAbbrById[d.id]);
         if(dat)
         return color.purple(dat.rel);
         return '#eeeeee';
      });

  var menuDrop = g.append("g").attr("display","none");
  var dropHeight = 150;

  var menuDropRect = menuDrop.append("rect")
    .attr("x",10)
    .attr("y", height-75-dropHeight)
    .attr("width",300)
    .attr("height",dropHeight)
    .attr("fill",color.purple(2));
  var menuShowing = false;

  var showMenu = function(b){
    menuRect.transition()
      .attr("fill",displayColor(fullScale));
    menuDropRect.attr("fill",displayColor(fullScale*2/5));
    d3.selectAll(".menu-item")
      .transition()
      .attr("fill",displayColor(fullScale));
    menuDrop.attr("display",b?"inline":"none");
    menuShowing = b;
  };

  function toggleMenu(){ showMenu(!menuShowing); };

  menu.on("click",toggleMenu);

  var displayVar = 'rel';
  var displayColor = color.purple;
  var fullScale = 5;
  function updateVariable(idx){
    var varMap = ['rel','inter','ban','sum'];
    var colorMap = [color.purple, color.blue, color.red, color.orange];
    displayVar = varMap[idx];
    displayColor = colorMap[idx];
    fullScale = (displayVar==='sum'?12:5);
    setYear(year);
  }

  d3.selectAll(".tick text")
    .style("cursor","pointer")
    .on("click",function(){ 
      year = parseInt(d3.event.target.textContent); 
      slider.transition()
        .attr("cx",scale1(new Date(year,0,1)));
      setYear(year);
    });

  var labels = ["Recognition of unions","Interstate recognition","Ban on unions","Total"];
  var labelsShort = ["Recognition","Interstate","Bans","Total"];
  for(var i=0;i<labels.length;i++){
    (function(){
      var j = i;
      menuDrop.append("text")
        .attr("x",20)
        .attr("y",height-75-dropHeight+32*(j+1))
        .attr("font-size","24px")
        .attr("fill", color.purple(4))
        .style("cursor","pointer")
        .attr("class","menu-item")
        .text(labels[j])
        .on("click",function(){
          currentVar.text(labelsShort[j]);
          updateVariable(j);
          showMenu(false);
        });
    })();
  }


  var year = 2013;
  var mx0, cx0;
  var usingSlider = false;
  var snagSlider = function(e){
    usingSlider = true;
    cx0 = parseInt(slider.attr("cx"));
    mx0 = d3.event.pageX;
    d3.event.preventDefault();
    return false;
  };
  scale1=t;
  scale2=sc2;
  var snapSlider = function(cx){
    var yr = scale2(parseInt(cx));
    yr = Math.round(yr);
    if(yr<1996) yr=1996;
    if(yr>2013) yr=2013;
    if(yr===year) return;
    setYear(yr);
    var cx = scale1(new Date(yr,0,1));
    slider
      .attr("cx",cx);
  };
  var moveSlider = function(e){
    if(!usingSlider) return;
    var dx = d3.event.pageX - mx0;
    var cx = cx0 + dx;
    d3.event.preventDefault();
    snapSlider(cx);
    return false;
  };
  var releaseSlider = function(){
    if(!usingSlider) return true;
    usingSlider = false;
    d3.event.preventDefault();
    return false;
  };

  slider.on("mousedown",snagSlider);
  svg.on("mousemove",moveSlider);
  d3.select("body").on("mouseup",releaseSlider);

  var setYear = function(yr){
    year = yr;
    states.selectAll("path")
      .transition()
      .attr("title", function(d){
           var dat = getData(year,stateAbbrById[d.id]);
           if(dat) dat = dat[displayVar];
           else{ dat = {ban:1,inter:1,rel:1,sum:1}; dat = dat[displayVar]; }
           var desc= Math.round(dat*100/12)+"%";
           if(displayVar !== 'sum') desc = description[displayVar][dat]
           return stateNames[d.id]+", "+year+": "+desc; 
         })
      .style("fill", function(d){
         var dat = getData(year, stateAbbrById[d.id]);
         if(dat)
         return displayColor(dat[displayVar]);
         return '#eeeeee';
      });
    yearDisplay.text(year);
  };
}


$(function(){
  loadGeoData();
});

fakedata.csv

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cost of stigma</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="data.js"></script>
</body>
</html>

states.list

Alabama;AL
Alaska;AK
American Samoa
Arizona;AZ
Arkansas;AR
California;CA

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

style.css

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700);

path {
  fill: #ccc;
  stroke: #fff;
  stroke-linejoin: round;
}

body {
  text-align: center;
  font-family: Roboto Slab;
}

.timeline line,
.timeline path {
  stroke: #000;
  shape-rendering: crispEdges;
  fill: none;
}

.menu,
.menu text {
  fill: #fff;
  font-family: Roboto Slab;
  font-weight: bold;
  font-variant: italic;
  text-anchor: start
  font-size: 48px;
}

.menu,
.menu text,
.menu path{
  cursor: pointer;
}

.menu text,
.menu path{
  fill: #fff;
}

.dropdn {
  fill: #fff;
  stroke: #fff;
}

.menu-item:hover{
  fill: #fff;
}

us.json