D3 polygons for SDLC Infographic

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

function drawSDLC( selectString )
      {

// MOUSE
        var chevronMouseOver = function () {
          var thisObject = d3.select(this);
          var chevronSelectString = '#' + thisObject.attr("id");
          var selectedChevron = d3.selectAll(chevronSelectString);
          selectedChevron.style("fill", polygonMouseOverColor);

var textboxSelectString = chevronSelectString.replace("chevron_", "textbox_");
          var selectedTextbox = d3.selectAll(textboxSelectString);
          selectedTextbox.style("fill", textboxMouseOverColor);
        };

var chevronMouseOut = function () {
          var thisObject = d3.select(this);
          var chevronSelectString = '#' + thisObject.attr("id");
          var selectedChevron = d3.selectAll(chevronSelectString);
          var originalColor = selectedChevron.attr("originalcolor")
          selectedChevron.style("fill", originalColor);

var textboxSelectString = chevronSelectString.replace("chevron_", "textbox_");
          var selectedTextbox = d3.selectAll(textboxSelectString);
          originalColor = selectedTextbox.attr("originalcolor")
          selectedTextbox.style("fill", originalColor);
        };

var chevronTextMouseOver = function () {
          var thisObject = d3.select(this);
          var chevronSelectString = '#' + thisObject.attr("poly_id");
          var selectedChevron = d3.selectAll(chevronSelectString);
          selectedChevron.style("fill", polygonMouseOverColor);

var chevronTextMouseOut = function () {
          var thisObject = d3.select(this);
          var chevronSelectString = '#' + thisObject.attr("poly_id");
          var selectedChevron = d3.selectAll(chevronSelectString);
          var originalColor = selectedChevron.attr("originalcolor")
          selectedChevron.style("fill", originalColor);

var textboxMouseOver = function () {
          var thisObject = d3.select(this);
          var textboxSelectString = '#' + thisObject.attr("id");
          var selectedTextbox = d3.selectAll(textboxSelectString);
          selectedTextbox.style("fill", textboxMouseOverColor);

var chevronSelectString = textboxSelectString.replace("textbox_", "chevron_");
          var selectedChevron = d3.selectAll(chevronSelectString);
          selectedChevron.style("fill", polygonMouseOverColor);
        };

var textboxMouseOut = function () {
          var thisObject = d3.select(this);
          var textboxSelectString = '#' + thisObject.attr("id");
          var selectedTextbox = d3.selectAll(textboxSelectString);
          var originalColor = selectedTextbox.attr("originalcolor")
          selectedTextbox.style("fill", originalColor);

var chevronSelectString = textboxSelectString.replace("textbox_", "chevron_");
          var selectedChevron = d3.selectAll(chevronSelectString);
          originalColor = selectedChevron.attr("originalcolor")
          selectedChevron.style("fill", originalColor);
        };

var textboxTextMouseOver = function () {
          var thisObject = d3.select(this);
          var textboxSelectString = '#' + thisObject.attr("textbox_id");
          var selectedTextbox = d3.selectAll(textboxSelectString);
          selectedTextbox.style("fill", textboxMouseOverColor);

var textboxTextMouseOut = function () {
          var thisObject = d3.select(this);
          var textboxSelectString = '#' + thisObject.attr("textbox_id");
          var selectedTextbox = d3.selectAll(textboxSelectString);
          var originalColor = selectedTextbox.attr("originalcolor")
          selectedTextbox.style("fill", originalColor);

// DATA
        var dataSet = [
          {"phase": "Phase A", "name1": "Engage IT", "name2": "ENGAGE", "link": "https://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_A_Engage.4.html", "description": "This phase covers all activities that need to be performed in order to engage Information Technology (IT) teams for the purpose of delivering anything that must move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) process."},
          {"phase": "Phase B", "name1": "Strategy Development", "name2": "STRAT", "link": "https://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_B_Strategy.17.html", "description": "This phase covers key activities associated with developing strategy for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
          {"phase": "Phase C", "name1": "Research and Development", "name2": "R&D", "link": "https://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_C_Research_and_Solutions_Options.16.html", "description": "This phase covers key activities associated with performing research, studies and/or evaluations for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
          {"phase": "Phase D", "name1": "Planning", "name2": "PLAN", "link": "https://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_D_Planning.13.html", "description": "This phase covers key activities associated with planning work (e.g. Program, Project and Release Planning) for deliverables that move through the SDLC, such as but not limited to, Systems, Applications, Software, and Hardware."},
          {"phase": "Phase E", "name1": "Requirements Management", "name2": "REQs", "link": "https://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_E_Requirements.14.html", "description": "This phase covers key activities associated with performing Requirements Management work (e.g. collection, prioritization, analysis, etc.) for deliverable solutions that move through the SDLC, such as but not limited to, Systems, Applications, Software, and Hardware."},
          {"phase": "Phase F", "name1": "Design", "name2": "DES", "link": "https://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_F_Design.52.html", "description": "This phase covers key activities associated with performing Design work for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
          {"phase": "Phase G", "name1": "Work Space Development", "name2": "WS", "link": "https://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_G_Procure_and_Build_in_Workspaces.21.html", "description": "This phase covers key activities associated with performing Procurement and/or Building work (e.g. Purchasing, Hardware Construction and Software Coding) in Federated Workspace (WS) Environments for deliverables that move through the SDLC, such as but not limited to, Systems, Applications, Software, and Hardware."},
          {"phase": "Phase H", "name1": "Common Build", "name2": "BUILD", "link": "https://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_H_Common_Build_or_Centralized_Build.35.html", "description": "This phase covers key activities associated with performing Common Build or Centralized Build (BUILD) Environment work for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
          {"phase": "Phase I", "name1": "Integration Testing", "name2": "INTEG", "link": "https://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_I_Systems_Integration_Testing.35.html", "description": "This phase covers key activities associated with performing Systems Integration Testing (SIT) work (a.k.a. Integration Testing (INTEG) work) for deliverables that move through the SDLC, such as but not limited to, Systems, Applications, Software, and Hardware."},
          {"phase": "Phase J", "name1": "User Acceptance Testing", "name2": "UAT", "link": "https://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_J_User_Acceptance_Testing.35.html", "description": "This phase covers key activities associated with performing User Acceptance Testing (UAT) Environment work for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
          {"phase": "Phase K", "name1": "Education and Training", "name2": "EDU", "link": "https://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_K_Training_and_Education.35.html", "description": "This phase covers key activities associated with performing Training and Education (TRAIN/EDU) Environment work for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
          {"phase": "Phase L", "name1": "Product Release", "name2": "PROD", "link": "https://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_L_Production.35.html", "description": "This phase covers key activities associated with performing Production (PROD) Environment work for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
          {"phase": "Phase M", "name1": "Disaster Recovery Release", "name2": "DR", "link": "https://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_M_Disaster_Recovery.34.html", "description": "This phase covers key activities associated with performing Disaster Recovery (DR) or Business Continuity work for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
          {"phase": "Phase N", "name1": "Closing and Post Mortem", "name2": "CLOSE", "link": "https://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_N_Closing_and_Post_Mortem.7.html", "description": "This phase covers key activities associated with the ending of a Project or Release for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."}
        ];

// VARIABLES
        var polygonPrimaryColor = "MidnightBlue";
        var polygonMouseOverColor = "#96ACEE";
        var textboxMouseOverColor = "#B3C3F3"; // A few shades lighter
        var textboxColor = "#F6F8FE"; // A few shades even lighter

var svgMargin = 5;
        var chevronWidth = 90;
        var chevronTopOffset = 10;
        var chevronGapSpace = -5;
        var chevronDistance = chevronGapSpace + chevronWidth;
        var chevronPointYOffset = 20;
        var slantDepth = 10;
        var chevronHeight = chevronPointYOffset*2;
        var textboxHeight = chevronHeight;
        var textboxVerticalSpace = 3;
        var textboxVerticalOffset = 2*chevronTopOffset + chevronHeight;
        var textboxesOriginOffset = textboxVerticalSpace;

var svgWidth = (2 * svgMargin) + (dataSet.length * chevronWidth) - ((dataSet.length * slantDepth/2) - slantDepth);
        var svgChevronHeight = (2 * chevronTopOffset) + chevronHeight;
        var svgTextboxesHeight = (textboxVerticalSpace + textboxHeight) * dataSet.length + textboxVerticalSpace;

var chevronTop = chevronTopOffset;
        var chevronPointY = chevronTopOffset + chevronPointYOffset;
        var chevronBottom = chevronTopOffset + 2*chevronPointYOffset;

// FUNCTION
        function chevronOrigin(d, i){
          return [
            [0,chevronTop],
            [0,chevronTop],
            [0,chevronPointY],
            [0,chevronBottom],
            [0,chevronBottom],
            [0,chevronPointY]
          ];
        };

function calculateChevron(d, i){
          return [
            [(svgMargin) + i*(chevronDistance),chevronTopOffset],
            [(svgMargin + chevronWidth - slantDepth) + i*(chevronDistance),chevronTop],
            [(svgMargin + chevronWidth) + i*(chevronDistance),chevronPointY],
            [(svgMargin + chevronWidth - slantDepth) + i*(chevronDistance),chevronBottom],
            [(svgMargin) + i*(chevronDistance),chevronBottom],
            [(svgMargin + slantDepth) + i*(chevronDistance),chevronPointY]
          ];
        };

function textboxesOrigin(d, i){
          dataSet.forEach( function (d,i)
            {
              return [
                [0, textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))],
                [0, textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))],
                [0, (textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))) + textboxHeight],
                [0, (textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))) + textboxHeight]
              ];
            }
          );
        };

function calculateTextbox(d, i){
          return [
            [svgMargin, textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))],
            [svgWidth - 10, textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))],
            [svgWidth - 10, (textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))) + textboxHeight],
            [svgMargin, (textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))) + textboxHeight]
          ];
        };

var svgChevronsDiv = d3.select(selectString).append("div")
            .attr("id","if4it_chevrons");

var svgChevronsCanvas = svgChevronsDiv.append("svg")
                 .attr("width", svgWidth)
                 .attr("height", svgChevronHeight);

// Simply to help with debugging the svg canvas.
        //svgChevronsCanvas.append("rect")
            //.attr("width", "100%")
            //.attr("height", "100%")
            //.attr("fill", "GreenYellow");

// Create Polygons for SDLC
        svgChevronsCanvas.selectAll("a")
            .data(dataSet)
          .enter().append("a")
            .attr("xlink:href", function(d) { return d.link; })
          .append("svg:polygon")
            .attr("id", function(d,i){ return ("chevron_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
            .attr("originalcolor", polygonPrimaryColor)
            //.style("stroke","blue")
            //.style("stroke-width",1)
            .style("fill", polygonPrimaryColor)
            .attr("points", chevronOrigin)
            .on('mouseover', chevronMouseOver)
            .on("mouseout", chevronMouseOut)
            .on("click", chevronMouseOut)
            .transition()
            .duration(3000)
            .attr("points", calculateChevron);

// Create Phase text elements
        svgChevronsCanvas.selectAll("g")
            .data(dataSet)
          .enter().append("svg:g")
            .attr("poly_id", function(d,i){ return ("chevron_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
            .on('mouseover', chevronTextMouseOver)
            .on("mouseout", chevronTextMouseOut)
          .append("a")
            .attr("xlink:href", function(d) { return d.link; })
          .append("text")
            .attr("poly_id", function(d,i){ return ("chevron_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
            .attr("x", 0)
            .attr("y", function(){ return (chevronTopOffset + chevronPointYOffset); })
            .attr("dx", function(d) { return -1 * chevronGapSpace; })
            .attr("dy", -2)
            .attr("text-anchor", "middle") // text-align: start|middle|end|inherit
            .style("font-family","Verdana")
            .style("font-size","1.2em")
            .style("font-weight","bold")// normal|bold|bolder|lighter|100|200|...|700|800|900|inherit
            .text(function(d) { return d.phase + ":";})
            .attr("fill", "White")
            .on('mouseover', chevronTextMouseOver)
            .on("mouseout", chevronTextMouseOut)
            .on("click", chevronTextMouseOut)
            .transition()
            .duration(3000)
            .attr("x", function(d,i){ return ((svgMargin + chevronDistance/2) + i*(chevronDistance)); });

// Create short name (name2) text elements
        svgChevronsCanvas.selectAll("g")
            .data(dataSet)
          .append("g") // No need to enter, again and "svg" is already declared in previous section
            .attr("poly_id", function(d,i){ return ("chevron_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
            .on('mouseover', chevronTextMouseOver)
            .on("mouseout", chevronTextMouseOut)
            .on("click", chevronTextMouseOut)
          .append("a")
            .attr("xlink:href", function(d) { return d.link; })
          .append("text")
            .attr("poly_id", function(d,i){ return ("chevron_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
            .attr("x", 0)
            .attr("y", function(){ return (chevronTopOffset + chevronPointYOffset); })
            .attr("dx", function(d) { return -1 * chevronGapSpace; })
            .attr("dy", 11)
            .attr("text-anchor", "middle") // text-align: start|middle|end|inherit
            .style("font-family","Verdana")
            .style("font-size","1.2em")
            .style("font-weight","bold") // normal|bold|bolder|lighter|100|200|...|700|800|900|inherit
            .text(function(d) { return d.name2;})
            .attr("fill", "White")
            .on('mouseover', chevronTextMouseOver)
            .on("mouseout", chevronTextMouseOut)
            .on("click", chevronTextMouseOut)
            .transition()
            .duration(3000)
            .attr("x", function(d,i){ return ((svgMargin + chevronDistance/2) + i*(chevronDistance)); });

// Start textboxes
        var svgTextboxesDiv = d3.select(selectString).append("div")
            .attr("id","if4it_textboxes");

var svgTextboxesCanvas = svgTextboxesDiv.append("svg")
                 .attr("width", svgWidth)
                 .attr("height", svgTextboxesHeight);

// Simply to help with debugging the svg canvas.
        //svgTextboxesCanvas.append("rect")
            //.attr("width", "100%")
            //.attr("height", "100%")
            //.attr("fill", "gold");

// Create Polygons for SDLC
        svgTextboxesCanvas.selectAll("a")
            .data(dataSet)
          .enter().append("a")
            .attr("xlink:href", function(d) { return d.link; })
          .append("svg:polygon")
            .attr("id", function(d,i){ return ("textbox_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
            .attr("originalcolor", textboxColor)
            .style("stroke", textboxColor)
            .style("stroke-width",1)
            .style("fill", textboxColor)
            .attr("points", textboxesOrigin)
            .on('mouseover', textboxMouseOver)
            .on("mouseout", textboxMouseOut)
            .on("click", textboxMouseOut)
            .transition()
            .duration(3000)
            .attr("points", calculateTextbox);

// Create textbox text elements
        svgTextboxesCanvas.selectAll("g")
            .data(dataSet)
          .enter().append("svg:g")
            .attr("textbox_id", function(d,i){ return ("textbox_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
          .append("a")
            .attr("xlink:href", function(d) { return d.link; })
          .append("text")
            .attr("textbox_id", function(d,i){ return ("textbox_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
            .attr("x", svgMargin + 10)
            //.attr("x", -100)
            .attr("y", function(d,i){ return ((textboxesOriginOffset + 20 + (i * (textboxHeight + textboxVerticalSpace)))); })
            .attr("dx", 0)
            .attr("dy", -2)
            .attr("text-anchor", "start") // text-align: start|middle|end|inherit
            .style("font-family","Verdana")
            .style("font-size","1.2em")
            .style("font-weight","normal")// normal|bold|bolder|lighter|100|200|...|700|800|900|inherit
            //.text(function(d) { return (d.phase + ": " + d.name1 + " (" + d.name2 + ") - " + d.description); })
            .attr("fill", "Black")
            .on('mouseover', textboxTextMouseOver)
            .on("mouseout", textboxTextMouseOut)
            .on("click", textboxTextMouseOut)
            .call(wrap, (svgWidth - 6*svgMargin))
            .transition()
            .duration(3000)
            .attr("x", (svgMargin + 10));

};

// END
    </script>

/* unvisited link */
      a:link {
        color: "blue";
        text-decoration: none;
      }

/* visited link */
      a:visited {
        color: "darkblue";
        text-decoration: none;
      }

/* mouse over link */
      a:hover {
        color: "maroon";
        text-decoration: none;
      }

/* selected link */
      a:active {
        color: "maroon";
        text-decoration: none;
      }

div.div_Header {
        width: 100%;
        border:2px solid White;
        border-radius:7px;
        background: WhiteSmoke;
        font: bold 14px Arial;
        font-family:Arial, Helvetica, sans-serif;
        color:WhiteSmoke;
        text-align:center;
      }
      h1.h1_BodyHeader {
        text-align:center;
        font: bold 1.5em Arial;
      }
      h2.h2_LeftMenuHeader {
        text-align:center;
        font: bold 1.2em Arial;
      }
      h3.h3_Body {
        text-align:center;
      }
      p.p_Red {
        color:Red;
      }
      table.table_Header {
        width: 100%;
        text-align:center;
      }
      td.td_HeaderLeft {
        text-align:left;
      }
      td.td_HeaderRight {
        text-align:right;
      }
      div.div_Menu {
        width: 100%;
        border:2px solid White;
        border-radius:7px;
        background: MidnightBlue;
        font: bold 14px Arial;
        font-family:Arial, Helvetica, sans-serif;
        color:White;
        text-align:center;
      }
      p.p_Left {
        font-family:Arial, Helvetica, sans-serif;
        color:Black;
        text-align:left;
        padding-left: 5px;
        font: normal 14px Arial;
      }
      table.table_Body {
        width: 100%;
        height: 100%;
        padding: 0;
      }
      td.td_BodyLeft {
        width: 250px;
        height: 100%;
        padding: 0;
      }
      td.td_BodyRight {
        vertical-align: top;
      }
      li.li_LeftMenu {
        text-align:left;
        font: normal 14px Arial;
      }
      a.a_LeftMenuNoUnderLine {
        text-decoration:  none;
      }
      div.div_Body {
        height: 100%;
        width: 100%;
        position: relative;
        border:2px solid White;
        border-radius:7px;
        background: WhiteSmoke;
        font: bold 14px Arial;
        font-family:Arial, Helvetica, sans-serif;
        color:Black;
        text-align:center;
      }
      div.div_Footer {
        width: 100%;
        border:2px solid White;
        border-radius:7px;
        background: MidnightBlue;
        font: bold 14px Arial;
        font-family:Arial, Helvetica, sans-serif;
        color:White;
        text-align:center;
      }
      p.p_if4itMessage {
        width: 100%;
        background: White;
        font: bold .75em Arial;
        font-family:Arial, Helvetica, sans-serif;
        color:GoldenRod;
        text-align:center;
      }
      .menuButton{
        background-color: MidnightBlue;
      }
      .menuButton li{
        height: 100%;
        list-style: none;
        display: inline;
      }
      .menuButton li a{
        height: 100%;
        padding: 3px 0.5em;
        text-decoration: none;
        color: White;
        background-color: MidnightBlue;
        border: 2px solid MidnightBlue;
      }
      .menuButton li a:hover{
        height: 100%;
        color: MidnightBlue;
        background-color: White;
        border-style: outset;
        background-color: White;
      }
      .menuButton li a:active{
        height: 100%;
        border-style: inset;
        color: MidnightBlue;
        background-color: White;
      }
      .menuButton li a.disabled{
        height: 100%;
        padding: 3px 0.5em;
        text-decoration: none;
        color: MidnightBlue;
        background-color: White;
        border: 2px solid MidnightBlue;
        border-style: inset;
        border-color: White;
      }
    </STYLE>

<STYLE type="text/css">
      div.div_RootBody {
        position: relative;
        border:2px solid White;
        border-radius:7px;
        background: WhiteSmoke;
        font: normal 14px Arial;
        font-family:Arial, Helvetica, sans-serif;
        color:Black;
        padding: 0px 1em;
        text-align:left;
      }
    </STYLE>
    
  </head>

<body>

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

<div class="div_Menu">
        <ul class="menuButton">
          <li><a href="https://www.if4it.com">HOME</a></li>
          <li><a href="https://www.if4it.com/resources.html">RESOURCES</a></li>
          <li><a href="https://www.if4it.com">PRODUCTS</a></li>
          <li><a href="https://www.if4it.com">SERVICES</a></li>
          <li><a href="https://www.if4it.com">SUPPORT</a></li>
          <li><a href="https://www.if4it.com">HELP</a></li>
        </ul>
      </div>
      <table class="table_Body">
        <tr>
          <td class="td_BodyLeft">
            <div class="div_Body">
              <h2 class="h2_LeftMenuHeader">Sample Left Menu Links</h2>
              <ul>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com">IF4IT Home</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/taxonomy.html">IF4IT Taxonomies</a></li>
              </ul>
              <p class="p_Left">This is dummy paragraph 1 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 2 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 3 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 4 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 5 text that would go in this section of the page.</p>
              <ul>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com">IF4IT Home</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
                <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/taxonomy.html">IF4IT Taxonomies</a></li>
              </ul>
              <p class="p_Left">This is dummy paragraph 1 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 2 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 3 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 4 text that would go in this section of the page.</p>
              <p class="p_Left">This is dummy paragraph 5 text that would go in this section of the page.</p>
            </div>
          </td>
          <td class="td_BodyRight">
            <div class="div_RootBody">
              <h1 style="text-align:center; font: bold 1.5em Arial;">D3 based Chevrons using Polygon for SDLC Phases</h1>
            </div>

<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