[UPDATE] matrix css

templates/matrix.html

@@ -18,6 +18,14 @@ line {
 
 text.active {
   fill: red;
+  font-weight: bold;
+  font-size: medium;
+}
+
+text.inactive {
+  fill: #e3e4e1;
+  font-weight: normal;
+  font-size: small;
 }
 </style>
 
@@ -154,12 +162,25 @@ var svg = d3.select("body").append("svg")
   }
 
   function mouseover(p) {
-    d3.selectAll(".row text").classed("active", function(d, i) { return i == p.y; });
-    d3.selectAll(".column text").classed("active", function(d, i) { return i == p.x; });
+
+    d3.selectAll(".row text")
+    .classed("active", function(d, i) {
+      return i == p.y;
+    }).classed("inactive", function(d, i) {
+      return i != p.y;
+    });
+
+    d3.selectAll(".column text")
+    .classed("active", function(d, i) {
+      return i == p.x;
+    }).classed("inactive", function(d, i) {
+      return i != p.x;
+    });
+
   }
 
   function mouseout() {
-    d3.selectAll("text").classed("active", false);
+    d3.selectAll("text").classed("active", false).classed("inactive", false);
   }
 
   d3.select("#order").on("change", function() {