All examples By author By category About

Guerino1

Full window Github gist

D3 Radial Wheel With HTML

<!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" />

// 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 focalNode = [
        {id: "N1", name: "Node 1", type: "Data Type 1", hlink: "https://www.if4it.com"}
      ];

var nodeSet = [
        {id: "N2", name: "Node 2", type: "Data Type 3", relName: "Relationship 1", hlink: "https://www.if4it.com/glossary.html"},
        {id: "N3", name: "Node 3", type: "Data Type 4", relName: "Relationship 2", hlink: "https://www.if4it.com/resources.html"},
        {id: "N4", name: "Node 4", type: "Data Type 5", relName: "Relationship 3", hlink: "https://www.if4it.com/taxonomy.html"},
        {id: "N5", name: "Node 5", type: "Data Type 1", relName: "Relationship 4", hlink: "https://www.if4it.com/disciplines.html"},
        {id: "N6", name: "Node 6", type: "Data Type 2", relName: "Relationship 5", hlink: "https://www.if4it.com"},
        {id: "N7", name: "Node 7", type: "Data Type 3", relName: "Relationship 6", hlink: "https://www.if4it.com/glossary.html"},
        {id: "N8", name: "Node 8", type: "Data Type 4", relName: "Relationship 7", hlink: "https://www.if4it.com/resources.html"},
        {id: "N9", name: "Node 9", type: "Data Type 5", relName: "Relationship 8", hlink: "https://www.if4it.com/taxonomy.html"},
        {id: "N10", name: "Node 10", type: "Data Type 1", relName: "Relationship 9", hlink: "https://www.if4it.com/disciplines.html"},
        {id: "N11", name: "Node 11", type: "Data Type 2", relName: "Relationship 10", hlink: "https://www.if4it.com"},
        {id: "N12", name: "Node 12", type: "Data Type 3", relName: "Relationship 11", hlink: "https://www.if4it.com/glossary.html"},
        {id: "N13", name: "Node 13", type: "Data Type 4", relName: "Relationship 12", hlink: "https://www.if4it.com/resources.html"},
        {id: "N14", name: "Node 14", type: "Data Type 5", relName: "Relationship 13", hlink: "https://www.if4it.com/taxonomy.html"},
        {id: "N15", name: "Node 15", type: "Data Type 1", relName: "Relationship 14", hlink: "https://www.if4it.com/disciplines.html"},
        {id: "N16", name: "Node 16", type: "Data Type 3", relName: "Relationship 15", hlink: "https://www.if4it.com"},
        {id: "N17", name: "Node 17", type: "Data Type 1", relName: "Relationship 16", hlink: "https://www.if4it.com/glossary.html"},
        {id: "N18", name: "Node 18", type: "Data Type 1", relName: "Relationship 17", hlink: "https://www.if4it.com/glossary.html"},
        {id: "N19", name: "Node 19", type: "Data Type 4", relName: "Relationship 18", hlink: "https://www.if4it.com/glossary.html"},
        {id: "N20", name: "Node 20", type: "Data Type 4", relName: "Relationship 19", hlink: "https://www.if4it.com/glossary.html"},
        {id: "N21", name: "Node 21", type: "Data Type 4", relName: "Relationship 20", hlink: "https://www.if4it.com/glossary.html"},
        {id: "N22", name: "Node 22", type: "Data Type 1", relName: "Relationship 21", hlink: "https://www.if4it.com/glossary.html"},
        {id: "N23", name: "Node 23", type: "Data Type 5", relName: "Relationship 22", hlink: "https://www.if4it.com/glossary.html"},
        {id: "N24", name: "Node 24", type: "Data Type 5", relName: "Relationship 23", hlink: "https://www.if4it.com/glossary.html"},
        {id: "N25", name: "Node 25", type: "Data Type 6", relName: "Relationship 24", hlink: "https://www.if4it.com/glossary.html"}
      ];

function drawRadialHubAndSpoke( drawingName, focalNode, nodeSet, selectString, colors, margin, outerRadius, innerRadius, sortArcs ) {

// 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.
        // 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 = 1100;
        var height = 1100;

var typeMouseOver = function() {

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

var pie1ArcsSelector = "." + "pie1-" + strippedTypeValue;
          var selectedArcs = d3.selectAll(pie1ArcsSelector);
          //document.writeln(pie1ArcsSelector);
          selectedArcs.style("fill", "Maroon");

var pie2ArcsSelector = "." + "pie2-" + strippedTypeValue;
          var selectedArcs = d3.selectAll(pie2ArcsSelector);
          //document.writeln(pie2ArcsSelector);
          selectedArcs.style("fill", "Maroon");

var pie3ArcsSelector = "." + "pie3-" + strippedTypeValue;
          var selectedArcs = d3.selectAll(pie3ArcsSelector);
          //document.writeln(pie3ArcsSelector);
          selectedArcs.style("fill", "Maroon");

var legendBulletSelector = "." + "legendBullet-" + strippedTypeValue;
          var selectedBullet = d3.selectAll(legendBulletSelector);
          //document.writeln(legendBulletSelector);
          selectedBullet.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 focalNodeSelector = "." + "focalNodeCircle";
          var focalNode = d3.selectAll(focalNodeSelector);
          var focalNodeType = focalNode.attr("type_value");
          //document.writeln(focalNodeSelector);
          if (typeValue == focalNodeType) {
            focalNode.style("fill", "Maroon");
            focalNode.style("stroke", "Maroon");
          };

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

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

};

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

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

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

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

};

var sliceMouseOver = function() {

var thisObject = d3.select(this);
          var indexValue = thisObject.attr("index_value");

var pie1SliceSelector = "#" + "pie1-slice" + indexValue;
          var selectedArcs = d3.selectAll(pie1SliceSelector);
          //document.writeln(pie1SliceSelector);
          selectedArcs.style("fill", "DarkBlue");

var pie2SliceSelector = "#" + "pie2-slice" + indexValue;
          var selectedArcs = d3.selectAll(pie2SliceSelector);
          //document.writeln(pie2SliceSelector);
          selectedArcs.style("fill", "DarkBlue");

var pie3SliceSelector = "#" + "pie3-slice" + indexValue;
          var selectedArcs = d3.selectAll(pie3SliceSelector);
          //document.writeln(pie3SliceSelector);
          selectedArcs.style("fill", "DarkBlue");

var nodeTextSelector = "#" + "pie3-node" + indexValue;
          var selectedNodeText = d3.selectAll(nodeTextSelector);
          //document.writeln(pie3SliceSelector);
          selectedNodeText.style("font", "bold 16px Arial")
          selectedNodeText.style("fill", "DarkBlue");

var focalNodeSelector = "." + "focalNodeCircle";
          var focalNode = d3.selectAll(focalNodeSelector);
          //document.writeln(focalNodeSelector);
          focalNode.style("fill", "DarkBlue");
          focalNode.style("stroke", "DarkBlue");

};

var sliceMouseOut = function() {

var thisObject = d3.select(this);
          var indexValue = thisObject.attr("index_value");
          var colorValue = thisObject.attr("color_value");

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

var focalNodeSelector = "." + "focalNodeCircle";
          var focalNode = d3.selectAll(focalNodeSelector);
          var focalNodeColorValue = focalNode.attr("color_value");
          //document.writeln(focalNodeSelector);
          focalNode.style("fill", focalNodeColorValue);
          focalNode.style("stroke", focalNodeColorValue);

};

var focalNodeMouseOver = function() {

};

var focalNodeMouseOut = function() {

};

var color_hash = [];

// 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]);
        });

var sortedKeys = keys(color_hash).sort();

sortedKeys.forEach(function(d, i) {
          color_hash[d] = colorScale(i);
          //document.writeln(color_hash[d]);
        });

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

var svgCanvas = d3.select(selectString)
          .append("svg:svg")
            .data([nodeSet])
            .attr("width", width)
            .attr("height", height) 
          .append("svg:g")
            .attr("class", "focalNodeCanvas")
            .attr("transform", "translate(" + width/2 + "," + height/2 + ")")

// Start 1st Pie...
        var arc1 = d3.svg.arc()
            .innerRadius(width/8 - 20)
            .outerRadius(width/8);

var pie1 = d3.layout.pie()
            .value(function(d) { return 1; } );

var arcs1 = svgCanvas.selectAll("g.slice1")
            .data(pie1)
          .enter().append("svg:g")
            .attr("class", "slice1")
          .append("svg:a")
            .attr("xlink:href", function(d) { return d.data.hlink; });

arcs1.append("svg:path")
            .attr("fill", function(d) {return d.data.color; } )
            .attr("type_value", function(d) {return d.data.type; } )
            .attr("index_value", function(d, i) {return i; } )
            .attr("id", function(d, i) {return "pie1-slice" + i; } )
            .attr("color_value", function(d) {return d.data.color; } )
	    .attr("class", function(d, i) {
		var str = d.data.type;
		var strippedString = str.replace(/ /g, "_")
		return "pie1-" + strippedString; })
            .style("stroke", "White")
            .attr("stroke-width", "2")
            .attr("d", arc1)
            .on('mouseover', sliceMouseOver)
	    .on("mouseout", sliceMouseOut);

// Start 2nd Pie...
        var arc2 = d3.svg.arc()
            .innerRadius(width/8 + 5)
            .outerRadius(width/3.25 - 35);

var pie2 = d3.layout.pie()
            .value(function(d) { return 1; } );

var arcs2 = svgCanvas.selectAll("g.slice2")
            .data(pie2)
          .enter().append("svg:g")
            .attr("class", "slice2")
          .append("svg:a")
            .attr("xlink:href", function(d) { return d.data.hlink; });

arcs2.append("svg:path")
            .attr("fill", function(d) {return d.data.color; } )
            .style("fill-opacity", .25)
            .attr("type_value", function(d) {return d.data.type; } )
            .attr("index_value", function(d, i) {return i; } )
            .attr("id", function(d, i) {return "pie2-slice" + i; } )
            .attr("color_value", function(d) {return d.data.color; } )
	    .attr("class", function(d, i) {
		var str = d.data.type;
		var strippedString = str.replace(/ /g, "_")
		return "pie2-" + strippedString; })
            .style("stroke", "White")
            .attr("stroke-width", "2")
            .attr("d", arc2)
            .on('mouseover', sliceMouseOver)
            .on("mouseout", sliceMouseOut);

// Start 3rd Pie...
        var arc3 = d3.svg.arc()
            .innerRadius(width/3.25 - 30)
            .outerRadius(width/3.25 - 10);

var pie3 = d3.layout.pie()
            .value(function(d) { return 1; } );

var arcs3 = svgCanvas.selectAll("g.slice3")
            .data(pie3)
          .enter().append("svg:g")
            .attr("class", "slice3")
          .append("svg:a")
            .attr("xlink:href", function(d) { return d.data.hlink; });

arcs3.append("svg:path")
            .attr("fill", function(d) {return d.data.color; } )
            .attr("type_value", function(d) {return d.data.type; } )
            .attr("index_value", function(d, i) {return i; } )
            .attr("id", function(d, i) {return "pie3-slice" + i; } )
            .attr("color_value", function(d) {return d.data.color; } )
	    .attr("class", function(d, i) {
		var str = d.data.type;
		var strippedString = str.replace(/ /g, "_")
		return "pie3-" + strippedString; })
            .attr("stroke-width", "2")
            .style("stroke", "White")
            .attr("d", arc3)
            .on('mouseover', sliceMouseOver)
            .on("mouseout", sliceMouseOut);

// Add link names to the arcs, translated to the arc centroid and rotated.
        arcs3.filter(function(d) {
          return d.endAngle - d.startAngle > .2; }).append("svg:text")
            .attr("dy", ".35em")
            //.attr("dx", "-20px")
            .attr("dx", function(d) {
              var a = angle(d, 0, 0);
              return a < 0 ? "-16px" : "16px";
            })
            .attr("text-anchor", function(d) {
              var a = angle(d, 0, 0);
              return a < 0 ? "start" : "end";
            })
            .attr("transform", function(d) { //set text'ss origin to the centroid
              //we have to make sure to set these before calling arc.centroid
              d.innerRadius = (width/8); // Set Inner Coordinate
              d.outerRadius = (width/4); // Set Outer Coordinate
              return "translate(" + arc2.centroid(d) + ")rotate(" + angle(d, -90, 90) + ")";
            })
            .style("fill", "Black")
            .style("font", "normal 10px Arial")
            .text(function(d) { return d.data.relName; });

// Add node names to the arcs, translated to the arc centroid and rotated.
        arcs3.filter(function(d) {
          return d.endAngle - d.startAngle > .2; }).append("svg:text")
            .attr("dy", "5px")
            .attr("dx", function(d) {
              var a = angle(d, 0,0);
              return a < 0 ? "15px" : "-15px";
            })
            .attr("text-anchor", function(d) {
              var a = angle(d, 0, 0);
              return a <= 0 ? "start" : "end";
            })
            .attr("type_value", function(d) {return d.data.type; } )
            .attr("index_value", function(d, i) {return i; } )
            .attr("id", function(d, i) {return "pie3-node" + i; } )
            .attr("color_value", function(d) {return d.data.color; } )
	    .attr("class", function(d, i) {
		var str = d.data.type;
		var strippedString = str.replace(/ /g, "_")
		return "nodeText-" + strippedString; })
            .attr("transform", function(d) { //set text's origin to the centroid
              // Make sure to set these before calling arc.centroid
              d.innerRadius = (height/2); // Set Inner Coordinate
              d.outerRadius = (height/2); // Set Outer Coordinate
              return "translate(" + arc3.centroid(d) + ")rotate(" + angle(d, -90, 90) + ")";
            })
            .style("fill", "Blue")
            .style("font", "normal 16px Arial")
            .text(function(d) { return d.data.name; })
            .on('mouseover', sliceMouseOver)
            .on("mouseout", sliceMouseOut)
          .append("svg:a")
            .attr("xlink:href", function(d) { return d.data.hlink; });

// Updated Angle Calculation Function...
        function angle(d, offset, threshold) {
          var a = (d.startAngle + d.endAngle) * 90 / Math.PI + offset;
          return a > threshold ? a - 180 : a;
        }

// 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("circle")
            .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);

// Plot the center node circle...
        // Note: Issue w/ selecting circles requires this circle to be drawn after legend bullet circles
        svgCanvas.selectAll("#focalNodeCanvas")
            .data(focalNode)
	  .enter().append("svg:a")
            .attr("xlink:href", function(d) { return d.hlink; })
          .append("svg:circle") // Append circle element
            .attr("x", width/2)
            .attr("y", height/2)
            .attr("stroke-width", "8")
            .style("stroke", function(d, i) { return color_hash[d.type]; })
            .style("fill", function(d, i) { return color_hash[d.type]; })
            .style("fill-opacity", .25)
            .attr("type_value", function(d) {return d.type; } )
            .attr("color_value", function(d, i) { return color_hash[d.type]; })
            .attr("class", "focalNodeCircle")
            .attr("r", height/8-30)
            .on('mouseover', focalNodeMouseOver)
            .on("mouseout", focalNodeMouseOut);

// Add focalNode text...
        svgCanvas.selectAll("a.focalNode_link")
	    .data(focalNode)
	  .enter().append("svg:a")
            .attr("xlink:href", function(d) { return d.hlink; })
            .append("text")
              .attr("x", 0)
              .attr("y", 0)
              .attr("dx", 2)
              .attr("dy", 7)
              .attr("type_value", function(d) {return d.type; } )
              .attr("class", "focalNodeText")
              .style("fill", "Blue")
              .style("font", "bold 16px Arial")
              .attr("text-anchor","middle")
              .text(function(d) { return d.name; })
              .on('mouseover', focalNodeMouseOver)
              .on("mouseout", focalNodeMouseOut);

// 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 {
        width: 250px;
        height: 100%;
        padding: 0;
      }
      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>
            <div class="div_RootBody">
              <h1 style="text-align:center; font: bold 1.5em Arial;">D3 Based Radial Hub and Spoke Chart in an HTML Page</h1>
            </div>
            <div class="div_RootBody" id="radial_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