All examples By author By category About

Guerino1

Full window Github gist

D3 Tree embedded in HTML Page

<!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", rSize: 100, hlink: "https://nounz.if4it.com"},
        {id: "N1", name: "Ability to Market Our Products", type: "Capability", rSize: 1000, 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", rSize: 150, 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", rSize: 3000, hlink: "file:///Users/guerino/GUERINO%20WORK/Web/NOUNZ/INTRANET/HTML/Nouns/Applications/A_Application_1.NodeCluster.html"},
        {id: "N4", name: "United States", type: "Country", rSize: 30, hlink: "file:///Users/guerino/GUERINO%20WORK/Web/NOUNZ/INTRANET/HTML/Nouns/Countries/United_States.NodeCluster.html"},
        {id: "N5", name: "John Smith", type: "Person", rSize: 500, hlink: "https://nounz.if4it.com/Nouns/Resources/Smith_John.html"},
        {id: "N6", name: "Jane Doe", type: "Person", rSize: 2000, hlink: "https://nounz.if4it.com/Nouns/Resources/Doe_Jane.html"},
        {id: "N7", name: "Manufacturing", type: "Organization", rSize: 0, hlink: "https://nounz.if4it.com/Nouns/Organizations/Organization_E.NodeCluster.html"},
        {id: "N8", name: "Ability to Manufacture Product", type: "Capability", rSize: 200, hlink: "https://nounz.if4it.com/Nouns/Capabilities/Ability_to_Manufacture_Product.html"},
        {id: "N9", name: "Product 1", type: "Product", rSize: 300, hlink: "https://nounz.if4it.com/Nouns/Products/Product_1.html"},
        {id: "N10", name: "Product 2", type: "Product", rSize: 90, hlink: "https://nounz.if4it.com/Nouns/Products/Product_2.html"}
      ];

var linkSet = [
        {source: "N0", predicate: "Very very long Predicate name 1", target: "N1"},
        {source: "N1", predicate: "Predicate 2", target: "N2"},
        {source: "N2", predicate: "Very very long Predicate name 3", target: "N3"},
        {source: "N0", predicate: "Predicate 4", target: "N4"},
        {source: "N4", predicate: "Predicate 5", target: "N5"},
        {source: "N0", predicate: "Predicate 6", target: "N6"},
        {source: "N6", predicate: "Very very long Predicate name 7", target: "N7"},
        {source: "N6", predicate: "Predicate 8", target: "N8"},
        {source: "N7", predicate: "Predicate 9", target: "N9"},
        {source: "N7", predicate: "Predicate 10", target: "N10"}
      ];

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

// drawingName => A unique drawing identifier that has no spaces, no "." and no "#" characters.
        // nodeSet => Set of nodes and their relevant data.
        // selectString => String that allows you to pass in
        //           a D3 select string.
        // colors => String to set color scale.  Values can be...
        //           => "colorScale10"
        //           => "colorScale20"
        //           => "colorScale20b"
        //           => "colorScale20c"
        // margin => Integer margin offset value.
        // outerRadius => Integer outer radius value.
        // innerRadius => Integer inner radius value.
        // sortArcs => Controls sorting of Arcs by value.
        //              0 = No Sort.  Maintain original order.
        //              1 = Sort by arc value size.

// Color Scale Handling...
        var colorScale = d3.scale.category20c();
        switch (colors)
        {
          case "colorScale10":
            colorScale = d3.scale.category10();
            break;
          case "colorScale20":
            colorScale = d3.scale.category20();
            break;
          case "colorScale20b":
            colorScale = d3.scale.category20b();
            break;
          case "colorScale20c":
            colorScale = d3.scale.category20c();
            break;
          default:
            colorScale = d3.scale.category20c();
        };

var m = [20, 120, 20, 120],
            w = 1280 - m[1] - m[3],
            h = 800 - m[0] - m[2],
            i = 0,
            root;

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

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

var densityControlOffset = (-h/2+30);

var densityControlSet = [
          {controlName: "On"},
          {controlName: "Off"}
        ];
	var densityControlState = 0;

var max_scale_value = 0;
        var min_scale_value = 100000;

// Create a nodeByNameHash...
        var nodesByIdHash = [];
        // Create a hash that maps colors to types...
        var color_hash = [];

// Set up hashes
        nodeSet.forEach(function(d, i) {
          nodesByIdHash[d.id] = d;
          color_hash[d.type] = d.type;
          //document.writeln(color_hash[d.type]);
          if(d.rSize > max_scale_value)
          {
            max_scale_value = d.rSize;
          }
          if(d.rSize < min_scale_value)
          {
            min_scale_value = d.rSize;
          }
        });

// Create a nodeByNameHash...
        var linksByIdHash = [];
        linkSet.forEach(function(d, i) {
          linksByIdHash[d.source + ":" + d.target] = d;
        });

if(min_scale_value < 5) { min_scale_value = 5; } // Non-Zero lower end of scale   
        var rRange = d3.scale.linear().domain([min_scale_value,max_scale_value]).range([5,100]);

// Create a set of sorted keys...
        var sortedKeys = keys(color_hash).sort();
        sortedKeys.forEach(function(d, i) {
          color_hash[d] = colorScale(i);
          //document.writeln(color_hash[d]);
        });

// Add colors to original node records...
        nodeSet.forEach(function(d,i) {
          d.color = color_hash[d.type];
          //document.writeln(d.type);
        });

var densityMouseOver = function() {

var thisObject = d3.select(this);
          var typeValue = thisObject.attr("density_type");

var densityBulletSelector = "." + "densityControlBullet-" + typeValue;
          var selectedBullet = d3.selectAll(densityBulletSelector);
          //document.writeln(legendBulletSelector);
          selectedBullet.attr("r", 1.2*6);

var densityTextSelector = "." + "densityControlText-" + typeValue;
          var selectedDensityText = d3.selectAll(densityTextSelector);
          //document.writeln(legendBulletSelector);
          selectedDensityText.style("font", "bold 14px Arial")
        }

var densityMouseOut = function() {

var thisObject = d3.select(this);
          var typeValue = thisObject.attr("density_type");

var densityControlClick = function() {

var densityBulletSelector = "." + "densityControlBullet-" + typeValue;
          var selectedBullet = d3.selectAll(densityBulletSelector);
          selectedBullet.style("fill", "Black")

var oppositeDensityBulletSelector = "." + "densityControlBullet-" + oppositeTypeValue;
          var selectedOppositeBullet = d3.selectAll(oppositeDensityBulletSelector);
          selectedOppositeBullet.style("fill", "White")

if(typeValue=="On") {
            var selectedNodeCircles = d3.selectAll("#NODE");
            selectedNodeCircles.transition().duration(500).attr("r", function(d){ return rRange(d.rSize); });
          }
          else {
            var selectedNodeCircles = d3.selectAll("#NODE");
            selectedNodeCircles.transition().duration(500).attr("r", defaultNodeSize);
          }

}

// Create a tree layout...
        var tree = d3.layout.tree()
            .size([h, w]);

var diagonal = d3.svg.diagonal()
            .projection(function(d) { return [d.y + horizontalTreeOffset, d.x]; });

var vis = d3.select(selectString).append("svg:svg")
            .attr("width", w + m[1] + m[3])
            .attr("height", h + m[0] + m[2])
            .attr("class", "treeCanvas");

// Print Density Control Title...
        vis.append("svg:text")
            .attr("class","region")
            .text("Relationship Density Control:")
            .attr("x", densityControlTitleHorizontalOffset)
            .attr("y", densityControlTitleVerticalOffset)
            .style("fill", "Black")
            .style("font", "bold 16px Arial")
            .attr("text-anchor","start");

// Plot the Density Control Circles for Bullets...
        var densityBulletCircles = vis.selectAll("treeCanvas")
            .data(densityControlSet)
          .enter().append("svg:circle")
            .attr("cx", function(d) { if(d.controlName=="On") {return (densityControlTitleHorizontalOffset + 20);} else {return (densityControlTitleHorizontalOffset + 70);} })
            .attr("cy", (densityControlTitleVerticalOffset + 20))
            .attr("stroke-w", ".6")
            .attr("rSize", function(d, i) { return d.rSize; })
            .style("stroke", "Black" )
            .style("fill", function(d) { if(d.controlName=="On") {return "White";} else {return "Black";} })
            .attr("r", 6)
            .attr("density_type", function(d) { return d.controlName; })
            .attr("class", function(d) { return "densityControlBullet-" + d.controlName; })
            .on("mouseover", densityMouseOver)
            .on("mouseout", densityMouseOut)
            .on("click", densityControlClick);

// Create Density Control Text...
        var densityBulletText = vis.selectAll("treeCanvas")
            .data(densityControlSet)
          .enter().append("svg:text") // Append legend elements
            .attr("text-anchor", "center")
            .attr("x", function(d) { if(d.controlName=="On") {return (densityControlTitleHorizontalOffset + 30);} else {return (densityControlTitleHorizontalOffset + 80);} })
            .attr("y", (densityControlTitleVerticalOffset + 20))
            .attr("dx", 0)
            .attr("dy", "5px") // Controls padding to place text in alignment with bullets
            .text(function(d) { return d.controlName;})
            .attr("density_type", function(d) { return d.controlName; })
            .attr("class", function(d) {
            return "densityControlText-" + d.controlName; })
            .style("fill", "Black")
            .style("font", "normal 14px Arial")
            .on("mouseover", densityMouseOver)
            .on("mouseout", densityMouseOut);

// Print Node Type Legend Title...
        vis.append("svg:text")
            .attr("class","region")
            .text("Node Type Key:")
            .attr("x", legendTitleHorizontalOffset)
            .attr("y", legendTitleVerticalOffset)
            .style("fill", "Black")
            .style("font", "bold 16px Arial")
            .attr("text-anchor","start");

// Plot the Node Type Ledgend bullet circles...
        var densityBulletCircles = vis.selectAll("treeCanvas")
            .data(sortedKeys).enter().append("svg:circle") // Append circle elements
            .attr("cx", legendTitleHorizontalOffset + 20)
            .attr("cy", function(d, i) { return (legendTitleVerticalOffset + 20 + i*20); } )
            .attr("stroke-width", ".5")
            .style("fill", function(d, i) { return color_hash[d]; })
            .attr("r", 6)
            .attr("color_value", function(d, i) { return color_hash[d]; })
            .attr("type_value", function(d, i) { return d; })
            .attr("index_value", function(d, i) { return "index-" + i; })
            .attr("class", function(d) {
              var str = d;
              var strippedString = str.replace(/ /g, "_")
              return "legendBullet-" + strippedString; });
            //.on('mouseover', typeMouseOver)
            //.on("mouseout", typeMouseOut);

// Create legend text that acts as label keys...
        var densityBulletText = vis.selectAll("treeCanvas")
             .data(sortedKeys) // Instruct to bind dataSet to text elements
          .enter().append("svg:a") // Append legend elements
             .append("text")
             .attr("text-anchor", "center")
             .attr("x", legendTitleHorizontalOffset + 30)
             .attr("y", function(d, i) { return (legendTitleVerticalOffset + 20 + i*20); } )
             .attr("dx", 0)
             .attr("dy", "5px") // Controls padding to place text in alignment with bullets
             .text(function(d) { return d;})
             .attr("color_value", function(d, i) { return color_hash[d]; })
             .attr("type_value", function(d, i) { return d; })
             .attr("index_value", function(d, i) { return "index-" + i; })
             .attr("class", function(d) {
             var str = d;
             var strippedString = str.replace(/ /g, "_")
             return "legendText-" + strippedString; })
             .style("fill", "Black")
             .style("font", "normal 14px Arial");
             //.on('mouseover', typeMouseOver)
             //.on("mouseout", typeMouseOut);

// Unknown...
        vis.append("svg:g")
            .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

// 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 = link.source = nodeById(link.source),
          child = link.target = nodeById(link.target);
          if (parent.children) parent.children.push(child);
          else parent.children = [child];
        });

function nodeById(id) {
          return nodeSet[id] || (nodeSet[id] = {id: id});
        }

// Extract the root node and compute the layout.
        // NOTE: Assumes the root Node is the first Source in the
        // first link, which assumes a reliance on the fact that
        // the array of links were pre-generated that way.
        //var nodes = tree.nodes(links[0].source);
        var root = linkSet[0].source;

// Set coordinates that control entry point of the Tree
        // Tree will "float" to the settling point if coordinates are
        // set too far away from where you want the root node to settle.
        root.x0 = h /2;
        root.y0 = 0;

// Call the update function
        //update(root, linkSet, nodeSet);
        update(root);

function update(source) {
          var duration = d3.event && d3.event.altKey ? 5000 : 500;

// Compute the new tree layout.
          var nodes = tree.nodes(root);

// Merge original nodeSet data with Tree-generated nodes and
          // normalize all Tree-generated nodes for fixed-depth.
          if(!nodes[0].name){
            nodes.forEach(function(d, i){
              d.y = d.depth * 180;
              // Beyond this point only has to be done once,
              // for the initial merge.
              d.name = nodesByIdHash[d.id].name //d.name = nodeSet[i].name
              d.type = nodesByIdHash[d.id].type //d.type = nodeSet[i].type
              d.hlink = nodesByIdHash[d.id].hlink //d.hlink = nodeSet[i].hlink
              d.rSize = nodesByIdHash[d.id].rSize //d.rSize = nodeSet[i].rSize
            })
          }
          else{
            nodes.forEach(function(d, i){
              d.y = d.depth * 180;
            })
          };

// Update the nodesâ€¦
          var node = vis.selectAll("g.node")
              .data(nodes, function(d) { return d.id || (d.id = ++i); });

// Enter new nodes at the previous position of the parent.
          var nodeEnter = node.enter().append("svg:g")
              .attr("class", "node")
              .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
              .on("click", function(d) { toggle(d); update(d); });

// Controls circle entry and reentry traits
          nodeEnter.append("svg:circle")
              .attr("cx", horizontalTreeOffset)
              .attr("r", 1e-6)
              .style("stroke", "black")
              .style("fill", function(d) { 
                if(d._children)
                  { return color_hash[d.type]; }
                else
                  { return "white"; }
                }
              );

// Use foreignObject to append HTML text in order to implement word wrapping
          nodeEnter.append("svg:foreignObject")
              .attr("width", "200")
              .attr("height", "60")
              .attr("x", function(d) { return d.children || d._children ? horizontalNodeOffset - 50 : horizontalNodeOffsetLeaf; })
              .attr("y", function(d) { return d.children || d._children ? -40 : -10; })
              .style("font", "normal 14px Arial")
            .append("xhtml:body")
              .attr("xmlns", "https://www.w3.org/1999/xhtml")
              .html(function(d){ return "<a href=" + d.hlink + ">" + d.name + "</a>"; });

// Transition nodes to their new position.
          var nodeUpdate = node.transition()
              .duration(duration)
              .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

nodeUpdate.select("circle")
              .attr("r", function(d) { if(densityControlState) { return 20; } else { return defaultNodeSize; }})
              .attr("rSize", function(d) { return d.rSize; })
              .attr("id", "NODE" )
              .style("stroke", function(d) { return color_hash[d.type]; })
              .style("stroke-width", 3)
              .style("fill", function(d) { 
                if(d._children)
                  { return color_hash[d.type]; }
                else
                  { return "white"; }
                }
              )
              .attr("type_value", function(d, i) { return d.type; })
              .attr("color_value", function(d, i) { return color_hash[d.type]; });

nodeUpdate.select("text")
              .style("fill-opacity", 1);

// Transition exiting nodes to the new position of the parent
          var nodeExit = node.exit().transition()
              .duration(duration)
              .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
              .remove();

nodeExit.select("circle")
              .attr("r", 1e-6);

nodeExit.select("text")
              .style("fill-opacity", 1e-6);

var linkPaths = vis.selectAll("path.link")
              .data(tree.links(nodes), function(d) { return d.target.id; });

// Enter any new links at the previous position of the parent
          var linkEnter = linkPaths.enter().insert("svg:path", "g")
              .style("fill", "none")
              .style("stroke", "#000")
              .attr("class", "link")
              .attr("d", function(d) {
                var o = {x: source.x0, y: source.y0};
                return diagonal({source: o, target: o});
              })
              .transition()
                .duration(duration)
                .attr("d", diagonal);

// Transition links to their new position.
          linkPaths.transition()
              .duration(duration)
              .attr("d", diagonal);

// Transition exiting nodes to the new position of the parent.
          linkPaths.exit().transition()
              .duration(duration)
              .attr("d", function(d) {
                var o = {x: source.x, y: source.y};
                return diagonal({source: o, target: o});
              })
              .remove();

var linkTextItems = vis.selectAll("g.linkText")
    .data(tree.links(nodes), function(d) { return d.target.id; })

var linkTextEnter = linkTextItems.enter().append("svg:g")
    .attr("class", "linkText")
    .attr("transform", function(d) { return "translate(" + (d.target.y + 20) + "," + (getCenterX(d)) + ")"; });

// Add Predicate text to each link path
linkTextEnter.append("svg:foreignObject")
    .attr("width", "120")
    .attr("height", "40")
  .append("xhtml:body")
    .attr("xmlns", "https://www.w3.org/1999/xhtml")
    .html(function(d){ return "<p>" + (linksByIdHash[d.source.id + ":" + d.target.id].predicate) + "</p>"; });

// Transition nodes to their new position.
//var linkTextUpdate = linkTextItems.transition()
    //.duration(duration)
    ////.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    //.attr("transform", function(d) { return "translate(" + d.source.x + "," + d.source.y + ")"; })

//linkTextUpdate.select("linkText")
    //.style("fill-opacity", 1);

// Transition exiting linkText to the new position of the parents.
var linkTextExit = linkTextItems.exit().transition()
    .duration(duration)
    .attr("transform", function(d) { return "translate(" + d.source.y + 20 + "," + (getCenterX(d)) + ")"; })
  .remove();

linkTextExit.select("linkText")
    .style("fill-opacity", 1e-6);

// Store the old positions for transition.
          nodes.forEach(function(d) {
              d.x0 = d.x;
              d.y0 = d.y;
              });
        }

// Toggle children.
        function toggle(d) {
          if (d.children) {
            d._children = d.children;
            d.children = null;
          } else {
            d.children = d._children;
            d._children = null;
          }
        }

};

</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 Tree Embedded in an HTML Page</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