Skip to content

Instantly share code, notes, and snippets.

@Guerino1

Guerino1/index.html

Last active July 23, 2016 14:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Guerino1/3a51eeb95d3a8345bc27370e8c9d5b77 to your computer and use it in GitHub Desktop.
Save Guerino1/3a51eeb95d3a8345bc27370e8c9d5b77 to your computer and use it in GitHub Desktop.
Download ZIP
Generating Chevrons with D3 Polygons
Raw
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 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" />
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
<script type="text/javascript">
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);
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)
.transition()
.duration(3000)
.attr("points", transitionCoordinates);
};
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}
];
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);
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)
.transition()
.duration(3000)
.attr("points", transitionCoordinates);
};
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 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 = [
{"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 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 = [
{"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]
];
};
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","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 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 = [
{"label": "Phase 0", "link": "http://nounz.if4it.com/Nouns/Applications/A_Application_1.NodeCluster.html"},
{"label": "Phase 1", "link": "http://nounz.if4it.com/Nouns/Applications/A_Application_102.NodeCluster.html"},
{"label": "Phase 2", "link": "http://nounz.if4it.com/Nouns/Applications/A_Application_103.NodeCluster.html"},
{"label": "Phase 3", "link": "http://nounz.if4it.com/Nouns/Applications/A_Application_104.NodeCluster.html"},
{"label": "Phase 4", "link": "http://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]
];
};
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);
// 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>
<style type="text/css">
svg {
font: 10px sans-serif;
display: block;
}
</style>
<STYLE type="text/css">
/* 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>
<!--[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 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>
<script type="text/javascript">
drawSingleChevron("#root_div #chart1");
drawSingleChevronTransitionLeftToRight("#root_div #chart1b");
drawSingleChevronTransitionFromOrigin("#root_div #chart1c");
drawMultiplePresetChevrons("#root_div #chart2");
drawMultipleCalculatedChevrons("#root_div #chart3");
drawMultipleTransitioningCalculatedChevrons("#root_div #chart4");
drawMultipleTransitioningCalculatedChevronsWithText("#root_div #chart5");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment