Skip to content

Instantly share code, notes, and snippets.

@Guerino1

Guerino1/index.html

Last active August 29, 2015 14:02
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/ed80661daf8e5fa89b85 to your computer and use it in GitHub Desktop.
Save Guerino1/ed80661daf8e5fa89b85 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Tree embedded in HTML Page
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 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" />
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5" charset="utf-8"></script>
<script type="text/javascript">
// Data Used for this example...
var nodeSet = [
{id: "N0", name: "Your Enterprise", type: "Organization", rSize: 100, hlink: "http://nounz.if4it.com"},
{id: "N1", name: "Ability to Market Our Products", type: "Capability", rSize: 1000, hlink: "http://nounz.if4it.com/Nouns/Capabilities/Ability_to_Market_Our_Products.NodeCluster.html"},
{id: "N2", name: "Ability to Market Our Products to Private Sector", type: "Capability", rSize: 150, hlink: "http://nounz.if4it.com/Nouns/Capabilities/Ability_to_Market_Our_Products_to_Private_Sector.NodeCluster.html"},
{id: "N3", name: "Sales System XYZ", type: "Application", rSize: 3000, hlink: "file:///Users/guerino/GUERINO%20WORK/Web/NOUNZ/INTRANET/HTML/Nouns/Applications/A_Application_1.NodeCluster.html"},
{id: "N4", name: "United States", type: "Country", rSize: 30, hlink: "file:///Users/guerino/GUERINO%20WORK/Web/NOUNZ/INTRANET/HTML/Nouns/Countries/United_States.NodeCluster.html"},
{id: "N5", name: "John Smith", type: "Person", rSize: 500, hlink: "http://nounz.if4it.com/Nouns/Resources/Smith_John.html"},
{id: "N6", name: "Jane Doe", type: "Person", rSize: 2000, hlink: "http://nounz.if4it.com/Nouns/Resources/Doe_Jane.html"},
{id: "N7", name: "Manufacturing", type: "Organization", rSize: 0, hlink: "http://nounz.if4it.com/Nouns/Organizations/Organization_E.NodeCluster.html"},
{id: "N8", name: "Ability to Manufacture Product", type: "Capability", rSize: 200, hlink: "http://nounz.if4it.com/Nouns/Capabilities/Ability_to_Manufacture_Product.html"},
{id: "N9", name: "Product 1", type: "Product", rSize: 300, hlink: "http://nounz.if4it.com/Nouns/Products/Product_1.html"},
{id: "N10", name: "Product 2", type: "Product", rSize: 90, hlink: "http://nounz.if4it.com/Nouns/Products/Product_2.html"}
];
var linkSet = [
{source: "N0", predicate: "Very very long Predicate name 1", target: "N1"},
{source: "N1", predicate: "Predicate 2", target: "N2"},
{source: "N2", predicate: "Very very long Predicate name 3", target: "N3"},
{source: "N0", predicate: "Predicate 4", target: "N4"},
{source: "N4", predicate: "Predicate 5", target: "N5"},
{source: "N0", predicate: "Predicate 6", target: "N6"},
{source: "N6", predicate: "Very very long Predicate name 7", target: "N7"},
{source: "N6", predicate: "Predicate 8", target: "N8"},
{source: "N7", predicate: "Predicate 9", target: "N9"},
{source: "N7", predicate: "Predicate 10", target: "N10"}
];
function drawTree( drawingName, nodeSet, linkSet, selectString, colors, margin) {
// drawingName => A unique drawing identifier that has no spaces, no "." and no "#" characters.
// nodeSet => Set of nodes and their relevant data.
// selectString => String that allows you to pass in
// a D3 select string.
// colors => String to set color scale. Values can be...
// => "colorScale10"
// => "colorScale20"
// => "colorScale20b"
// => "colorScale20c"
// margin => Integer margin offset value.
// outerRadius => Integer outer radius value.
// innerRadius => Integer inner radius value.
// sortArcs => Controls sorting of Arcs by value.
// 0 = No Sort. Maintain original order.
// 1 = Sort by arc value size.
// Color Scale Handling...
var colorScale = d3.scale.category20c();
switch (colors)
{
case "colorScale10":
colorScale = d3.scale.category10();
break;
case "colorScale20":
colorScale = d3.scale.category20();
break;
case "colorScale20b":
colorScale = d3.scale.category20b();
break;
case "colorScale20c":
colorScale = d3.scale.category20c();
break;
default:
colorScale = d3.scale.category20c();
};
var m = [20, 120, 20, 120],
w = 1280 - m[1] - m[3],
h = 800 - m[0] - m[2],
i = 0,
root;
var defaultNodeSize = 5.5;
var horizontalTreeOffset = 150;
var horizontalNodeOffset = horizontalTreeOffset - 10;
var horizontalNodeOffsetLeaf = horizontalTreeOffset + 10;
var densityControlTitleHorizontalOffset = m[0]/4;
var legendTitleHorizontalOffset = densityControlTitleHorizontalOffset;
var densityControlTitleVerticalOffset = m[1]/4;
var legendTitleVerticalOffset = densityControlTitleVerticalOffset + 55;
var densityControlOffset = (-h/2+30);
var densityControlSet = [
{controlName: "On"},
{controlName: "Off"}
];
var densityControlState = 0;
var max_scale_value = 0;
var min_scale_value = 100000;
// Create a nodeByNameHash...
var nodesByIdHash = [];
// Create a hash that maps colors to types...
var color_hash = [];
// Set up hashes
nodeSet.forEach(function(d, i) {
nodesByIdHash[d.id] = d;
color_hash[d.type] = d.type;
//document.writeln(color_hash[d.type]);
if(d.rSize > max_scale_value)
{
max_scale_value = d.rSize;
}
if(d.rSize < min_scale_value)
{
min_scale_value = d.rSize;
}
});
// Create a nodeByNameHash...
var linksByIdHash = [];
linkSet.forEach(function(d, i) {
linksByIdHash[d.source + ":" + d.target] = d;
});
if(min_scale_value < 5) { min_scale_value = 5; } // Non-Zero lower end of scale
var rRange = d3.scale.linear().domain([min_scale_value,max_scale_value]).range([5,100]);
function keys(obj)
{
var keys = [];
for(var key in obj)
{
if(obj.hasOwnProperty(key))
{
keys.push(key);
}
}
return keys;
}
// Create a set of sorted keys...
var sortedKeys = keys(color_hash).sort();
sortedKeys.forEach(function(d, i) {
color_hash[d] = colorScale(i);
//document.writeln(color_hash[d]);
});
// Add colors to original node records...
nodeSet.forEach(function(d,i) {
d.color = color_hash[d.type];
//document.writeln(d.type);
});
var densityMouseOver = function() {
var thisObject = d3.select(this);
var typeValue = thisObject.attr("density_type");
var densityBulletSelector = "." + "densityControlBullet-" + typeValue;
var selectedBullet = d3.selectAll(densityBulletSelector);
//document.writeln(legendBulletSelector);
selectedBullet.attr("r", 1.2*6);
var densityTextSelector = "." + "densityControlText-" + typeValue;
var selectedDensityText = d3.selectAll(densityTextSelector);
//document.writeln(legendBulletSelector);
selectedDensityText.style("font", "bold 14px Arial")
}
var densityMouseOut = function() {
var thisObject = d3.select(this);
var typeValue = thisObject.attr("density_type");
var densityBulletSelector = "." + "densityControlBullet-" + typeValue;
var selectedBullet = d3.selectAll(densityBulletSelector);
//document.writeln(legendBulletSelector);
selectedBullet.attr("r", 6);
var densityTextSelector = "." + "densityControlText-" + typeValue;
var selectedDensityText = d3.selectAll(densityTextSelector);
//document.writeln(legendBulletSelector);
selectedDensityText.style("font", "normal 14px Arial")
}
var densityControlClick = function() {
var thisObject = d3.select(this);
var typeValue = thisObject.attr("density_type");
var oppositeTypeValue = (function() {
if(typeValue=="On") {
return "Off";
densityControlState = 0;
} else {
return "On";
densityControlState = 1;
}
})();
var densityBulletSelector = "." + "densityControlBullet-" + typeValue;
var selectedBullet = d3.selectAll(densityBulletSelector);
selectedBullet.style("fill", "Black")
var oppositeDensityBulletSelector = "." + "densityControlBullet-" + oppositeTypeValue;
var selectedOppositeBullet = d3.selectAll(oppositeDensityBulletSelector);
selectedOppositeBullet.style("fill", "White")
if(typeValue=="On") {
var selectedNodeCircles = d3.selectAll("#NODE");
selectedNodeCircles.transition().duration(500).attr("r", function(d){ return rRange(d.rSize); });
}
else {
var selectedNodeCircles = d3.selectAll("#NODE");
selectedNodeCircles.transition().duration(500).attr("r", defaultNodeSize);
}
}
// Create a tree layout...
var tree = d3.layout.tree()
.size([h, w]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y + horizontalTreeOffset, d.x]; });
var vis = d3.select(selectString).append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.attr("class", "treeCanvas");
// Print Density Control Title...
vis.append("svg:text")
.attr("class","region")
.text("Relationship Density Control:")
.attr("x", densityControlTitleHorizontalOffset)
.attr("y", densityControlTitleVerticalOffset)
.style("fill", "Black")
.style("font", "bold 16px Arial")
.attr("text-anchor","start");
// Plot the Density Control Circles for Bullets...
var densityBulletCircles = vis.selectAll("treeCanvas")
.data(densityControlSet)
.enter().append("svg:circle")
.attr("cx", function(d) { if(d.controlName=="On") {return (densityControlTitleHorizontalOffset + 20);} else {return (densityControlTitleHorizontalOffset + 70);} })
.attr("cy", (densityControlTitleVerticalOffset + 20))
.attr("stroke-w", ".6")
.attr("rSize", function(d, i) { return d.rSize; })
.style("stroke", "Black" )
.style("fill", function(d) { if(d.controlName=="On") {return "White";} else {return "Black";} })
.attr("r", 6)
.attr("density_type", function(d) { return d.controlName; })
.attr("class", function(d) { return "densityControlBullet-" + d.controlName; })
.on("mouseover", densityMouseOver)
.on("mouseout", densityMouseOut)
.on("click", densityControlClick);
// Create Density Control Text...
var densityBulletText = vis.selectAll("treeCanvas")
.data(densityControlSet)
.enter().append("svg:text") // Append legend elements
.attr("text-anchor", "center")
.attr("x", function(d) { if(d.controlName=="On") {return (densityControlTitleHorizontalOffset + 30);} else {return (densityControlTitleHorizontalOffset + 80);} })
.attr("y", (densityControlTitleVerticalOffset + 20))
.attr("dx", 0)
.attr("dy", "5px") // Controls padding to place text in alignment with bullets
.text(function(d) { return d.controlName;})
.attr("density_type", function(d) { return d.controlName; })
.attr("class", function(d) {
return "densityControlText-" + d.controlName; })
.style("fill", "Black")
.style("font", "normal 14px Arial")
.on("mouseover", densityMouseOver)
.on("mouseout", densityMouseOut);
// Print Node Type Legend Title...
vis.append("svg:text")
.attr("class","region")
.text("Node Type Key:")
.attr("x", legendTitleHorizontalOffset)
.attr("y", legendTitleVerticalOffset)
.style("fill", "Black")
.style("font", "bold 16px Arial")
.attr("text-anchor","start");
// Plot the Node Type Ledgend bullet circles...
var densityBulletCircles = vis.selectAll("treeCanvas")
.data(sortedKeys).enter().append("svg:circle") // Append circle elements
.attr("cx", legendTitleHorizontalOffset + 20)
.attr("cy", function(d, i) { return (legendTitleVerticalOffset + 20 + i*20); } )
.attr("stroke-width", ".5")
.style("fill", function(d, i) { return color_hash[d]; })
.attr("r", 6)
.attr("color_value", function(d, i) { return color_hash[d]; })
.attr("type_value", function(d, i) { return d; })
.attr("index_value", function(d, i) { return "index-" + i; })
.attr("class", function(d) {
var str = d;
var strippedString = str.replace(/ /g, "_")
return "legendBullet-" + strippedString; });
//.on('mouseover', typeMouseOver)
//.on("mouseout", typeMouseOut);
// Create legend text that acts as label keys...
var densityBulletText = vis.selectAll("treeCanvas")
.data(sortedKeys) // Instruct to bind dataSet to text elements
.enter().append("svg:a") // Append legend elements
.append("text")
.attr("text-anchor", "center")
.attr("x", legendTitleHorizontalOffset + 30)
.attr("y", function(d, i) { return (legendTitleVerticalOffset + 20 + i*20); } )
.attr("dx", 0)
.attr("dy", "5px") // Controls padding to place text in alignment with bullets
.text(function(d) { return d;})
.attr("color_value", function(d, i) { return color_hash[d]; })
.attr("type_value", function(d, i) { return d; })
.attr("index_value", function(d, i) { return "index-" + i; })
.attr("class", function(d) {
var str = d;
var strippedString = str.replace(/ /g, "_")
return "legendText-" + strippedString; })
.style("fill", "Black")
.style("font", "normal 14px Arial");
//.on('mouseover', typeMouseOver)
//.on("mouseout", typeMouseOut);
// Unknown...
vis.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
// Cycle through each set of Relationships (i.e. "links") and
// register children with their parents.
// If a child doesn not exist in the original nodeSet, make sure
// that it gets added, even if as a placeholder.
linkSet.forEach(function(link) {
var parent = link.source = nodeById(link.source),
child = link.target = nodeById(link.target);
if (parent.children) parent.children.push(child);
else parent.children = [child];
});
function nodeById(id) {
return nodeSet[id] || (nodeSet[id] = {id: id});
}
// Extract the root node and compute the layout.
// NOTE: Assumes the root Node is the first Source in the
// first link, which assumes a reliance on the fact that
// the array of links were pre-generated that way.
//var nodes = tree.nodes(links[0].source);
var root = linkSet[0].source;
// Set coordinates that control entry point of the Tree
// Tree will "float" to the settling point if coordinates are
// set too far away from where you want the root node to settle.
root.x0 = h /2;
root.y0 = 0;
// Call the update function
//update(root, linkSet, nodeSet);
update(root);
function update(source) {
var duration = d3.event && d3.event.altKey ? 5000 : 500;
// Compute the new tree layout.
var nodes = tree.nodes(root);
// Merge original nodeSet data with Tree-generated nodes and
// normalize all Tree-generated nodes for fixed-depth.
if(!nodes[0].name){
nodes.forEach(function(d, i){
d.y = d.depth * 180;
// Beyond this point only has to be done once,
// for the initial merge.
d.name = nodesByIdHash[d.id].name //d.name = nodeSet[i].name
d.type = nodesByIdHash[d.id].type //d.type = nodeSet[i].type
d.hlink = nodesByIdHash[d.id].hlink //d.hlink = nodeSet[i].hlink
d.rSize = nodesByIdHash[d.id].rSize //d.rSize = nodeSet[i].rSize
})
}
else{
nodes.forEach(function(d, i){
d.y = d.depth * 180;
})
};
// Update the nodes…
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter new nodes at the previous position of the parent.
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", function(d) { toggle(d); update(d); });
// Controls circle entry and reentry traits
nodeEnter.append("svg:circle")
.attr("cx", horizontalTreeOffset)
.attr("r", 1e-6)
.style("stroke", "black")
.style("fill", function(d) {
if(d._children)
{ return color_hash[d.type]; }
else
{ return "white"; }
}
);
// Use foreignObject to append HTML text in order to implement word wrapping
nodeEnter.append("svg:foreignObject")
.attr("width", "200")
.attr("height", "60")
.attr("x", function(d) { return d.children || d._children ? horizontalNodeOffset - 50 : horizontalNodeOffsetLeaf; })
.attr("y", function(d) { return d.children || d._children ? -40 : -10; })
.style("font", "normal 14px Arial")
.append("xhtml:body")
.attr("xmlns", "http://www.w3.org/1999/xhtml")
.html(function(d){ return "<a href=" + d.hlink + ">" + d.name + "</a>"; });
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("circle")
.attr("r", function(d) { if(densityControlState) { return 20; } else { return defaultNodeSize; }})
.attr("rSize", function(d) { return d.rSize; })
.attr("id", "NODE" )
.style("stroke", function(d) { return color_hash[d.type]; })
.style("stroke-width", 3)
.style("fill", function(d) {
if(d._children)
{ return color_hash[d.type]; }
else
{ return "white"; }
}
)
.attr("type_value", function(d, i) { return d.type; })
.attr("color_value", function(d, i) { return color_hash[d.type]; });
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the new position of the parent
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
var linkPaths = vis.selectAll("path.link")
.data(tree.links(nodes), function(d) { return d.target.id; });
// Enter any new links at the previous position of the parent
var linkEnter = linkPaths.enter().insert("svg:path", "g")
.style("fill", "none")
.style("stroke", "#000")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(duration)
.attr("d", diagonal);
// Transition links to their new position.
linkPaths.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the new position of the parent.
linkPaths.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
var linkTextItems = vis.selectAll("g.linkText")
.data(tree.links(nodes), function(d) { return d.target.id; })
var linkTextEnter = linkTextItems.enter().append("svg:g")
.attr("class", "linkText")
.attr("transform", function(d) { return "translate(" + (d.target.y + 20) + "," + (getCenterX(d)) + ")"; });
// Add Predicate text to each link path
linkTextEnter.append("svg:foreignObject")
.attr("width", "120")
.attr("height", "40")
.append("xhtml:body")
.attr("xmlns", "http://www.w3.org/1999/xhtml")
.html(function(d){ return "<p>" + (linksByIdHash[d.source.id + ":" + d.target.id].predicate) + "</p>"; });
// Transition nodes to their new position.
//var linkTextUpdate = linkTextItems.transition()
//.duration(duration)
////.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
//.attr("transform", function(d) { return "translate(" + d.source.x + "," + d.source.y + ")"; })
//linkTextUpdate.select("linkText")
//.style("fill-opacity", 1);
// Transition exiting linkText to the new position of the parents.
var linkTextExit = linkTextItems.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.source.y + 20 + "," + (getCenterX(d)) + ")"; })
.remove();
linkTextExit.select("linkText")
.style("fill-opacity", 1e-6);
function getCenterX(d) {
var xS = d.source.x;
var xT = d.target.x;
if(xS == xT)
{ return (xS - (xS - xT)/2); }
else if(xS > xT)
{return (xS - (xS - xT)/2); }
else
{ return (xT - (xT - xS)/2); }
}
// Store the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children.
function toggle(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
}
};
</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 Tree Embedded in an HTML Page</h1>
</div>
<div class="div_RootBody" id="tree">
<div class="chart"></div>
</div>
</td>
</tr>
</table>
<div class="div_Footer"><p><p>This is the IF4IT Footer Message for this web page.</p></p></div>
<div><p class="p_if4itMessage">This Site Has Been Created and Published by The International Foundation for Information Technology (IF4IT).</p></div>
<script type="text/javascript">
drawTree("Drawing 1", nodeSet, linkSet, "#tree .chart", "colorScale20", 10);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment