keeping the selection in sync between two heatmaps

enter image description here

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/

Solution

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.