D3 Generated Sortable HTML Table

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html  xmlns="https://www.w3.org/1999/xhtml"
       xml:lang="en-US"
       lang="en-US">
  <head profile="https://www.w3.org/2005/10/profile">
    <title>IF4IT Density Chart</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta name="Description" content="This page provides a table-oriented view of density." />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="-l" />

// This example draws a Radial Hub and Spoke Graph on a page with
      // multiple HTML layout constructs.
      // Created by Frank Guerino : "https://www.guerino.net"

// Data Used for this example...

var headerInfo = [
      ];

var densitySet = [
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html\">Node1</a>", Total: 1000 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/B__Application_2.NodeCluster.html\">Node2</a>", Total: 1500 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/C__Application_3.NodeCluster.html\">Node3</a>", Total: 700 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/D__Application_4.NodeCluster.html\">Node4</a>", Total: 300 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/E__Application_5.NodeCluster.html\">Node5</a>", Total: 1000 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/F__Application_6.NodeCluster.html\">Node6</a>", Total: 900 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/G__Application_7.NodeCluster.html\">Node7</a>", Total: 1090 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/H__Application_8.NodeCluster.html\">Node8</a>", Total: 35 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/I__Application_9.NodeCluster.html\">Node9</a>", Total: 1000 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html\">Node10</a>", Total: 99 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/B__Application_2.NodeCluster.html\">Node11</a>", Total: 950 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/C__Application_3.NodeCluster.html\">Node12</a>", Total: 1850 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/D__Application_4.NodeCluster.html\">Node13</a>", Total: 0 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/E__Application_5.NodeCluster.html\">Node14</a>", Total: 2000 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/F__Application_6.NodeCluster.html\">Node15</a>", Total: 100 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/G__Application_7.NodeCluster.html\">Node16</a>", Total: 10 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/H__Application_8.NodeCluster.html\">Node17</a>", Total: 600 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/I__Application_9.NodeCluster.html\">Node18</a>", Total: 200 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html\">Node19</a>", Total: 9 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/B__Application_2.NodeCluster.html\">Node20</a>", Total: 1100 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/C__Application_3.NodeCluster.html\">Node21</a>", Total: 1 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/D__Application_4.NodeCluster.html\">Node22</a>", Total: 0 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/E__Application_5.NodeCluster.html\">Node23</a>", Total: 13 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/F__Application_6.NodeCluster.html\">Node24</a>", Total: 452 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/G__Application_7.NodeCluster.html\">Node25</a>", Total: 1600 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/H__Application_8.NodeCluster.html\">Node26</a>", Total: 1100 },
        { Name: "<a href=\"https://nounz.if4it.com/Nouns/Applications/I__Application_9.NodeCluster.html\">Node27</a>", Total: 1500 }
      ];

function drawDensityTable( drawingName, densitySet, selectString, backgroundColor, textColor ) {

var maxRelationshipValue = 0;
      densitySet.forEach(function(d) {
        d.Percentage = d.Total;
        if (d.Total > maxRelationshipValue) { maxRelationshipValue = d.Total; }; 
      });

var recordSortFunction = function() {

};

var headerMouseOver = function () {

var thisObject = d3.select(this);
        thisObject.style("background", textColor);
        thisObject.style("color", backgroundColor);

};

var headerMouseOut = function () {

var thisObject = d3.select(this);
        thisObject.style("background", backgroundColor);
        thisObject.style("color", textColor);

};

var bodyRecordMouseOver = function () {

var thisObject = d3.select(this);
        thisObject.style("background", "Orange");

};

var bodyRecordMouseOut = function () {

var thisObject = d3.select(this);
        thisObject.style("background", "transparent");

};

var densityKeys = d3.keys(densitySet[0]).filter(function(key) {
            return key;
	  }
        );

var dummyArray = [{dummy: 1}];

var svgCanvas = d3.select(selectString).selectAll("table")
          .data(dummyArray)
          .enter()
          .append("table")
            .attr("id", "density_table");

var densityTable = d3.selectAll("#density_table").selectAll("table.thead")
          .data(dummyArray)
          .enter()
          .append("thead")
            .attr("id", "density_header");

var densityHead = d3.selectAll("#density_header").selectAll("thead.tr")
          .data(dummyArray)
          .enter()
          .append("tr")
            .attr("id", "density_header_record");

var densityHeaderRecord = d3.selectAll("#density_header_record").selectAll("tr.td")
          .data(densityKeys)
          .enter()
          .append("td")
            .attr("id", "density_headerer_data")
	    .attr("keyName", function(d) { return d; })
            .text(function(d) { return d; }) // Append Keys
            .style("background", backgroundColor)
            .style("color", textColor)
            .style("border", "0px solid White")
            .style("font", "bold 12px Arial")
            .style("padding", "4px")
            .style("text-align", "center")
            .on('mouseover', headerMouseOver)
            .on("mouseout", headerMouseOut)
	    .on("click", recordSortFunction);

var densityTable = d3.selectAll("#density_table").selectAll("table.tbody")
          .data(dummyArray)
          .enter()
          .append("tbody")
            .attr("id", "density_body");

var densityBody = d3.selectAll("#density_body").selectAll("tbody.tr")
          .data(densitySet)
          .enter()
          .append("tr")
            .attr("id", "density_body_record")
	    .attr("index", function(d, i) { return i; })
            .on("mouseover", bodyRecordMouseOver)
	    .on("mouseout", bodyRecordMouseOut);

};

</script>

<STYLE type="text/css">
      div.div_Header {
        width: 100%;
        border:2px solid White;
        border-radius:7px;
        background: WhiteSmoke;
        font: bold 14px Arial;
        font-family:Arial, Helvetica, sans-serif;
        color:WhiteSmoke;
        text-align:center;
      }
      h1.h1_BodyHeader {
        text-align:center;
        font: bold 1.5em Arial;
      }
      h2.h2_LeftMenuHeader {
        text-align:center;
        font: bold 1.2em Arial;
      }
      h3.h3_Body {
        text-align:center;
      }
      p.p_Red {
        color:Red;
      }
      table.table_Header {
        width: 100%;
        text-align:center;
      }
      td.td_HeaderLeft {
        text-align:left;
      }
      td.td_HeaderRight {
        text-align:right;
      }
      div.div_Menu {
        width: 100%;
        border:2px solid White;
        border-radius:7px;
        background: MidnightBlue;
        font: bold 14px Arial;
        font-family:Arial, Helvetica, sans-serif;
        color:White;
        text-align:center;
      }
      p.p_Left {
        font-family:Arial, Helvetica, sans-serif;
        color:Black;
        text-align:left;
        padding-left: 5px;
        font: normal 14px Arial;
      }
      table.table_Body {
        width: 100%;
        height: 100%;
        padding: 0;
      }
      td.td_BodyLeft {
	vertical-align: top;
        width: 250px;
        height: 100%;
        padding: 0;
      }
      td.td_BodyRight {
	vertical-align: top;
      }
      li.li_LeftMenu {
        text-align:left;
        font: normal 14px Arial;
      }
      a.a_LeftMenuNoUnderLine {
        text-decoration:  none;
      }
      div.div_Body {
        height: 100%;
        width: 100%;
        position: relative;
        border:2px solid White;
        border-radius:7px;
        background: WhiteSmoke;
        font: bold 14px Arial;
        font-family:Arial, Helvetica, sans-serif;
        color:Black;
        text-align:center;
      }
      div.div_Footer {
        width: 100%;
        border:2px solid White;
        border-radius:7px;
        background: MidnightBlue;
        font: bold 14px Arial;
        font-family:Arial, Helvetica, sans-serif;
        color:White;
        text-align:center;
      }
      p.p_if4itMessage {
        width: 100%;
        background: White;
        font: bold .75em Arial;
        font-family:Arial, Helvetica, sans-serif;
        color:GoldenRod;
        text-align:center;
      }
      .menuButton{
        background-color: MidnightBlue;
      }
      .menuButton li{
        height: 100%;
        list-style: none;
        display: inline;
      }
      .menuButton li a{
        height: 100%;
        padding: 3px 0.5em;
        text-decoration: none;
        color: White;
        background-color: MidnightBlue;
        border: 2px solid MidnightBlue;
      }
      .menuButton li a:hover{
        height: 100%;
        color: MidnightBlue;
        background-color: White;
        border-style: outset;
        background-color: White;
      }
      .menuButton li a:active{
        height: 100%;
        border-style: inset;
        color: MidnightBlue;
        background-color: White;
      }
      .menuButton li a.disabled{
        height: 100%;
        padding: 3px 0.5em;
        text-decoration: none;
        color: MidnightBlue;
        background-color: White;
        border: 2px solid MidnightBlue;
        border-style: inset;
        border-color: White;
      }
    </STYLE>

<STYLE type="text/css">
      div.div_RootBody {
        position: relative;
        border:2px solid White;
        border-radius:7px;
        background: WhiteSmoke;
        font: normal 14px Arial;
        font-family:Arial, Helvetica, sans-serif;
        color:Black;
        padding: 0px 1em;
        text-align:left;
      }
    </STYLE>
    
  </head>

<body>

<div>
        <h1 style="text-align:center; font: bold 1.7em Arial;"><a href="https://www.if4it.com">The International Foundation for Information Technology (IF4IT)</a></h1>
        </div>

<div class="div_Menu">
        <ul class="menuButton">
          <li><a href="https://www.if4it.com">HOME</a></li>
          <li><a href="https://www.if4it.com/resources.html">RESOURCES</a></li>
          <li><a href="https://www.if4it.com">PRODUCTS</a></li>
          <li><a href="https://www.if4it.com">SERVICES</a></li>
          <li><a href="https://www.if4it.com">SUPPORT</a></li>
          <li><a href="https://www.if4it.com">HELP</a></li>
        </ul>
      </div>
      <table class="table_Body">
        <tr>
          <td class="td_BodyLeft">
            <div class="div_Body">
              <h2 class="h2_LeftMenuHeader">Sample Left Menu Links</h2>
              <ul>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com">IF4IT Home</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/taxonomy.html">IF4IT Taxonomies</a></li>
              </ul>
              <p class="p_Left">This is dummy paragraph 1 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 2 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 3 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 4 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 5 text that would go in this section of the page.</p>
              <ul>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com">IF4IT Home</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/taxonomy.html">IF4IT Taxonomies</a></li>
              </ul>
              <p class="p_Left">This is dummy paragraph 1 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 2 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 3 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 4 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 5 text that would go in this section of the page.</p>
            </div>
          </td>
          <td class="td_BodyRight">
            <div class="div_RootBody">
              <h1 style="text-align:center; font: bold 1.5em Arial;">D3 Based Density Chart in an HTML Page</h1>
            </div>
            <div class="div_RootBody" id="density_chart">
            </div>
          </td>
        </tr>
      </table>

<div class="div_Footer"><p><p>This is the IF4IT Footer Message for this web page.</p></p></div>

<div><p class="p_if4itMessage">This Site Has Been Created and Published by The International Foundation for Information Technology (IF4IT).</p></div>

</body>

</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js