D3 Examples - complicate table + heatmap

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="myCSS.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.41/polyfill.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script type="text/javascript" src="myJS.js"></script>
  <script type="text/javascript" src="chart-export.js"></script>
</head>
​
<body>
  
<div class="container" style="position: relative; width: 910px; min-height: 500px;">
    <ul class="menu-4-download">
        <span title="download">☰</span>
        <li class="img-4-download" data-img="svg">Download SVG</li>
        <li class="img-4-download" data-img="png">Download PNG</li>
    </ul>
    <ul id="ge-hot-table" class="ge-hot-table"></ul>
</div>
​
<div id="tooltip" class="tooltip"></div>
​
​
<script type="text/javascript">
$(function () {
​
    $("#ge-hot-table").html("<div class='show-loading'><i class='icon-spinner icon-spin icon-4x'></i><div>");
​
    $.getJSON("CHOL_heat_map_data.json", function (json, status, xhr) {
        if (status === "success") {
            d3.svg.hotTable("ge-hot-table", json);
        } else {
            console.log("fail status: " + status);
        }
    });
​
    // click on plot links
    $(".ge-hot-table").on("click", "a.ge-plot", function (event) {
        event.preventDefault();
​
        var backgound = $("<div class='background-cover'></div>")
        $("body").css("position", "relative").append(backgound);
        backgound.load("template.html", function (text, status, xhr) {
            var dialog = backgound.find(".ge-load-chart");
            dialog.find("[title='remove']").on("click", function () {
                backgound.remove();
            });
​
            // select a option
            dialog.find("select[name='type-of-group']").on("change", function (event) {
                    var value = this.value,
                        current, node;
                    dialog.find(".load-option > li").removeClass("current");
                    current = dialog.find(".load-option > li:eq(" + value + ")").addClass("current");
                    node = current.find(".gen-chart")[0];
​
                    if ($(node).find("svg").length > 0) {
                        return;
                    } else {
                        // load waiting
                        $(node).html("<div class='show-loading'><i class='icon-spinner icon-spin icon-4x'></i><div>");
​
                        // plotting
                        $.getJSON(value + ".json", function (json, status, xhr) {
                            if (status === "success") {
                                $(node).find(".show-loading").remove();
                                d3.svg.jitterPlot(node, json);
                            } else {
                                console.log("fail status: " + status);
                            }
                        });
​
                    }
                })
                .val("0")
                .trigger('change');
​
        });
    });
});
  
d3.select(self.frameElement).style({width: 950 + "px",height: 750 + "px"});
​
</script>
</body>
​
    