keeping the selection in sync between two heatmaps - dc.js

Question

I am building multiple Heat-maps from a sample data set given below.
[
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
}];
When I select a cell from a heat-map, other than the selected cell all the other cells are defaulted to the #ccc color. In the corresponding filtered heat-maps, the color is defaulted to a primary blue color. I am attaching a image below for reference.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.5/dc.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.5/dc.js"></script>
var runDim;
var data = [
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 1,
"y2": 1,
"x2_TT": 20,
"y2_TT": 23
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.9163309159,
"y2": 0.9163309159,
"x2_TT": 18,
"y2_TT": 21
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.7849029059,
"y2": 0.7849029059,
"x2_TT": 16,
"y2_TT": 19
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.6695846541,
"y2": 0.6695846541,
"x2_TT": 14,
"y2_TT": 17
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.5604744826,
"y2": 0.5604744826,
"x2_TT": 12,
"y2_TT": 15
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.433624775,
"y2": 0.433624775,
"x2_TT": 9,
"y2_TT": 12
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.3117981232,
"y2": 0.3117981232,
"x2_TT": 7,
"y2_TT": 10
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.2070667799,
"y2": 0.2070667799,
"x2_TT": 5,
"y2_TT": 8
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0.0826720825,
"y2": 0.0826720825,
"x2_TT": 3,
"y2_TT": 6
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
},
{
"x2": 0,
"y2": 0,
"x2_TT": 2,
"y2_TT": 5
}];
var data1 = [];
var f=0; var c=1;
for( var i=0; i<=data.length-1; i++){
f++;
if(f>Math.sqrt(data.length)){ f=1; c++; }
data[i].column = f;
data[i].row = c;
}
data.filter( (x) => {
var obj = {}
obj.value = x.x2;
obj.tooltip = x.x2_TT;
obj.row = x.row;
obj.column = x.column;
data1.push(obj)
})
console.log( JSON.stringify(data1) )
console.log(data);
var ndx = crossfilter(data);
Object.keys(data[0]).filter(x => !x.includes('_TT') && !x.includes('column') && !x.includes('row') ).forEach(function(i, index){
//Dynamic DIV appended to body
var testid = "<div class='col-lg-6 dcjs' id='chart"+index+"' onclick='HeatMap(this)'></div>";
$('#test').append(testid);
//$("#chart"+index).append("<h4 align='center'>"+i+"</h4>")
var chart = dc.heatMap("#chart"+index);
var holder = Object.keys(data[0]).filter(x => !x.includes('_TT') && !x.includes('column') && !x.includes('row'))[index];
var width = document.getElementById('chart'+index).offsetWidth;
var height = document.getElementById('chart'+index).offsetHeight;
runDim = ndx.dimension(function(d) { return [ +d.row, +d.column, +d[holder+'_TT'] ]; }),
runGroup = runDim.group().reduceSum(function(d) { return +d[holder]; });
chart
.width(width)
.height(height)
.dimension(runDim)
.group(runGroup)
.keyAccessor(function(d) { return [ +d.key[0], ] ; })
.valueAccessor(function(d) { return +d.key[1]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
//return "Value: " + d.key[0] + ","+ d.key[1] + " : " + d.key[2];
return "Value : "+ d.key[2];
})
// .addFilterHandler(function (filters, filter) {
// filters.push(filter);
// console.log(filters)
// return filters;
// })
// .boxOnClick(function (d) {
// console.log(d.key)
// var filter = d.key;
// dc.events.trigger(function () {
// chart.filter(filter);
// chart.redrawGroup();
// });
// })
.on('pretransition', function(chart) {
chart.selectAll('g.axis text').attr("fill", "white").style("font-size", "0px")
})
.colors(['#000080', '#000092', '#0000a4', '#0000b7', '#0000c9', '#0000db', '#0000ee', '#0000ff', '#0002ff', '#0012ff', '#0022ff', '#0033ff', '#0043ff', '#0053ff', '#0063ff', '#0073ff', '#0084ff', '#0094ff', '#00a4ff', '#00b4ff', '#00c4ff', '#00d4ff', '#00e5f7', '#0cf5ea', '#19ffdd', '#27ffd0', '#34ffc3', '#41ffb6', '#4effa9', '#5bff9c', '#68ff8f', '#75ff82', '#82ff75', '#8fff68', '#9cff5b', '#a9ff4e', '#b6ff41', '#c3ff34', '#d0ff27', '#ddff19', '#eaff0c', '#f7f500', '#ffe600', '#ffd700', '#ffc800', '#ffb900', '#ffaa00', '#ff9b00', '#ff8c00', '#ff7d00', '#ff6e00', '#ff5f00', '#ff5000', '#ff4100', '#ff3200', '#ff2300', '#ff1400', '#ee0500', '#db0000', '#c90000', '#b70000', '#a40000', '#920000', '#800000'])
.xBorderRadius(0)
.yBorderRadius(0)
.calculateColorDomain();
if (index == Object.keys(data[0]).filter(x => !x.includes('_TT') && !x.includes('column') && !x.includes('row') ).length-1 ){ dc.renderAll();
}
});
function HeatMap(event){
console.log(runDim.top(Infinity));
// setTimeout( () => {
// $('.dcjs').each(function(index, obj) {
// if (obj != event){
// $(obj).find('.box-group').each(function(indexStep, objStep) {
// if ($(objStep).find('rect').attr('fill') == "rgb(0, 0, 128)" ){
// $(objStep).addClass("deselected");
// }
// })
// }
// });
// }, 500);
}
// d3.csv("morley.csv").then(function(experiments) {
// });
How do I override the crossfiltered applied dark blue color for other heatmaps to the same #CCC unselected color?
Here is a fiddle for the following problem: https://jsfiddle.net/Vivek_Raju/ndeuzxmt/

Answer 1

After discussion in the comments, we realized that the problem wasn't really about colors but about keeping the selection in sync between two heatmaps.
First off, if you've got two dc.js charts on the same data, you almost always want them on the same dimension. This is because you don't want them filtering each other, and a group does not observe its own dimension's filters.
So let's move the dimension out of the loop and use it for both charts:
const keys = Object.keys(data[0]).filter(x => !x.includes('_TT') && !x.includes('column') && !x.includes('row'));
const runDim = ndx.dimension(function(d) {
return [+d.row, +d.column]; //, +d[holder + '_TT']];
});
keys.forEach(function(i, index) {
(I also put keys in a variable because it was hurting my brain to see that huge expression everywhere. I also moved dc.redrawAll() out of the loop.)
The way to set filters in dc.js is pretty idiosyncratic. Here is a question specifically about the format needed to change a heatmap filter programmatically:
Heatmap DC.js - how to filter multiple items manually
Copying filters from one chart to the others can be done like this:
var guard = false;
function filter_listener(i) {
return function(chart) {
if(guard) return; // avoid infinite recursion
var filters = chart.filters().map(f => dc.filters.TwoDimensionalFilter([f[0],f[1]]));
console.log(i, filters);
guard = true;
charts.forEach((chart2, j) => {
if(j == i) return;
chart2._filter(null);
if(filters.length) chart2._filter([filters])
});
guard = false;
}
}
charts.forEach((chart, i) => chart.on('filtered.sync', filter_listener(i)))
Basically the filter listener will first make sure it is not the source of the current filters, to avoid infinite recursion.
Then it will copy the filters, and loop over all the charts.
If the current chart is not itself, it will reset the filter, and if the list of filters is not empty, it will then set the filters on the other chart.
Note the use of ._filter(), because as noted in the cited question, the heatmap has a weird override of .filter() which would stop us from setting multiple filters at once. Also note the array of arrays of filters. Wow.
Here is a working fiddle.

Answer 2

As explained in the comments above, you need to specify a color for the value zero that will match the deselected color.
You are already using the color mixin; it defines the .colors() method.
Currently you have
.colors(['#000080', '#000092', // ...
#000080 is your dark blue color, so change it to #ccc or whatever you want:
.colors(['#ccc', '#000092', // ...
Under the default style rules, a deselected item will also have opacity 0.5, so it won't look the same color. You can restore opacity 1 in your own CSS, and also change the deselected color if you want something besides the default #ccc:
.dc-chart .box-group.deselected rect.heat-box {
fill-opacity: 1;
/* fill: #ccc; */
}
Fork of your fiddle.