D3 Nested Block Browser embedded in HTML File

<!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 Sample Charts Web Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta name="Description" content="This page tries to mix charts with html formatting and layout constructs." />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="-l" />

// Data Used for this example...

var nodeSet = [
        {id: "N0", name: "Your Enterprise", type: "Organization", hlink: "https://nounz.if4it.com"},
        {id: "N1", name: "Ability to Market Our Products", type: "Capability", hlink: "https://nounz.if4it.com/Nouns/Capabilities/Ability_to_Market_Our_Products.NodeCluster.html"},
        {id: "N2", name: "Ability to Market Our Products to Private Sector", type: "Capability", hlink: "https://nounz.if4it.com/Nouns/Capabilities/Ability_to_Market_Our_Products_to_Private_Sector.NodeCluster.html"},
        {id: "N3", name: "Sales System XYZ", type: "Application", hlink: "file:///Users/guerino/GUERINO%20WORK/Web/NOUNZ/INTRANET/HTML/Nouns/Applications/A_Application_1.NodeCluster.html"},
        {id: "N4", name: "United States", type: "Country", hlink: "file:///Users/guerino/GUERINO%20WORK/Web/NOUNZ/INTRANET/HTML/Nouns/Countries/United_States.NodeCluster.html"},
        {id: "N5", name: "John Smith", type: "Person", hlink: "https://nounz.if4it.com/Nouns/Resources/Smith_John.html"},
        {id: "N6", name: "Jane Doe", type: "Person", hlink: "https://nounz.if4it.com/Nouns/Resources/Doe_Jane.html"},
        {id: "N7", name: "Manufacturing", type: "Organization", hlink: "https://nounz.if4it.com/Nouns/Organizations/Organization_E.NodeCluster.html"},
        {id: "N8", name: "Ability to Manufacture Product", type: "Capability", hlink: "https://nounz.if4it.com/Nouns/Capabilities/Ability_to_Manufacture_Product.html"},
        {id: "N9", name: "Product 1", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_1.html"},
        {id: "N10", name: "Product 2", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_2.html"},
        {id: "N11", name: "Product 3", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_2.html"},
        {id: "N12", name: "Product 4", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_2.html"},
        {id: "N13", name: "Product 5", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_2.html"},
        {id: "N14", name: "Product 6", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_2.html"},
        {id: "N15", name: "Product 7", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_2.html"},
        {id: "N16", name: "Product 8", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_2.html"},
        {id: "N17", name: "Product 9", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_2.html"},
        {id: "N18", name: "Product 10", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_2.html"}
      ];

var linkSet = [
        {source: "N0", target: "N1"},
        {source: "N1", target: "N2"},
        {source: "N1", target: "N3"},
        {source: "N1", target: "N3"},
        {source: "N2", target: "N11"},
        {source: "N2", target: "N12"},
        {source: "N0", target: "N4"},
        {source: "N4", target: "N5"},
        {source: "N0", target: "N6"},
        {source: "N6", target: "N7"},
        {source: "N6", target: "N8"},
        {source: "N7", target: "N9"},
        {source: "N7", target: "N10"},
        {source: "N10", target: "N13"},
        {source: "N10", target: "N14"},
        {source: "N13", target: "N15"},
        {source: "N13", target: "N16"},
        {source: "N5", target: "N17"},
        {source: "N5", target: "N18"}
      ];

function drawHorizontalPartition( drawingName, nodeSet, linkSet, selectString, colors, margin)
      {

// Code Start

var m = [20, 120, 20, 120],
	  w = 1120,
          h = 600,
          x = d3.scale.linear().range([0, w]),
	  y = d3.scale.linear().range([0, h]);

var horizontalTreeOffset = 150;
        var horizontalNodeOffset = horizontalTreeOffset - 10;
        var horizontalNodeOffsetLeaf = horizontalTreeOffset + 10;

var legendTitleHorizontalOffset = m[0]/4;
        var legendTitleVerticalOffset = m[1]/4 + 55;

// Create a nodeByNameHash...
        var nodesByIdHash = [];

// Set up hashes
        nodeSet.forEach(function(d, i) {
          nodesByIdHash[d.id] = d;
        });

// Have not figured out what the purpose of the value attribute is.
        // Need to set the value retrieval function so that a value can be
        // appended to each node.  It's arbitrarily set to the number 1, which
        // seems to make all children proportional in size.
        var partition = d3.layout.partition()
            .value(function(d) { return 1; });

var vis = d3.select(selectString).append("svg:svg")
            .attr("width", w)
            .attr("height", h);

// Cycle through each set of Relationships (i.e. "links") and
        // register children with their parents.
        // If a child doesn not exist in the original nodeSet, make sure
        // that it gets added, even if as a placeholder.        
        linkSet.forEach(function(link) {
          var parent = nodesByIdHash[link.source];
          var child = nodesByIdHash[link.target];
          //var parent = link.source = nodeById(link.source),
          //child = link.target = nodeById(link.target);
          if (parent.children) parent.children.push(child);
          else parent.children = [child];
        });
        linkSet.forEach(function(link) {
          var parent = nodesByIdHash[link.source];
          var child = nodesByIdHash[link.target];
          if (parent.id != nodeSet[0].id) child.parent = parent;
        });

// Need to use the root from the nodesByIdHash, which have been manipulated...
        var root = nodesByIdHash[nodeSet[0].id];

var partitionedNodes = partition.nodes(root)

var g = vis.selectAll("g")
            //.data(partition.nodes(root))
            .data(partitionedNodes)
          .enter().append("svg:g")
            .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; })
            .on("click", click);

var kx = w / root.dx,
          ky = h / 1;

g.append("svg:rect")
          .attr("width", root.dy * kx)
          .attr("height", function(d) { return d.dx * ky; })
	  //.style("fill", function(d) { if(d.children) { return "LightSteelBlue"; } else { return "LightGrey"; } })
	  .style("fill", function(d) {
	    if(d.children) {
	      if(d.depth == 0) {return "#A9BCF5"; }
	      else { return "LightSteelBlue"; } }
	    else { return "LightGrey"; }
	    }
	  )

.style("stroke", "White")
          .attr("class", function(d) { return d.children ? "parent" : "child"; });

//g.append("svg:text")
            //.attr("transform", transform)
            //.attr("dy", ".35em")
            //.style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; })
            //.text(function(d) { return d.name; })

g.append("svg:text")
            .attr("transform", transform)
            .attr("dy", ".35em")
            .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; })
	.append("svg:a")
	    .attr("class", "textLink")
	    .attr("xlink:href", function(d) {return d.hlink; })
            .text(function(d) { return d.name; })
	    .attr("fill", "Blue")

d3.select(window)
            .on("click", function() { click(root); })

function click(d) {
          if (!d.children) return;

kx = (d.y ? w - 40 : w) / (1 - d.y);
          ky = h / d.dx;
          x.domain([d.y, 1]).range([d.y ? 40 : 0, w]);
          y.domain([d.x, d.x + d.dx]);

var t = g.transition()
              .duration(d3.event.altKey ? 7500 : 750)
              .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; });

t.select("rect")
              .attr("width", d.dy * kx)
              .attr("height", function(d) { return d.dx * ky; });

t.select("text")
              .attr("transform", transform)
              .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; });

d3.event.stopPropagation();
        }

function transform(d) {
          return "translate(8," + d.dx * ky / 2 + ")";
        }
//Code End

};

</script>

/* unvisited link */
      a:link {
        color: "blue";
        text-decoration: none;
      }

/* visited link */
      a:visited {
        color: "darkblue";
        text-decoration: none;
      }

/* mouse over link */
      a:hover {
        color: "maroon";
        text-decoration: none;
      }

/* selected link */
      a:active {
        color: "maroon";
        text-decoration: none;
      }

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 {
        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 Partition-based Nested Block Browser Embedded in an HTML Page With Linked Text</h1>
            </div>
            <div class="div_RootBody" id="tree">
              <div class="chart"></div>
            </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?2.4.5 to a secure url

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