Guerino1/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html  xmlns="http://www.w3.org/1999/xhtml"
       xml:lang="en-US"
       lang="en-US">
  <head profile="http://www.w3.org/2005/10/profile">
    <title>IF4IT Density Chart</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta name="Description" content="This page provides a table-oriented view of density." />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="-l" />

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>


    <script type="text/javascript">
      //d3.select(self.frameElement).style("height", "1400px");
      //d3.select(self.frameElement).style("width", "1400px");

      // This example draws a Radial Hub and Spoke Graph on a page with
      // multiple HTML layout constructs.
      // Created by Frank Guerino : "http://www.guerino.net"

      // Data Used for this example...

      var headerInfo = [
      ];

      var densitySet = [
        { Name: "Node 1", Total: 1000, Link: "http://www.if4it.com" },
        { Name: "Node 2", Total: 1500, Link: "http://www.if4it.com" },
        { Name: "Node 3", Total: 700, Link: "http://www.if4it.com" },
        { Name: "Node 4", Total: 300, Link: "http://www.if4it.com" },
        { Name: "Node 5", Total: 1000, Link: "http://www.if4it.com" },
        { Name: "Node 6", Total: 900, Link: "http://www.if4it.com" },
        { Name: "Node 7", Total: 1090, Link: "http://www.if4it.com" },
        { Name: "Node 8", Total: 35, Link: "http://www.if4it.com" },
        { Name: "Node 9", Total: 1000, Link: "http://www.if4it.com" },
        { Name: "Node 10", Total: 99, Link: "http://www.if4it.com" },
        { Name: "Node 11", Total: 950, Link: "http://www.if4it.com" },
        { Name: "Node 12", Total: 1850, Link: "http://www.if4it.com" },
        { Name: "Node 13", Total: 0, Link: "http://www.if4it.com" },
        { Name: "Node 14", Total: 2000, Link: "http://www.if4it.com" },
        { Name: "Node 15", Total: 100, Link: "http://www.if4it.com" },
        { Name: "Node 16", Total: 10, Link: "http://www.if4it.com" },
        { Name: "Node 17", Total: 600, Link: "http://www.if4it.com" },
        { Name: "Node 18", Total: 200, Link: "http://www.if4it.com" },
        { Name: "Node 19", Total: 9, Link: "http://www.if4it.com" },
        { Name: "Node 20", Total: 1100, Link: "http://www.if4it.com" },
        { Name: "Node 21", Total: 1, Link: "http://www.if4it.com" },
        { Name: "Node 22", Total: 0, Link: "http://www.if4it.com" },
        { Name: "Node 23", Total: 13, Link: "http://www.if4it.com" },
        { Name: "Node 24", Total: 452, Link: "http://www.if4it.com" },
        { Name: "Node 25", Total: 1660, Link: "http://www.if4it.com" },
        { Name: "Node 26", Total: 1170, Link: "http://www.if4it.com" },
        { Name: "Node 27", Total: 1500, Link: "http://www.if4it.com" }
      ];


      function drawDensityTable( drawingName, densitySet, selectString, backgroundColor, textColor ) {

        // Determine the maximum number of relationships to yield greatest density
        var maxRelationshipDensity = 0;
        densitySet.forEach(function(d) {
          d.Percentage = d.Total;
          if (d.Total > maxRelationshipDensity) { maxRelationshipDensity = d.Total; };
        });

        // Create, both, the tableArray and the linkArray
        var totalsArray = [];
        var linksArray = [];
        for(var i = 0; i < densitySet.length; i++){
          var percentageOfTotal = (densitySet[i].Total/maxRelationshipDensity)*100;
          totalsArray.push( {Name: densitySet[i].Name, Relationships: densitySet[i].Total, Percentage: percentageOfTotal, Density: percentageOfTotal} );
          //linksArray.push( {Name: densitySet[i].Name, Link: densitySet[i].Link} );
          linksArray.push( {Link: densitySet[i].Link} );
        };

        // Extract keys for HTML Table column header names
        //var columnKeys = d3.keys(densitySet[0]).filter(function(key) {
        var columnKeys = d3.keys(totalsArray[0]).filter(function(key) {
            return key;
          }
        );

        // Sorts records
        var recordSortFunction = function() {
          var thisObject = d3.select(this);
          var k = thisObject.attr("keyName");
          var dataRecords = d3.selectAll(".density_record"); // HERE
          if(k != "Name") {
            dataRecords.sort(function(a, b) { return (b[k]) - (a[k]); });
          }
          else {
            dataRecords.sort(function(a, b) {
              return a[k] < b[k] ? -1 : (a[k] > b[k] ? 1 : 0); });
          };
        };

        var headerMouseOver = function () {
          var thisObject = d3.select(this);
          thisObject.style("background", textColor);
          thisObject.style("color", backgroundColor);
        };

        var headerMouseOut = function () {
          var thisObject = d3.select(this);
          thisObject.style("background", backgroundColor);
          thisObject.style("color", textColor);
        };

        var bodyRecordMouseOver = function () {
          var thisObject = d3.select(this);
          thisObject.style("background", "Orange");
        };

        var bodyRecordMouseOut = function () {
          var thisObject = d3.select(this);
          thisObject.style("background", "transparent");
        };

        // Create a dummy array that will be used for HTML single element creation.
        var dummyArray = [{dummy: 1}];

        // Create an SVG canvas and append an HTML table element
        var svgCanvas = d3.select(selectString).selectAll("table")
          .data(dummyArray)
          .enter()
          .append("table")
            .attr("id", "density_table");

        // Select the HTML table element and append an HTML thead element
        var densityTable = d3.selectAll("#density_table").selectAll("table.thead")
          .data(dummyArray)
          .enter()
          .append("thead")
            .attr("id", "density_header");

        // Select the HTML thead element and append an HTML tr element
        var densityHead = d3.selectAll("#density_header").selectAll("thead.tr")
          .data(dummyArray)
          .enter()
          .append("tr")
            .attr("id", "density_header_record");

        // Select the HTML tr element and append the HTML td and data for Column Headers
        var densityHeaderRecord = d3.selectAll("#density_header_record").selectAll("tr.td")
          .data(columnKeys)
          .enter()
          .append("td")
            .attr("id", "density_headerer_data")
            .attr("keyName", function(d) { return d; })
            .text(function(d) { return d; }) // Append Keys
            .style("background", backgroundColor)
            .style("color", textColor)
            .style("border", "0px solid White")
            .style("font", "bold 12px Arial")
            .style("padding", "4px")
            .style("text-align", "center")
            .on('mouseover', headerMouseOver)
            .on("mouseout", headerMouseOut)
            .on("click", recordSortFunction);

        // Select the HTML table element and append an HTML tbody element
        var densityTable = d3.selectAll("#density_table").selectAll("table.tbody")
          .data(dummyArray)
          .enter()
          .append("tbody")
            .attr("id", "density_body");

        // Select the HTML tbody element and append an HTML tr element to create body records
        var densityBody = d3.selectAll("#density_body").selectAll("tbody.tr")
          .data(totalsArray)
          .enter()
          .append("tr")
            .attr("class", "density_record")
            .attr("id", function(d, i) { return "density_body_record-" + i; })
            .on("mouseover", bodyRecordMouseOver)
            .on("mouseout", bodyRecordMouseOut);

        for(var z = 0; z < totalsArray.length; z++){
          // Select the HTML tr elements in the tbody and append HTML td elements
          var dataSelectString = "#density_body_record-" + z;
          var densityBodyDataRecords = d3.selectAll(dataSelectString).selectAll("tr.td")
            //.data(totalsArray[z])
            .data([totalsArray[z].Name, totalsArray[z].Relationships, totalsArray[z].Percentage, totalsArray[z].Density])
            .enter()
            .append("td")
              .attr("id", function(d, i) { return "column-" + i; })
              // Append text to each column
              //.text(function(d) { return d; })
              .text(function(d, i) {
                if (i < 3) { return d; }
              })
                .style("font", "normal 12px Arial")
                .append("svg")
                  .attr("width", function(d, i) {
                    if(i == 0) { return 200; }
                    else if(i == 1) { return 100; }
                    else if(i == 2) { return 100; }
                    else { return 500; }
                  })
                  //.attr("height", 15)
                  .attr("height", function(d, i) {
                    if(i < 3) { return 0; }
                    else { return 15; }
                  })
                  .append("rect")
                    .attr("height", 15)
                    .style("fill", "Blue")
                    .attr("width", function(d, i) {
                      if(i == 3) { return (d*5); }
                      else { return 0; }
                    });
        };

        var linkableData = d3.selectAll("#column-0")
          .data(linksArray)
          .enter().append("svg:a")
	    .attr("xlink:href", function(d) { return d.Link; });

      };

    </script>


    <style type="text/css">
      svg {
        font: 10px sans-serif;
        display: block;
      }
    </style>

    <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>
    <!--[if gt IE 7]>
      <style>body { overflow-y:scroll; } </style>
    <![endif]-->
  </head>

  <body>

      <div>
        <h1 style="text-align:center; font: bold 1.7em Arial;"><a href="http://www.if4it.com">The International Foundation for Information Technology (IF4IT)</a></h1>
        </div>

      <div class="div_Menu">
        <ul class="menuButton">
          <li><a href="http://www.if4it.com">HOME</a></li>
          <li><a href="http://www.if4it.com/resources.html">RESOURCES</a></li>
          <li><a href="http://www.if4it.com">PRODUCTS</a></li>
          <li><a href="http://www.if4it.com">SERVICES</a></li>
          <li><a href="http://www.if4it.com">SUPPORT</a></li>
          <li><a href="http://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="http://www.if4it.com">IF4IT Home</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://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="http://www.if4it.com">IF4IT Home</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://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 Density Chart in an HTML Page</h1>
            </div>
            <div class="div_RootBody" id="density_chart">
            </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>

      <script type="text/javascript">
        drawDensityTable("Noun Instance Density Overview", densitySet, "#density_chart", "MidnightBlue", "White");
      </script>

    </body>

</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml"
	xml:lang="en-US"
	lang="en-US">
	<head profile="http://www.w3.org/2005/10/profile">
	<title>IF4IT Density Chart</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="Description" content="This page provides a table-oriented view of density." />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="-l" />

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>


	<script type="text/javascript">
	//d3.select(self.frameElement).style("height", "1400px");
	//d3.select(self.frameElement).style("width", "1400px");

	// This example draws a Radial Hub and Spoke Graph on a page with
	// multiple HTML layout constructs.
	// Created by Frank Guerino : "http://www.guerino.net"

	// Data Used for this example...

	var headerInfo = [
	];

	var densitySet = [
	{ Name: "Node 1", Total: 1000, Link: "http://www.if4it.com" },
	{ Name: "Node 2", Total: 1500, Link: "http://www.if4it.com" },
	{ Name: "Node 3", Total: 700, Link: "http://www.if4it.com" },
	{ Name: "Node 4", Total: 300, Link: "http://www.if4it.com" },
	{ Name: "Node 5", Total: 1000, Link: "http://www.if4it.com" },
	{ Name: "Node 6", Total: 900, Link: "http://www.if4it.com" },
	{ Name: "Node 7", Total: 1090, Link: "http://www.if4it.com" },
	{ Name: "Node 8", Total: 35, Link: "http://www.if4it.com" },
	{ Name: "Node 9", Total: 1000, Link: "http://www.if4it.com" },
	{ Name: "Node 10", Total: 99, Link: "http://www.if4it.com" },
	{ Name: "Node 11", Total: 950, Link: "http://www.if4it.com" },
	{ Name: "Node 12", Total: 1850, Link: "http://www.if4it.com" },
	{ Name: "Node 13", Total: 0, Link: "http://www.if4it.com" },
	{ Name: "Node 14", Total: 2000, Link: "http://www.if4it.com" },
	{ Name: "Node 15", Total: 100, Link: "http://www.if4it.com" },
	{ Name: "Node 16", Total: 10, Link: "http://www.if4it.com" },
	{ Name: "Node 17", Total: 600, Link: "http://www.if4it.com" },
	{ Name: "Node 18", Total: 200, Link: "http://www.if4it.com" },
	{ Name: "Node 19", Total: 9, Link: "http://www.if4it.com" },
	{ Name: "Node 20", Total: 1100, Link: "http://www.if4it.com" },
	{ Name: "Node 21", Total: 1, Link: "http://www.if4it.com" },
	{ Name: "Node 22", Total: 0, Link: "http://www.if4it.com" },
	{ Name: "Node 23", Total: 13, Link: "http://www.if4it.com" },
	{ Name: "Node 24", Total: 452, Link: "http://www.if4it.com" },
	{ Name: "Node 25", Total: 1660, Link: "http://www.if4it.com" },
	{ Name: "Node 26", Total: 1170, Link: "http://www.if4it.com" },
	{ Name: "Node 27", Total: 1500, Link: "http://www.if4it.com" }
	];


	function drawDensityTable( drawingName, densitySet, selectString, backgroundColor, textColor ) {

	// Determine the maximum number of relationships to yield greatest density
	var maxRelationshipDensity = 0;
	densitySet.forEach(function(d) {
	d.Percentage = d.Total;
	if (d.Total > maxRelationshipDensity) { maxRelationshipDensity = d.Total; };
	});

	// Create, both, the tableArray and the linkArray
	var totalsArray = [];
	var linksArray = [];
	for(var i = 0; i < densitySet.length; i++){
	var percentageOfTotal = (densitySet[i].Total/maxRelationshipDensity)*100;
	totalsArray.push( {Name: densitySet[i].Name, Relationships: densitySet[i].Total, Percentage: percentageOfTotal, Density: percentageOfTotal} );
	//linksArray.push( {Name: densitySet[i].Name, Link: densitySet[i].Link} );
	linksArray.push( {Link: densitySet[i].Link} );
	};

	// Extract keys for HTML Table column header names
	//var columnKeys = d3.keys(densitySet[0]).filter(function(key) {
	var columnKeys = d3.keys(totalsArray[0]).filter(function(key) {
	return key;
	}
	);

	// Sorts records
	var recordSortFunction = function() {
	var thisObject = d3.select(this);
	var k = thisObject.attr("keyName");
	var dataRecords = d3.selectAll(".density_record"); // HERE
	if(k != "Name") {
	dataRecords.sort(function(a, b) { return (b[k]) - (a[k]); });
	}
	else {
	dataRecords.sort(function(a, b) {
	return a[k] < b[k] ? -1 : (a[k] > b[k] ? 1 : 0); });
	};
	};

	var headerMouseOver = function () {
	var thisObject = d3.select(this);
	thisObject.style("background", textColor);
	thisObject.style("color", backgroundColor);
	};

	var headerMouseOut = function () {
	var thisObject = d3.select(this);
	thisObject.style("background", backgroundColor);
	thisObject.style("color", textColor);
	};

	var bodyRecordMouseOver = function () {
	var thisObject = d3.select(this);
	thisObject.style("background", "Orange");
	};

	var bodyRecordMouseOut = function () {
	var thisObject = d3.select(this);
	thisObject.style("background", "transparent");
	};

	// Create a dummy array that will be used for HTML single element creation.
	var dummyArray = [{dummy: 1}];

	// Create an SVG canvas and append an HTML table element
	var svgCanvas = d3.select(selectString).selectAll("table")
	.data(dummyArray)
	.enter()
	.append("table")
	.attr("id", "density_table");

	// Select the HTML table element and append an HTML thead element
	var densityTable = d3.selectAll("#density_table").selectAll("table.thead")
	.data(dummyArray)
	.enter()
	.append("thead")
	.attr("id", "density_header");

	// Select the HTML thead element and append an HTML tr element
	var densityHead = d3.selectAll("#density_header").selectAll("thead.tr")
	.data(dummyArray)
	.enter()
	.append("tr")
	.attr("id", "density_header_record");

	// Select the HTML tr element and append the HTML td and data for Column Headers
	var densityHeaderRecord = d3.selectAll("#density_header_record").selectAll("tr.td")
	.data(columnKeys)
	.enter()
	.append("td")
	.attr("id", "density_headerer_data")
	.attr("keyName", function(d) { return d; })
	.text(function(d) { return d; }) // Append Keys
	.style("background", backgroundColor)
	.style("color", textColor)
	.style("border", "0px solid White")
	.style("font", "bold 12px Arial")
	.style("padding", "4px")
	.style("text-align", "center")
	.on('mouseover', headerMouseOver)
	.on("mouseout", headerMouseOut)
	.on("click", recordSortFunction);

	// Select the HTML table element and append an HTML tbody element
	var densityTable = d3.selectAll("#density_table").selectAll("table.tbody")
	.data(dummyArray)
	.enter()
	.append("tbody")
	.attr("id", "density_body");

	// Select the HTML tbody element and append an HTML tr element to create body records
	var densityBody = d3.selectAll("#density_body").selectAll("tbody.tr")
	.data(totalsArray)
	.enter()
	.append("tr")
	.attr("class", "density_record")
	.attr("id", function(d, i) { return "density_body_record-" + i; })
	.on("mouseover", bodyRecordMouseOver)
	.on("mouseout", bodyRecordMouseOut);

	for(var z = 0; z < totalsArray.length; z++){
	// Select the HTML tr elements in the tbody and append HTML td elements
	var dataSelectString = "#density_body_record-" + z;
	var densityBodyDataRecords = d3.selectAll(dataSelectString).selectAll("tr.td")
	//.data(totalsArray[z])
	.data([totalsArray[z].Name, totalsArray[z].Relationships, totalsArray[z].Percentage, totalsArray[z].Density])
	.enter()
	.append("td")
	.attr("id", function(d, i) { return "column-" + i; })
	// Append text to each column
	//.text(function(d) { return d; })
	.text(function(d, i) {
	if (i < 3) { return d; }
	})
	.style("font", "normal 12px Arial")
	.append("svg")
	.attr("width", function(d, i) {
	if(i == 0) { return 200; }
	else if(i == 1) { return 100; }
	else if(i == 2) { return 100; }
	else { return 500; }
	})
	//.attr("height", 15)
	.attr("height", function(d, i) {
	if(i < 3) { return 0; }
	else { return 15; }
	})
	.append("rect")
	.attr("height", 15)
	.style("fill", "Blue")
	.attr("width", function(d, i) {
	if(i == 3) { return (d*5); }
	else { return 0; }
	});
	};

	var linkableData = d3.selectAll("#column-0")
	.data(linksArray)
	.enter().append("svg:a")
	.attr("xlink:href", function(d) { return d.Link; });

	};

	</script>


	<style type="text/css">
	svg {
	font: 10px sans-serif;
	display: block;
	}
	</style>

	<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>
	<!--[if gt IE 7]>
	<style>body { overflow-y:scroll; } </style>
	<![endif]-->
	</head>

	<body>

	<div>
	<h1 style="text-align:center; font: bold 1.7em Arial;"><a href="http://www.if4it.com">The International Foundation for Information Technology (IF4IT)</a></h1>
	</div>

	<div class="div_Menu">
	<ul class="menuButton">
	<li><a href="http://www.if4it.com">HOME</a></li>
	<li><a href="http://www.if4it.com/resources.html">RESOURCES</a></li>
	<li><a href="http://www.if4it.com">PRODUCTS</a></li>
	<li><a href="http://www.if4it.com">SERVICES</a></li>
	<li><a href="http://www.if4it.com">SUPPORT</a></li>
	<li><a href="http://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="http://www.if4it.com">IF4IT Home</a></li>
	<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
	<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
	<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://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="http://www.if4it.com">IF4IT Home</a></li>
	<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
	<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
	<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://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 Density Chart in an HTML Page</h1>
	</div>
	<div class="div_RootBody" id="density_chart">
	</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>

	<script type="text/javascript">
	drawDensityTable("Noun Instance Density Overview", densitySet, "#density_chart", "MidnightBlue", "White");
	</script>

	</body>

	</html>
No results found