       .attr("y", (d) -> yscale(d.col))
       .attr("width", xscale.rangeBand())
       .attr("height", yscale.rangeBand())
-      .attr("id", (d) -> "#{d.row}_#{d.col}")
+      .attr("id", (d) -> "r#{d.row}c#{d.col}")
       .style("fill", (d) -> zscale(d.value))
 
   cells.on("mouseover", ->
-    d3.select(this).style("stroke","orange").style("stroke-width", 2))
+    d3.select(this).style("stroke","green")
+    label = reverselabels(this.id)
+    console.log("#{this.id} #{label}")
+    d3.select("rect ##{label}").style("stroke","red"))
 
   cells.on("mouseout", ->
-    d3.select(this).style("stroke","none"))
+    d3.select(this).style("stroke","none")
+    label = reverselabels(this.id)
+    console.log("#{this.id} #{label}")
+    d3.select("rect ##{label}").style("stroke","none"))
 
   cells.on("click", (d) ->
     d3.selectAll("#tooltip").transition().duration(500).attr("opacity",0).remove()

xscale = []
yscale = []
zscale = []


# create SVG element and shift it down and to right

          if d.row is d.col
            markers[d.row].marker
          else
            "#{markers[d.row].marker} : #{markers[d.col].marker}    rf = #{twodigits(matrix[d.row][d.col].rf)}    lod = #{onedigit(matrix[d.row][d.col].lod)}"
        )
        .attr("id", "tooltip")
        .style("font-family", "sans-serif")
