D3 Examples - StackOverflow Help Request: Heatmap with Lasso and Dendogram

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HeatMap</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <!-- for the interpolated colors -->
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <!-- for the polygon hull -->
    <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>
​
​
    <svg id="heatmapSVG" style="border: 1px solid black;"></svg>
​
    <svg id="barchartSVG" style="border: 1px solid black;"></svg>
​
  </body>
​
  <script type="text/javascript" src="./heatmap.js"></script>
</html>
​
    