StackOverflow Help Request: Heatmap with Lasso and Dendogram

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HeatMap</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    
    <script src="https://d3js.org/d3-polygon.v1.min.js"></script>
    
    <script type="text/javascript">
    data = [
      {"xName":"a", "yName":"a", "val": Math.random(), "meta":{"sex":"male", "age": Math.random() * 10}},
      {"xName":"a", "yName":"b", "val": Math.random(), "meta":{"sex":"female", "age": Math.random() * 10}},
      {"xName":"a", "yName":"c", "val": Math.random(), "meta":{"sex":"female", "age": Math.random() * 10}},
      {"xName":"a", "yName":"d", "val": Math.random(), "meta":{"sex":"male", "age": Math.random() * 10}},
      {"xName":"a", "yName":"e", "val": Math.random(), "meta":{"sex":"male", "age": Math.random() * 10}},
      {"xName":"a", "yName":"f", "val": Math.random(), "meta":{"sex":"female", "age": Math.random() * 10}},
      {"xName":"b", "yName":"a", "val": Math.random(), "meta":{"sex":"female", "age": Math.random() * 10}},
      {"xName":"b", "yName":"b", "val": Math.random(), "meta":{"sex":"male", "age": Math.random() * 10}},
      {"xName":"b", "yName":"c", "val": Math.random(), "meta":{"sex":"female", "age": Math.random() * 10}},
      {"xName":"b", "yName":"d", "val": Math.random(), "meta":{"sex":"female", "age": Math.random() * 10}},
      {"xName":"b", "yName":"e", "val": Math.random(), "meta":{"sex":"female", "age": Math.random() * 10}},
      {"xName":"b", "yName":"f", "val": Math.random(), "meta":{"sex":"male", "age": Math.random() * 10}},
      {"xName":"c", "yName":"a", "val": Math.random(), "meta":{"sex":"male", "age": Math.random() * 10}},
      {"xName":"c", "yName":"b", "val": Math.random(), "meta":{"sex":"female", "age": Math.random() * 10}},
      {"xName":"c", "yName":"c", "val": Math.random(), "meta":{"sex":"male", "age": Math.random() * 10}},
      {"xName":"c", "yName":"d", "val": Math.random(), "meta":{"sex":"female", "age": Math.random() * 10}},
      {"xName":"c", "yName":"e", "val": Math.random(), "meta":{"sex":"male", "age": Math.random() * 10}},
      {"xName":"c", "yName":"f", "val": Math.random(), "meta":{"sex":"female", "age": Math.random() * 10}}
    ]

yDend = [
      {"name": "b", "parent": ""},
      {"name": "a", "parent": "b"},
      {"name": "c", "parent": "b"}
    ]

xDend = [
      {"name": "a", "parent": ""},
      {"name": "c", "parent": "a"},
      {"name": "b", "parent": "a"},
      {"name": "e", "parent": "d"},
      {"name": "d", "parent": "c"},
      {"name": "f", "parent": "d"}
    ]

</script>

</head>

<body>

</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js

https://d3js.org/d3-polygon.v1.min.js