D3 Radial Hub and Spoke Chart Mixed in With HTML Layout Constructs

<!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: "Type 1", hlink: "https://www.if4it.com"}
      ];

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

//var node_hash = [];

// Create a hash that allows access to each node by its ID...
  //nodeSet.forEach(function(d, i) {
    //node_hash[d.id] = d;
        //});

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

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 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", "focalNode")
      .attr("transform", "translate(" + width/2 + "," + height/2 + ")")

// Add focalNode text...
        svgCanvas.selectAll("#focalNode")
            .data(focalNode).enter().append("svg:a")
    .append("text")
            .attr("class", focalNode)
            .attr("x", 0)
            .attr("y", 0)
            .attr("dx", 2)
            .attr("dy", 7)
            .style("fill", "Black")
            .style("font", "bold 16px Arial")
            .attr("text-anchor","middle")
            .text(function(d) { return d.name; });

var arc1 = d3.svg.arc()
      .innerRadius(height/8 - 20)
      .outerRadius(height/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");

arcs1.append("svg:path")
      .attr("fill", function(d) {return d.data.color; } )
      .style("stroke", "White")
      .attr("stroke-width", "2")
      .attr("d", arc1);

var arc2 = d3.svg.arc()
      .innerRadius(height/8 + 10)
      .outerRadius(height/2.25 - 40);

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");

arcs2.append("svg:path")
      .attr("fill", function(d) {return d.data.color; } )
      .style("fill-opacity", .25)
      .style("stroke", "White")
      .attr("stroke-width", "2")
      .attr("d", arc2);

var arc3 = d3.svg.arc()
      .innerRadius(height/2.25 - 30)
      .outerRadius(height/2.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");

arcs3.append("svg:path")
      .attr("fill", function(d) {return d.data.color; } )
      .attr("stroke-width", "2")
      .style("stroke", "White")
      .attr("d", arc3);

// Add link names to the arcs, translated to the arc centroid and rotated.
  arcs2.filter(function(d) {
    return d.endAngle - d.startAngle > .2; }).append("svg:text")
            .attr("dy", ".35em")
            .attr("text-anchor", "middle")
            .attr("transform", function(d) { //set text's origin to the centroid
              //we have to make sure to set these before calling arc.centroid
              d.innerRadius = (height/5 + 10); // Set Inner Coordinate
              d.outerRadius = (height/2 - 40); // 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 /* + " " + Math.round(angle(d, -90, 90)) */ ; });

// 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("angle", function(d) { return angle(d, -90, 90); })
            .attr("text-anchor", function(d) {
              var a = angle(d, 0, 0);
              return a < 0 ? "start" : "end";
            })
            .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", "Black")
            .style("font", "normal 12px Arial")
            .text(function(d) { return d.data.name /* + " " + Math.round(angle(d, 0, 0)) */ ; });

// Computes the angle of an arc, converting from radians to degrees.
        function angle(d, offset, threshold) {
          var a = (d.startAngle + d.endAngle) * 90 / Math.PI + offset;
          return a > threshold ? a - 180 : a;
        }

// Plot the bullet circles...
        svgCanvas.selectAll("circle")
            .data(sortedKeys).enter().append("svg:circle") // Append circle elements
            .attr("cx", width/2-150)
            .attr("cy", function(d, i) { return (i*20-height/7*3); } )
            .attr("stroke-width", ".5")
            .style("fill", function(d, i) { return color_hash[d]; })
            .attr("r", 5)
            .attr("color_value", function(d, i) { return color_hash[d]; })
            .attr("index_value", function(d, i) { return "index-" + i; })
            .attr("class", function(d, i) { return "drawing-" + drawingName + "-legendBullet-index-" + i; });
            //.on('mouseover', synchronizedMouseOver)
            //.on("mouseout", synchronizedMouseOut);

// Plot the center node circle...
  // Note: Issue w/ selecting circles requires this circle to be drawn after legend bullet circles
        svgCanvas.selectAll("#focalNode")
            .data(focalNode).enter().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("r", height/8-30)
            .attr("color_value", function(d, i) { return color_hash[d.type]; })
            .attr("class", function(d, i) { return "drawing-" + drawingName + "-focalNode-index-" + i; });
             //.on('mouseover', synchronizedMouseOver)
             //.on("mouseout", synchronizedMouseOut);

// Create legend text at right that acts as label key...
        svgCanvas.selectAll("a.legend_link")
            .data(sortedKeys) // Instruct to bind dataSet to text elements
          .enter().append("svg:a") // Append legend elements
            //.attr("xlink:href", function(d) { return d.link; })
            .append("text")
              .attr("text-anchor", "center")
              .attr("x", width/2-150 + 10)
              //.attr("y", function(d, i) { return i*textVerticalSpace - legendVerticalOffset; } )
              .attr("y", function(d, i) { return (i*20-height/7*3); } )
              .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]; }) // Bar fill color...
              .attr("index_value", function(d, i) { return "index-" + i; })
              .attr("class", function(d, i) { return "drawing-" + drawingName + "-legendText-index-" + i; })
              .style("fill", "Black")
              .style("font", "normal 1.2em Arial");
              //.on('mouseover', synchronizedMouseOver)
              //.on("mouseout", synchronizedMouseOut);

};

</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">
        <h3 class="h3_Body">Example Description</h3>
              <p class="p_Red">This example shows how to draw a radial hub and spoke drawing in an HTML page that has multiple HTML layout constructs.  Cut, paste, and run the code into your own index.html file to see it run locally.</p>
            </div>
            <div class="div_RootBody" id="radial_chart">
              <h3 class="h3_Body">Radial Hub and Spoke Chart</h3>
              <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