transition practice

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

d3.csv("dat.csv",function(error,data){
      if (error) throw error;
      
      //console.log(data)
 
    
      var w = 2*95, h = 2*40;
			var labs = ["a","b","c","d"]

var color = d3.scaleSequential(d3.interpolateReds).domain([0,5]);

var curr;

for (var i = 0 ; i < 4 ; ++i){
        for (var j = 0; j < 3 ; ++j){
          curr = svg.append("rect")
            .attr("width",w - 1)
            .attr("height",h - 1)
            .attr("x",i*w)
            .attr("y",j*h)
            .style("fill",function(){
            	return color(data[j][labs[i]]);
          })
            .attr("class",function(){
            	return data[j][labs[i]] + " cell "+i +" "+j;
          });

}
      }

cells.on("click",function(d){
        //console.log(this);
        //console.log(this.classList);
        
        var cells = svg.selectAll(".cell");
        
        var h_i = this.classList[2], h_j = this.classList[3];
        
        var r = [cells[h_i],cells[h_i + 3],cells[h_i + 6],cells[h_i + 9]];

//   function change() {
//     clearTimeout(sortTimeout);

//     // Copy-on-write since tweens are evaluated after a delay.
//     var x0 = x.domain(data.sort(this.checked
//         ? function(a, b) { return b.frequency - a.frequency; }
//         : function(a, b) { return d3.ascending(a.letter, b.letter); })
//         .map(function(d) { return d.letter; }))
//         .copy();

//     svg.selectAll(".bar")
//         .sort(function(a, b) { return x0(a.letter) - x0(b.letter); });

//     var transition = svg.transition().duration(750),
//         delay = function(d, i) { return i * 50; };

//     transition.selectAll(".bar")
//         .delay(delay)
//         .attr("x", function(d) { return x0(d.letter); });

//     transition.select(".x.axis")
//         .call(xAxis)
//       .selectAll("g")
//         .delay(delay);
//   }
      
    });

</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js