All examples By author By category About

Guerino1

Full window Github gist

D3 Interactive Force Directed Radial Graph

<!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>My Force Directed Graph</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" />

d3.select(self.frameElement).style("height", "1800px");
      d3.select(self.frameElement).style("width", "1200px");

// 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 focalNodeID = "N1";

var nodeSet = [
        {id: "N1", name: "Smith, John", fixed: true, x: 10, y: 0, type: "Resource", hlink: "https://nounz.if4it.com/Nouns/Resources/Smith_John.NodeCluster.html"},
        {id: "N2", name: "Product 2", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_2.NodeCluster.html"},
        {id: "N3", name: "Cee, Washing D", type: "Resource", hlink: "https://nounz.if4it.com/Nouns/Resources/Cee_Washington_D.NodeCluster.html"},
        {id: "N4", name: "Product 4", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_4.NodeCluster.html"},
        {id: "N5", name: "Contract 3", type: "Contract", hlink: "https://nounz.if4it.com/Nouns/Contracts/Contract_3.NodeCluster.html"},
        {id: "N6", name: "Product 6", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_6.NodeCluster.html"},
        {id: "N7", name: "Product 7", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_7.NodeCluster.html"},
        {id: "N8", name: "Contract 5", type: "Contract", hlink: "https://nounz.if4it.com/Nouns/Contracts/Contract_5.NodeCluster.html"},
        {id: "N9", name: "Contract 9", type: "Contract", hlink: "https://nounz.if4it.com/Nouns/Contracts/Contract_9.NodeCluster.html"},
        {id: "N10", name: "Product 10", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_10.NodeCluster.html"},
        {id: "N11", name: "Contract 11", type: "Contract", hlink: "https://nounz.if4it.com/Nouns/Contracts/Contract_11.NodeCluster.html"},
        {id: "N12", name: "Super, Susan", type: "Resource", hlink: "https://nounz.if4it.com/Nouns/Resources/Super_Susan.NodeCluster.html"},
        {id: "N13", name: "Product 13", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_13.NodeCluster.html"},
        {id: "N14", name: "Contract 14", type: "Contract", hlink: "https://nounz.if4it.com/Nouns/Contracts/Contract_14.NodeCluster.html"},
        {id: "N15", name: "Product 15", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_15.NodeCluster.html"},
        {id: "N16", name: "United States", type: "Country", hlink: "https://nounz.if4it.com/Nouns/Countries/United_States.NodeCluster.html"},
        {id: "N17", name: "Product 17", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_17.NodeCluster.html"},
        {id: "N18", name: "Contract 18", type: "Contract", hlink: "https://nounz.if4it.com/Nouns/Contracts/Contract_18.NodeCluster.html"},
        {id: "N19", name: "Contract 19", type: "Contract", hlink: "https://nounz.if4it.com/Nouns/Contracts/Contract_19.NodeCluster.html"},
        {id: "N20", name: "United Kingdom", type: "Country", hlink: "https://nounz.if4it.com/Nouns/Countries/United_Kingdom.NodeCluster.html"},
        {id: "N21", name: "Product 21", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_21.NodeCluster.html"},
        {id: "N22", name: "Product 22", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_22.NodeCluster.html"},
        {id: "N23", name: "Executive, Emily", type: "Resource", hlink: "https://nounz.if4it.com/Nouns/Resources/Executive_Emily_A.NodeCluster.html"},
        {id: "N24", name: "Product 24", type: "Product", hlink: "https://nounz.if4it.com/Nouns/Products/Product_24.NodeCluster.html"}
      ];

var linkSet = [
        {sourceId: "N1", linkName: "Relationship 1", targetId: "N2"},
        {sourceId: "N3", linkName: "Relationship 2", targetId: "N1"},
        {sourceId: "N4", linkName: "Relationship 3", targetId: "N1"},
        {sourceId: "N1", linkName: "Relationship 4", targetId: "N5"},
        {sourceId: "N6", linkName: "Relationship 5", targetId: "N1"},
        {sourceId: "N1", linkName: "Relationship 6", targetId: "N7"},
        {sourceId: "N1", linkName: "Relationship 7", targetId: "N8"},
        {sourceId: "N9", linkName: "Relationship 8", targetId: "N1"},
        {sourceId: "N1", linkName: "Relationship 9", targetId: "N10"},
        {sourceId: "N11", linkName: "Relationship 10", targetId: "N1"},
        {sourceId: "N1", linkName: "Relationship 11", targetId: "N12"},
        {sourceId: "N13", linkName: "Relationship 12", targetId: "N1"},
        {sourceId: "N1", linkName: "Relationship 13", targetId: "N14"},
        {sourceId: "N1", linkName: "Relationship 14", targetId: "N15"},
        {sourceId: "N16", linkName: "Relationship 15", targetId: "N1"},
        {sourceId: "N17", linkName: "Relationship 16", targetId: "N1"},
        {sourceId: "N18", linkName: "Relationship 17", targetId: "N1"},
        {sourceId: "N19", linkName: "Relationship 18", targetId: "N1"},
        {sourceId: "N20", linkName: "Relationship 19", targetId: "N1"},
        {sourceId: "N21", linkName: "Relationship 20", targetId: "N1"},
        {sourceId: "N22", linkName: "Relationship 21", targetId: "N1"},
        {sourceId: "N1", linkName: "Relationship 22", targetId: "N23"},
        {sourceId: "N1", linkName: "Relationship 23", targetId: "N24"}
      ];

function drawCluster( drawingName, focalNode, nodeSet, linkSet, selectString, colors ) {

// drawingName => A unique drawing identifier that has no spaces, no "." and no "#" characters.
        // focalNode => Primary Node of Context.
        // nodeSet => Set of nodes and their relevant data.
        // linkSet => Set of links 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 width = 1000;
        var height = 600;
        var centerNodeSize = 50;
        var nodeSize = 10;
        var color_hash = [];

var typeMouseOver = function() {

var thisObject = d3.select(this);
          var typeValue = thisObject.attr("type_value");
          var strippedTypeValue = typeValue.replace(/ /g, "_");

var legendBulletSelector = "." + "legendBullet-" + strippedTypeValue;
          var selectedBullet = d3.selectAll(legendBulletSelector);
          //document.writeln(legendBulletSelector);
          selectedBullet.style("fill", "Maroon");
	  selectedBullet.attr("r", 1.2*6);

var legendTextSelector = "." + "legendText-" + strippedTypeValue;
          var selectedLegendText = d3.selectAll(legendTextSelector);
          //document.writeln(legendBulletSelector);
          selectedLegendText.style("font", "bold 14px Arial")
          selectedLegendText.style("fill", "Maroon");

var nodeTextSelector = "." + "nodeText-" + strippedTypeValue;
          var selectedNodeText = d3.selectAll(nodeTextSelector);
          //document.writeln(pie3SliceSelector);
          selectedNodeText.style("font", "bold 16px Arial")
          selectedNodeText.style("fill", "Maroon");

var nodeCircleSelector = "." + "nodeCircle-" + strippedTypeValue;
          var selectedCircle = d3.selectAll(nodeCircleSelector);
          //document.writeln(nodeCircleSelector);
          selectedCircle.style("fill", "Maroon");
          selectedCircle.style("stroke", "Maroon");
	  selectedCircle.attr("r", 1.2*nodeSize);

var focalNodeCircleSelector = "." + "focalNodeCircle";
          var selectedFocalNodeCircle = d3.selectAll(focalNodeCircleSelector);
          //document.writeln(focalNodeCircleSelector);
          var focalNodeType = selectedFocalNodeCircle.attr("type_value");
          if (typeValue == focalNodeType){
            selectedFocalNodeCircle.style("stroke", "Maroon");
            selectedFocalNodeCircle.style("fill", "White");
          };

var focalNodeTextSelector = "." + "focalNodeText";
          var selectedFocalNodeText = d3.selectAll(focalNodeTextSelector);
          var focalNodeTextType = selectedFocalNodeText.attr("type_value");
          //document.writeln(pie3SliceSelector);
          if (typeValue == focalNodeTextType) {
            selectedFocalNodeText.style("fill", "Maroon");
            selectedFocalNodeText.style("font", "bold 16px Arial")
          };

};

var typeMouseOut = function() {

var thisObject = d3.select(this);
          var typeValue = thisObject.attr("type_value");
          var colorValue = thisObject.attr("color_value");
          var strippedTypeValue = typeValue.replace(/ /g, "_");

var legendTextSelector = "." + "legendText-" + strippedTypeValue;
          var selectedLegendText = d3.selectAll(legendTextSelector);
          //document.writeln(legendBulletSelector);
          selectedLegendText.style("font", "normal 14px Arial")
          selectedLegendText.style("fill", "Black");

var nodeTextSelector = "." + "nodeText-" + strippedTypeValue;
          var selectedNodeText = d3.selectAll(nodeTextSelector);
          //document.writeln(pie3SliceSelector);
          selectedNodeText.style("font", "normal 16px Arial")
          selectedNodeText.style("fill", "Blue");

var nodeCircleSelector = "." + "nodeCircle-" + strippedTypeValue;
          var selectedCircle = d3.selectAll(nodeCircleSelector);
          //document.writeln(nodeCircleSelector);
          selectedCircle.style("fill", "White");
          selectedCircle.style("stroke", colorValue);
	  selectedCircle.attr("r", nodeSize);

var focalNodeCircleSelector = "." + "focalNodeCircle";
          var selectedFocalNodeCircle = d3.selectAll(focalNodeCircleSelector);
          //document.writeln(focalNodeCircleSelector);
          var focalNodeType = selectedFocalNodeCircle.attr("type_value");
          if (typeValue == focalNodeType){
            selectedFocalNodeCircle.style("stroke", colorValue);
            selectedFocalNodeCircle.style("fill", "White");
          };

var focalNodeTextSelector = "." + "focalNodeText";
          var selectedFocalNodeText = d3.selectAll(focalNodeTextSelector);
          //document.writeln(pie3SliceSelector);
          selectedFocalNodeText.style("fill", "Blue");
          selectedFocalNodeText.style("font", "normal 14px Arial")

};

var nodeMouseOver = function() {

d3.select(this).select("circle").transition()
              .duration(250)
	      .attr("r", function(d,i) { if(d.id==focalNodeID) {return 65;} else {return 15;} } );
	  d3.select(this).select("text").transition()
              .duration(250)
	      .style("font", "bold 20px Arial")
	      .attr("fill", "Blue");

}

var nodeMouseOut = function() {

d3.select(this).select("circle").transition()
              .duration(250)
	      .attr("r", function(d,i) { if(d.id==focalNodeID) {return centerNodeSize;} else {return nodeSize;} } );
	  d3.select(this).select("text").transition()
              .duration(250)
	      .style("font", "normal 16px Arial")
	      .attr("fill", "Blue");

var legendTextSelector = "." + "legendText-" + strippedTypeValue;
          var selectedLegendText = d3.selectAll(legendTextSelector);
          //document.writeln(legendBulletSelector);
          selectedLegendText.style("font", "normal 14px Arial")
          selectedLegendText.style("fill", "Black");

}

// Create a hash that maps colors to types...
        nodeSet.forEach(function(d, i) {
          color_hash[d.type] = d.type;
          //document.writeln(color_hash[d.type]);
        });

function keys(obj)
        {
          var keys = [];

for(var key in obj)
          {
            if(obj.hasOwnProperty(key))
            {
              keys.push(key);
            }
          }
          return 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);
        });
	    
	// Create a canvas...
        var svgCanvas = d3.select(selectString)
          .append("svg:svg")
            .attr("width", width)
	    .attr("height", height)
          .append("svg:g")
            .attr("class", "focalNodeCanvas")
            .attr("transform", "translate(" + width/2 + "," + height/2 + ")")

var node_hash = [];
        var type_hash = [];

// Create a hash that allows access to each node by its id
        nodeSet.forEach(function(d, i) {
          node_hash[d.id] = d;
          type_hash[d.type] = d.type;
        });
      
        // Append the source object node and the target object node to each link records...
        linkSet.forEach(function(d, i) {
          d.source = node_hash[d.sourceId];
          d.target = node_hash[d.targetId];
          if (d.sourceId == focalNodeID)
	    { d.direction = "OUT"; }
          else
	    { d.direction = "IN"; }
        });

// Create a force layout and bind Nodes and Links
        var force = d3.layout.force()
            .nodes(nodeSet)
            .links(linkSet)
            .charge(-1000)
	    .gravity(.01)
	    .friction(.2)
            .linkStrength(9)
            //.size([width/8, height/10])
            .linkDistance( function(d) { if (width < height) { return width*1/3; } else { return height*1/3 } } ) // Controls edge length
            .on("tick", tick)
            .start();

// Draw lines for Links between Nodes
        var link = svgCanvas.selectAll(".gLink")
            .data(force.links())
          .enter().append("g")
            .attr("class", "gLink")
          .append("line")
            .attr("class", "link")
            .style("stroke", "#ccc")
            .attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

// Create Nodes
        var node = svgCanvas.selectAll(".node")
            .data(force.nodes())
          .enter().append("g")
            .attr("class", "node")
            .attr("type_value", function(d, i) { return d.type; })
            .attr("color_value", function(d, i) { return color_hash[d.type]; })
//.attr("fixed", function(d) { if (d.id==focalNodeID) { return true; } else { return false; } } )
            .on("mouseover", nodeMouseOver)
            .on("mouseout", nodeMouseOut)
            .call(force.drag)
	  .append("a")
	    .attr("xlink:href", function(d) {return d.hlink; });

// Append circles to Nodes
        node.append("circle")
//.attr("x", function(d) { return d.x; })
//.attr("y", function(d) { return d.y; })
            .attr("r", function(d) { if (d.id==focalNodeID) { return centerNodeSize; } else { return nodeSize; } } )
            .style("fill", "White") // Make the nodes hollow looking
            .attr("type_value", function(d, i) { return d.type; })
            .attr("color_value", function(d, i) { return color_hash[d.type]; })
//.attr("fixed", function(d) { if (d.id==focalNodeID) { return true; } else { return false; } } )
//.attr("x", function(d) { if (d.id==focalNodeID) { return width/2; } else { return d.x; } })
//.attr("y", function(d) { if (d.id==focalNodeID) { return height/2; } else { return d.y; } })
            .attr("class", function(d, i) {
              var str = d.type;
              var strippedString = str.replace(/ /g, "_")
              //return "nodeCircle-" + strippedString; })
	      if (d.id==focalNodeID) { return "focalNodeCircle"; }
	      else { return "nodeCircle-" + strippedString; }
            })
            .style("stroke-width", 5) // Give the node strokes some thickness
            .style("stroke", function(d, i) { return color_hash[d.type]; } ) // Node stroke colors
	    .call(force.drag);

// Append text to Nodes
        node.append("text")
            .attr("x", function(d) { if (d.id==focalNodeID) { return 0; } else {return 20;} } )
            .attr("y", function(d) { if (d.id==focalNodeID) { return 0; } else {return -10;} } )
	    .attr("text-anchor", function(d) { if (d.id==focalNodeID) {return "middle";} else {return "start";} })
	    .attr("font-family", "Arial, Helvetica, sans-serif")
            .style("font", "normal 16px Arial")
            .attr("fill", "Blue")
            .style("fill", function(d, i) { return color_hash[d]; })
            .attr("type_value", function(d, i) { return d.type; })
            .attr("color_value", function(d, i) { return color_hash[d.type]; })
            .attr("class", function(d, i) {
              var str = d.type;
              var strippedString = str.replace(/ /g, "_");
              //return "nodeText-" + strippedString; })
	      if (d.id==focalNodeID) { return "focalNodeText"; }
	      else { return "nodeText-" + strippedString; }
            })
            .attr("dy", ".35em")
            .text(function(d) { return d.name; });

// Append text to Link edges
        var linkText = svgCanvas.selectAll(".gLink")
            .data(force.links())
          .append("text")
	    .attr("font-family", "Arial, Helvetica, sans-serif")
	    .attr("x", function(d) {
	        if (d.target.x > d.source.x) { return (d.source.x + (d.target.x - d.source.x)/2); }
	        else { return (d.target.x + (d.source.x - d.target.x)/2); }
	    })
            .attr("y", function(d) {
	        if (d.target.y > d.source.y) { return (d.source.y + (d.target.y - d.source.y)/2); }
	        else { return (d.target.y + (d.source.y - d.target.y)/2); }
	    })
	    .attr("fill", "Black")
            .style("font", "normal 12px Arial")
            .attr("dy", ".35em")
            .text(function(d) { return d.linkName; });

linkText
	    .attr("x", function(d) {
	        if (d.target.x > d.source.x) { return (d.source.x + (d.target.x - d.source.x)/2); }
	        else { return (d.target.x + (d.source.x - d.target.x)/2); }
	    })
	    .attr("y", function(d) {
	        if (d.target.y > d.source.y) { return (d.source.y + (d.target.y - d.source.y)/2); }
	        else { return (d.target.y + (d.source.y - d.target.y)/2); }
	    });
        }

// Print Legend Title...
        svgCanvas.append("text").attr("class","region")
            .text("Color Keys for Data Types...")
            .attr("x", -1*(width/2 - 10))
            .attr("y", (-height/7*3))
            .style("fill", "Black")
            .style("font", "bold 16px Arial")
            .attr("text-anchor","start");

// Plot the bullet circles...
        svgCanvas.selectAll("focalNodeCanvas")
            .data(sortedKeys).enter().append("svg:circle") // Append circle elements
            .attr("cx", -1*(width/2 - 25))
            .attr("cy", function(d, i) { return (i*20-height/7*3 + 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...
        svgCanvas.selectAll("a.legend_link")
            .data(sortedKeys) // Instruct to bind dataSet to text elements
          .enter().append("svg:a") // Append legend elements
            .append("text")
              .attr("text-anchor", "center")
              .attr("x", -1*(width/2 - 40))
              .attr("y", function(d, i) { return (i*20-height/7*3 + 20); } )
              .attr("dx", 0)
              .attr("dy", "4px") // 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);

};

</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 Node Cluster Chart in an HTML Page</h1>
          </div>
          <div class="div_RootBody" id="cluster_chart">
          <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