d3 transition interrupt

vis.js

'use strict'
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 1200 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom;

var padding = 100; 

var x = d3.scale.linear()
        .range([padding, width - padding]);

var y = d3.scale.linear()
        .range([height-padding, padding]);

var svg = d3.select('body #viz').append('svg')
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var tt = d3.select("body").append("div")   
    .attr("class", "tooltip")               
        .style("opacity", 0);

/*
svg.append("line")
  .attr("x1",0)
  .attr("x2", width)
  .attr("y1", height/2)
  .attr("y2", height/2)
  .attr("class","divider");

svg.append("line")
  .attr("x1", width/2)
  .attr("x2", width/2)
  .attr("y1", 0)
  .attr("y2", height)
  .attr("class","divider");
*/

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

function drawChart(hash){
  
  d3.json('/static/eshk/'+hash+".json", function(err, data){
    var keys = []
    var coords = []
    var texts = []
    
    //reformat the dictionary to 2 indexed arrays
    d3.keys(data).forEach(function(key,ind){
      keys.push(key.substring(1).replace("/","_"))
      coords.push(data[key]["vector"])
      texts.push([data[key]["airing"], data[key]["desc"]])
    })
    
    var joined = d3.zip(keys, coords);

    x.domain(d3.extent(coords, function(d){ return d[0] })).nice();
    y.domain(d3.extent(coords, function(d){ return d[1] })).nice();

     svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
        .append("text")
          .attr("class", "label")
          .attr("x", width)
          .attr("y", -6)
          .style("text-anchor", "end")

      svg.append("g")
          .attr("class", "y axis")
        .append("text")
          .attr("class", "label")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
    
     function fade(dir){
        return function(d){
          //first fix z-indexing
          svg.selectAll("image.movie_cover")
            .sort(function(a,b){
              if(a == d){ return 1; }
              return 0;
            })

          var others = svg.selectAll("image.movie_cover")
            .filter(function(g,i){
              return g != d
            });
            
          var single = svg.selectAll("image.movie_cover")
            .filter(function(g,i){
              return g === d;
            });
            
            others  
              .transition().duration(200)
              .style("opacity", dir == "in" ? .3 : 1);

            single
              .transition().duration(200)
              .attr({
                x: function(e){  return dir == "in" ? x(e[0])-(64/2) : x(e[0]);  },
                y: function(e){  return dir == "in" ? y(e[1])-(191/2) : y(e[1]);  },
                width: dir == "in" ? 214 : 85,
                height: dir == "in" ? 317 : 126
              })

            tt.transition()        
                    .duration(200)      
                    .style("opacity", function(e){  return dir == "in" ? .9 : 0 });      
            tt.html(function(){
              var text = texts[coords.indexOf(d)];
              return "<h4>"+text[0]+"</h4>"+"<p>"+text[1]+"</p>"
            })  
                  .style("left", (d3.event.pageX + 60) + "px")     
                  .style("top", (d3.event.pageY - 60) + "px"); 

        }
     }

     svg.selectAll(".dot")
      .data(coords)
    .enter().append("svg:image")
      .attr("class", "movie_cover")
      .attr("x", function(d) { return x(d[0]); })
      .attr("y", function(d) { return y(d[1]); })
      .attr("xlink:href",function(d){return '/static/eshk/'+hash+'_images/'+keys[coords.indexOf(d)]+'.jpg' }) 
      .attr("width",85)
      .attr("height",126)
      .on("mouseover", fade("in")) 
      .on("mouseout", fade("out")) 
  })
}

var hash = window.location.hash ? window.location.hash.substring(1) : 'alien';
drawChart(hash);