Heatmap transparent filtering

[RezaAziztabar]

For most of the charts when dc.js is used we will have a transparent layer on the not selected part of the chart, but for Heatmap the not selected parts will be hidden. (following are screenshots) I am trying to customize the Heatmap code to add this functionality to it. Any idea how to do it is appreciated :)

[gordonwoodhull]

Wait, that's not what I see. I see all the unselected boxes going grey, for example here:

https://dc-js.github.io/dc.js/examples/heatmap-filtering.html

I tried and failed to override this so that they would be transparent but still colored, but I think you'd have to modify the CSS to get that.

What do you mean by "hidden"?

[RezaAziztabar]

Hi Gordon Thank you for your answer.

Sorry I didn't express the problem completely. I have modified the CSS and the boxes are shown on the matrix. Actually I have add 'text' elements to each box (cell) to show a value inside each box. The data to fill the boxes is the same data to draw the Heatmap.

The problem (or difference with other charts) is when a box on one of the other charts are clicked that chart won't hide the rest of the cells' data. (see below row chart as an example)

Also when another chart (which is connected to the same Crossfilter) is clicked the transparent boxed on the first chart still are showing. It sounds like that data is filtered based on a combination of the different filters from the clicked charts.

I need the same functionality on Heatmap, but the data I am receiving from cross filter is filtered with the other charts parameter and I can not get the values for the transparent cells.

It is a bit complicated. I hope the description is clear :)

[gordonwoodhull]

I don't know why I'm having so much trouble understanding what you're saying, because I think you are writing clearly.

Let me try to restate the part I think I understand. When you select a cell in the heatmap, you do not want all the other cells in the same heatmap to turn grey, because that makes it impossible to tell what the values are.

The problem here is that a bar/row chart has two dimensions to encode value, color and size, a heatmap cell only has one dimension, color. So you could change the CSS so that the deselected cells don't turn grey, and the deselected cells are more transparent:

diff --git a/style/dc.scss b/style/dc.scss
index ca350641..395e7f85 100644
--- a/style/dc.scss
+++ b/style/dc.scss
@@ -227,8 +227,7 @@ div.dc-chart {
     .heatmap {
         .box-group.deselected rect {
             stroke: none;
-            fill-opacity: 0.5;
-            fill: $color_celeste;
+            fill-opacity: 0.25;
         }

However, you'd have to be really careful with the colors, because transparent looks a lot like white, so it's difficult to tell that two cells are selected in this example:

This color scale is absurd but a lot darker:

        var heatColorMapping = d3.scale.linear()
            .domain([-23, 0, 23])
            .range(["red", "green", "blue"]);

so you can tell what's going on:

I guess you could say that it works because color is 3D and it's easy to perceive two of those dimensions changing. (I wouldn't try three!)

Does that answer your first question? It does require changing dc.css; I don't think there is any way to do this just by adding a stylesheet.

I still don't understand your second question (if indeed I got the first one 😕).