All examples By author By category About

Guerino1

Full window Github gist

Generating Chevrons with D3 Polygons

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

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

var chevronMouseOver = function () {
        var thisObject = d3.select(this);
        var chevronSelectString = '#' + thisObject.attr("id");
        var selectedChevron = d3.selectAll(chevronSelectString);
        selectedChevron.style("fill", "Red");
        //document.writeln("test1");
      };

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

function drawSingleChevron( selectString )
      {

var svgWidth = 300;
        var svgHeight = 100;
        var svgMargin = 10;
        var chevronWidth = 150;
        var chevronHeight = 30;
        var chevronTopOffset = 10;

var dataSet = [
         {"x": svgMargin, "y": chevronTopOffset},
         {"x": svgMargin + chevronWidth - 10, "y": chevronTopOffset},
         {"x": svgMargin + chevronWidth, "y": chevronTopOffset + 20},
         {"x": svgMargin + chevronWidth - 10, "y": chevronTopOffset + 40},
         {"x": svgMargin, "y": chevronTopOffset + 40},
         {"x": svgMargin + 10, "y": chevronTopOffset + 20}
        ];

var svgCanvas = d3.select(selectString).append("svg")
                 .attr("width", svgWidth)
                 .attr("height", svgHeight);

svgCanvas.selectAll("polygon")
            .data([dataSet])
          .enter().append("polygon")
            .attr("points",function(d) { 
                return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");
            })
            .attr("id", function(d,i){ return (selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
            .attr("originalcolor","yellow")
            .style("stroke","blue")
            .style("fill","yellow")
            .style("stroke-width",2)
            .on('mouseover', chevronMouseOver)
            .on("mouseout", chevronMouseOut);

};

function drawSingleChevronTransitionLeftToRight( selectString )
      {

var svgWidth = 300;
        var svgHeight = 100;
        var svgMargin = 10;
        var chevronWidth = 150;
        var chevronHeight = 30;
        var chevronTopOffset = 10;

var dataSet = [
         // Notice that "x" is set to left margin
         {"x": 0, "y": chevronTopOffset},
         {"x": 0, "y": chevronTopOffset},
         {"x": 0, "y": chevronTopOffset + 20},
         {"x": 0, "y": chevronTopOffset + 40},
         {"x": 0, "y": chevronTopOffset + 40},
         {"x": 0, "y": chevronTopOffset + 20}
        ];

function transitionCoordinates(d, i){
          return [
            [svgMargin, chevronTopOffset],
            [svgMargin + chevronWidth - 10, chevronTopOffset],
            [svgMargin + chevronWidth, chevronTopOffset + 20],
            [svgMargin + chevronWidth - 10, chevronTopOffset + 40],
            [svgMargin, chevronTopOffset + 40],
            [svgMargin + 10, chevronTopOffset + 20]
          ];
        };

var svgCanvas = d3.select(selectString).append("svg")
                 .attr("width", svgWidth)
                 .attr("height", svgHeight);

};

function drawSingleChevronTransitionFromOrigin( selectString )
      {

var svgWidth = 300;
        var svgHeight = 100;
        var svgMargin = 10;
        var chevronWidth = 150;
        var chevronHeight = 30;
        var chevronTopOffset = 10;

var dataSet = [
         // Notice that "x" is set to left margin
         {"x": 0, "y": 0},
         {"x": 0, "y": 0},
         {"x": 0, "y": 0},
         {"x": 0, "y": 0},
         {"x": 0, "y": 0},
         {"x": 0, "y": 0}
        ];

var svgCanvas = d3.select(selectString).append("svg")
                 .attr("width", svgWidth)
                 .attr("height", svgHeight);

};

function drawMultiplePresetChevrons( selectString )
      {

var svgWidth = 1000;
        var svgHeight = 100;
        var svgMargin = 10;
        var chevronWidth = 150;
        var chevronHeight = 30;
        var chevronTopOffset = 10;
        var chevronGapSpace = 5;
        var chevronDistance = chevronGapSpace + chevronWidth;
        var chevronPointYOffset = 20;
        var slantDepth = 10;

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

var dataSet = [
         [
           {"x": svgMargin + 0*(chevronDistance), "y": chevronTopOffset},
           {"x": (svgMargin + chevronWidth - slantDepth) + 0*(chevronDistance), "y": chevronTop},
           {"x": (svgMargin + chevronWidth) + 0*(chevronDistance), "y": chevronPointY},
           {"x": (svgMargin + chevronWidth - slantDepth) + 0*(chevronDistance), "y": chevronBottom},
           {"x": (svgMargin) + 0*(chevronDistance), "y": chevronBottom},
           {"x": (svgMargin + slantDepth) + 0*(chevronDistance), "y": chevronPointY}
         ],
         [
           {"x": svgMargin + 1*(chevronDistance), "y": chevronTopOffset},
           {"x": (svgMargin + chevronWidth - slantDepth) + 1*(chevronDistance), "y": chevronTop},
           {"x": (svgMargin + chevronWidth) + 1*(chevronDistance), "y": chevronPointY},
           {"x": (svgMargin + chevronWidth - slantDepth) + 1*(chevronDistance), "y": chevronBottom},
           {"x": (svgMargin) + 1*(chevronDistance), "y": chevronBottom},
           {"x": (svgMargin + slantDepth) + 1*(chevronDistance), "y": chevronPointY}
         ],
         [
           {"x": svgMargin + 2*(chevronDistance), "y": chevronTopOffset},
           {"x": (svgMargin + chevronWidth - slantDepth) + 2*(chevronDistance), "y": chevronTop},
           {"x": (svgMargin + chevronWidth) + 2*(chevronDistance), "y": chevronPointY},
           {"x": (svgMargin + chevronWidth - slantDepth) + 2*(chevronDistance), "y": chevronBottom},
           {"x": (svgMargin) + 2*(chevronDistance), "y": chevronBottom},
           {"x": (svgMargin + slantDepth) + 2*(chevronDistance), "y": chevronPointY}
         ],
         [
           {"x": svgMargin + 3*(chevronDistance), "y": chevronTopOffset},
           {"x": (svgMargin + chevronWidth - slantDepth) + 3*(chevronDistance), "y": chevronTop},
           {"x": (svgMargin + chevronWidth) + 3*(chevronDistance), "y": chevronPointY},
           {"x": (svgMargin + chevronWidth - slantDepth) + 3*(chevronDistance), "y": chevronBottom},
           {"x": (svgMargin) + 3*(chevronDistance), "y": chevronBottom},
           {"x": (svgMargin + slantDepth) + 3*(chevronDistance), "y": chevronPointY}
         ],
        ];

var svgCanvas = d3.select(selectString).append("svg")
                 .attr("width", svgWidth)
                 .attr("height", svgHeight);

svgCanvas.selectAll("polygon")
            .data(dataSet)
          .enter().append("polygon")
            .attr("points",function(d,i) { 
                return d.map(
                  function(d) {
                    return [d.x,d.y].join(",");
                  }
                ).join(" ");
            })
            .attr("id", function(d,i){ return (selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
            .attr("originalcolor","orange")
            .style("stroke","blue")
            .style("fill","orange")
            .style("stroke-width",2)
            .on('mouseover', chevronMouseOver)
            .on("mouseout", chevronMouseOut);

};

function drawMultipleCalculatedChevrons( selectString )
      {

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

var dataSet = [
          {"label": "Node 0"},
          {"label": "Node 1"},
          {"label": "Node 2"},
          {"label": "Node 3"},
          {"label": "Node 4"}
        ];

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

var svgCanvas = d3.select(selectString).append("svg")
                 .attr("width", svgWidth)
                 .attr("height", svgHeight);

svgCanvas.selectAll("polygon")
            .data(dataSet)
          .enter().append("polygon")
            .attr("id", function(d,i){ return (selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
            .attr("originalcolor","lightgreen")
            .style("stroke","blue")
            .style("fill","lightgreen")
            .style("stroke-width",2)
            .attr("points", calculateChevron)
            .on('mouseover', chevronMouseOver)
            .on("mouseout", chevronMouseOut);

};

function drawMultipleTransitioningCalculatedChevrons( selectString )
      {

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

var dataSet = [
          {"label": "Node 0"},
          {"label": "Node 1"},
          {"label": "Node 2"},
          {"label": "Node 3"},
          {"label": "Node 4"}
        ];

function origin(d, i){
          return [
            [0,0],
            [0,0],
            [0,0],
            [0,0],
            [0,0],
            [0,0]
          ];
        };

var svgCanvas = d3.select(selectString).append("svg")
                 .attr("width", svgWidth)
                 .attr("height", svgHeight);

svgCanvas.selectAll("polygon")
            .data(dataSet)
          .enter().append("polygon")
            .attr("id", function(d,i){ return (selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
            .attr("originalcolor","skyblue")
            .style("stroke","blue")
            .style("fill","skyblue")
            .style("stroke-width",2)
            .attr("points", origin)
            .on('mouseover', chevronMouseOver)
            .on("mouseout", chevronMouseOut)
            .transition()
            .duration(3000)
            .attr("points", calculateChevron);

};

function drawMultipleTransitioningCalculatedChevronsWithText( selectString )
      {

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

var dataSet = [
          {"label": "Phase 0", "link": "https://nounz.if4it.com/Nouns/Applications/A_Application_1.NodeCluster.html"},
          {"label": "Phase 1", "link": "https://nounz.if4it.com/Nouns/Applications/A_Application_102.NodeCluster.html"},
          {"label": "Phase 2", "link": "https://nounz.if4it.com/Nouns/Applications/A_Application_103.NodeCluster.html"},
          {"label": "Phase 3", "link": "https://nounz.if4it.com/Nouns/Applications/A_Application_104.NodeCluster.html"},
          {"label": "Phase 4", "link": "https://nounz.if4it.com/Nouns/Applications/A_Application_105.NodeCluster.html"}
        ];

function origin(d, i){
          return [
            [0,0],
            [0,0],
            [0,0],
            [0,0],
            [0,0],
            [0,0]
          ];
        };

var svgCanvas = d3.select(selectString).append("svg")
                 .attr("width", svgWidth)
                 .attr("height", svgHeight);

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

// Create Phase text elements
        svgCanvas.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', chevronMouseOver)
            .on("mouseout", chevronMouseOut)
          .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", -100)
            .attr("y", -100)
            .attr("dx", function(d) { return (-1 * chevronGapSpace) + 4; })
            .attr("dy", 5)
            .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.label + ":";})
            .attr("fill", "Blue")
            .on('mouseover', chevronMouseOver)
            .on("mouseout", chevronMouseOut)
            .on("click", chevronMouseOut)
            .transition()
            .duration(1000)
            .delay(function(d, i) { return i*400; })
            .attr("x", function(d,i){ return ((svgMargin + chevronDistance/2) + i*(chevronDistance)); })
            .attr("y", function(){ return (chevronTopOffset + chevronPointYOffset); });

};

</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</h1>
              <p>This page represents numerous examples of drawing chevrons with D3 Polygon, embedded within different areas of an HTML page.  Each div is a different example with seperate data and code.  Simply view the page source for code examples.  If you can think of ways to add more examples to this page, please feel free to reach out via Git and we can help do so.</p>
            </div>

<table class="table_Header">
              <tr>
                <td width="50%" height="100%">
                  <div class="div_RootBody" id="root_div">
                    <p>A single chevron.</p>
                    <div id="chart1"></div>
                  </div>
                </td>
                <td width="50%" height="100%">
                  <div class="div_RootBody" id="root_div">
                    <p>A single transitioning chevron, left to right.</p>
                    <div id="chart1b"></div>
                  </div>
                </td>
                <td width="50%" height="100%">
                  <div class="div_RootBody" id="root_div">
                    <p>A single transitioning chevron, from origin.</p>
                    <div id="chart1c"></div>
                  </div>
                </td>
              </tr>
            </table>

<div class="div_RootBody" id="root_div">
              <p>Multiple predetermined chevrons.</p>
              <div id="chart2"></div>
            </div>
            <div class="div_RootBody" id="root_div">
              <p>Multiple chevrons calculated from data array index position.</p>
              <div id="chart3"></div>
            </div>
            <div class="div_RootBody" id="root_div">
              <p>Multiple transitioning chevrons calculated from data array index position.</p>
              <div id="chart4"></div>
            </div>
            <div class="div_RootBody" id="root_div">
              <p>Multiple transitioning chevrons calculated from data array index position, with text and HTML hyperlinks.  Also includes a delay between transitions.</p>
              <div id="chart5"></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