Skip to content

Instantly share code, notes, and snippets.

@Guerino1

Guerino1/index.html

Last active May 31, 2016 21:20
Download ZIP
D3 Interactive Force Directed Radial Graph
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>My Force Directed Graph</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", "1800px");
d3.select(self.frameElement).style("width", "1200px");
// This example draws a Radial Hub and Spoke Graph on a page with
// multiple HTML layout constructs.
// Created by Frank Guerino : "http://www.guerino.net"
// Data Used for this example...
var focalNodeID = "N1";
var nodeSet = [
{id: "N1", name: "Smith, John", fixed: true, x: 10, y: 0, type: "Resource", hlink: "http://nounz.if4it.com/Nouns/Resources/Smith_John.NodeCluster.html"},
{id: "N2", name: "Product 2", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_2.NodeCluster.html"},
{id: "N3", name: "Cee, Washing D", type: "Resource", hlink: "http://nounz.if4it.com/Nouns/Resources/Cee_Washington_D.NodeCluster.html"},
{id: "N4", name: "Product 4", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_4.NodeCluster.html"},
{id: "N5", name: "Contract 3", type: "Contract", hlink: "http://nounz.if4it.com/Nouns/Contracts/Contract_3.NodeCluster.html"},
{id: "N6", name: "Product 6", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_6.NodeCluster.html"},
{id: "N7", name: "Product 7", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_7.NodeCluster.html"},
{id: "N8", name: "Contract 5", type: "Contract", hlink: "http://nounz.if4it.com/Nouns/Contracts/Contract_5.NodeCluster.html"},
{id: "N9", name: "Contract 9", type: "Contract", hlink: "http://nounz.if4it.com/Nouns/Contracts/Contract_9.NodeCluster.html"},
{id: "N10", name: "Product 10", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_10.NodeCluster.html"},
{id: "N11", name: "Contract 11", type: "Contract", hlink: "http://nounz.if4it.com/Nouns/Contracts/Contract_11.NodeCluster.html"},
{id: "N12", name: "Super, Susan", type: "Resource", hlink: "http://nounz.if4it.com/Nouns/Resources/Super_Susan.NodeCluster.html"},
{id: "N13", name: "Product 13", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_13.NodeCluster.html"},
{id: "N14", name: "Contract 14", type: "Contract", hlink: "http://nounz.if4it.com/Nouns/Contracts/Contract_14.NodeCluster.html"},
{id: "N15", name: "Product 15", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_15.NodeCluster.html"},
{id: "N16", name: "United States", type: "Country", hlink: "http://nounz.if4it.com/Nouns/Countries/United_States.NodeCluster.html"},
{id: "N17", name: "Product 17", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_17.NodeCluster.html"},
{id: "N18", name: "Contract 18", type: "Contract", hlink: "http://nounz.if4it.com/Nouns/Contracts/Contract_18.NodeCluster.html"},
{id: "N19", name: "Contract 19", type: "Contract", hlink: "http://nounz.if4it.com/Nouns/Contracts/Contract_19.NodeCluster.html"},
{id: "N20", name: "United Kingdom", type: "Country", hlink: "http://nounz.if4it.com/Nouns/Countries/United_Kingdom.NodeCluster.html"},
{id: "N21", name: "Product 21", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_21.NodeCluster.html"},
{id: "N22", name: "Product 22", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_22.NodeCluster.html"},
{id: "N23", name: "Executive, Emily", type: "Resource", hlink: "http://nounz.if4it.com/Nouns/Resources/Executive_Emily_A.NodeCluster.html"},
{id: "N24", name: "Product 24", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_24.NodeCluster.html"}
];
var linkSet = [
{sourceId: "N1", linkName: "Relationship 1", targetId: "N2"},
{sourceId: "N3", linkName: "Relationship 2", targetId: "N1"},
{sourceId: "N4", linkName: "Relationship 3", targetId: "N1"},
{sourceId: "N1", linkName: "Relationship 4", targetId: "N5"},
{sourceId: "N6", linkName: "Relationship 5", targetId: "N1"},
{sourceId: "N1", linkName: "Relationship 6", targetId: "N7"},
{sourceId: "N1", linkName: "Relationship 7", targetId: "N8"},
{sourceId: "N9", linkName: "Relationship 8", targetId: "N1"},
{sourceId: "N1", linkName: "Relationship 9", targetId: "N10"},
{sourceId: "N11", linkName: "Relationship 10", targetId: "N1"},
{sourceId: "N1", linkName: "Relationship 11", targetId: "N12"},
{sourceId: "N13", linkName: "Relationship 12", targetId: "N1"},
{sourceId: "N1", linkName: "Relationship 13", targetId: "N14"},
{sourceId: "N1", linkName: "Relationship 14", targetId: "N15"},
{sourceId: "N16", linkName: "Relationship 15", targetId: "N1"},
{sourceId: "N17", linkName: "Relationship 16", targetId: "N1"},
{sourceId: "N18", linkName: "Relationship 17", targetId: "N1"},
{sourceId: "N19", linkName: "Relationship 18", targetId: "N1"},
{sourceId: "N20", linkName: "Relationship 19", targetId: "N1"},
{sourceId: "N21", linkName: "Relationship 20", targetId: "N1"},
{sourceId: "N22", linkName: "Relationship 21", targetId: "N1"},
{sourceId: "N1", linkName: "Relationship 22", targetId: "N23"},
{sourceId: "N1", linkName: "Relationship 23", targetId: "N24"}
];
function drawCluster( drawingName, focalNode, nodeSet, linkSet, selectString, colors ) {
// drawingName => A unique drawing identifier that has no spaces, no "." and no "#" characters.
// focalNode => Primary Node of Context.
// nodeSet => Set of nodes and their relevant data.
// linkSet => Set of links 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 width = 1000;
var height = 600;
var centerNodeSize = 50;
var nodeSize = 10;
var color_hash = [];
var typeMouseOver = function() {
var thisObject = d3.select(this);
var typeValue = thisObject.attr("type_value");
var strippedTypeValue = typeValue.replace(/ /g, "_");
var legendBulletSelector = "." + "legendBullet-" + strippedTypeValue;
var selectedBullet = d3.selectAll(legendBulletSelector);
//document.writeln(legendBulletSelector);
selectedBullet.style("fill", "Maroon");
selectedBullet.attr("r", 1.2*6);
var legendTextSelector = "." + "legendText-" + strippedTypeValue;
var selectedLegendText = d3.selectAll(legendTextSelector);
//document.writeln(legendBulletSelector);
selectedLegendText.style("font", "bold 14px Arial")
selectedLegendText.style("fill", "Maroon");
var nodeTextSelector = "." + "nodeText-" + strippedTypeValue;
var selectedNodeText = d3.selectAll(nodeTextSelector);
//document.writeln(pie3SliceSelector);
selectedNodeText.style("font", "bold 16px Arial")
selectedNodeText.style("fill", "Maroon");
var nodeCircleSelector = "." + "nodeCircle-" + strippedTypeValue;
var selectedCircle = d3.selectAll(nodeCircleSelector);
//document.writeln(nodeCircleSelector);
selectedCircle.style("fill", "Maroon");
selectedCircle.style("stroke", "Maroon");
selectedCircle.attr("r", 1.2*nodeSize);
var focalNodeCircleSelector = "." + "focalNodeCircle";
var selectedFocalNodeCircle = d3.selectAll(focalNodeCircleSelector);
//document.writeln(focalNodeCircleSelector);
var focalNodeType = selectedFocalNodeCircle.attr("type_value");
if (typeValue == focalNodeType){
selectedFocalNodeCircle.style("stroke", "Maroon");
selectedFocalNodeCircle.style("fill", "White");
};
var focalNodeTextSelector = "." + "focalNodeText";
var selectedFocalNodeText = d3.selectAll(focalNodeTextSelector);
var focalNodeTextType = selectedFocalNodeText.attr("type_value");
//document.writeln(pie3SliceSelector);
if (typeValue == focalNodeTextType) {
selectedFocalNodeText.style("fill", "Maroon");
selectedFocalNodeText.style("font", "bold 16px Arial")
};
};
var typeMouseOut = function() {
var thisObject = d3.select(this);
var typeValue = thisObject.attr("type_value");
var colorValue = thisObject.attr("color_value");
var strippedTypeValue = typeValue.replace(/ /g, "_");
var legendBulletSelector = "." + "legendBullet-" + strippedTypeValue;
var selectedBullet = d3.selectAll(legendBulletSelector);
//document.writeln(legendBulletSelector);
selectedBullet.style("fill", colorValue);
selectedBullet.attr("r", 6);
var legendTextSelector = "." + "legendText-" + strippedTypeValue;
var selectedLegendText = d3.selectAll(legendTextSelector);
//document.writeln(legendBulletSelector);
selectedLegendText.style("font", "normal 14px Arial")
selectedLegendText.style("fill", "Black");
var nodeTextSelector = "." + "nodeText-" + strippedTypeValue;
var selectedNodeText = d3.selectAll(nodeTextSelector);
//document.writeln(pie3SliceSelector);
selectedNodeText.style("font", "normal 16px Arial")
selectedNodeText.style("fill", "Blue");
var nodeCircleSelector = "." + "nodeCircle-" + strippedTypeValue;
var selectedCircle = d3.selectAll(nodeCircleSelector);
//document.writeln(nodeCircleSelector);
selectedCircle.style("fill", "White");
selectedCircle.style("stroke", colorValue);
selectedCircle.attr("r", nodeSize);
var focalNodeCircleSelector = "." + "focalNodeCircle";
var selectedFocalNodeCircle = d3.selectAll(focalNodeCircleSelector);
//document.writeln(focalNodeCircleSelector);
var focalNodeType = selectedFocalNodeCircle.attr("type_value");
if (typeValue == focalNodeType){
selectedFocalNodeCircle.style("stroke", colorValue);
selectedFocalNodeCircle.style("fill", "White");
};
var focalNodeTextSelector = "." + "focalNodeText";
var selectedFocalNodeText = d3.selectAll(focalNodeTextSelector);
//document.writeln(pie3SliceSelector);
selectedFocalNodeText.style("fill", "Blue");
selectedFocalNodeText.style("font", "normal 14px Arial")
};
var nodeMouseOver = function() {
var thisObject = d3.select(this);
var typeValue = thisObject.attr("type_value");
var colorValue = thisObject.attr("color_value");
var strippedTypeValue = typeValue.replace(/ /g, "_");
d3.select(this).select("circle").transition()
.duration(250)
.attr("r", function(d,i) { if(d.id==focalNodeID) {return 65;} else {return 15;} } );
d3.select(this).select("text").transition()
.duration(250)
.style("font", "bold 20px Arial")
.attr("fill", "Blue");
var legendBulletSelector = "." + "legendBullet-" + strippedTypeValue;
var selectedBullet = d3.selectAll(legendBulletSelector);
//document.writeln(legendBulletSelector);
selectedBullet.style("fill", "Maroon");
selectedBullet.attr("r", 1.2*6);
var legendTextSelector = "." + "legendText-" + strippedTypeValue;
var selectedLegendText = d3.selectAll(legendTextSelector);
//document.writeln(legendBulletSelector);
selectedLegendText.style("font", "bold 14px Arial")
selectedLegendText.style("fill", "Maroon");
}
var nodeMouseOut = function() {
var thisObject = d3.select(this);
var typeValue = thisObject.attr("type_value");
var colorValue = thisObject.attr("color_value");
var strippedTypeValue = typeValue.replace(/ /g, "_");
d3.select(this).select("circle").transition()
.duration(250)
.attr("r", function(d,i) { if(d.id==focalNodeID) {return centerNodeSize;} else {return nodeSize;} } );
d3.select(this).select("text").transition()
.duration(250)
.style("font", "normal 16px Arial")
.attr("fill", "Blue");
var legendBulletSelector = "." + "legendBullet-" + strippedTypeValue;
var selectedBullet = d3.selectAll(legendBulletSelector);
//document.writeln(legendBulletSelector);
selectedBullet.style("fill", colorValue);
selectedBullet.attr("r", 6);
var legendTextSelector = "." + "legendText-" + strippedTypeValue;
var selectedLegendText = d3.selectAll(legendTextSelector);
//document.writeln(legendBulletSelector);
selectedLegendText.style("font", "normal 14px Arial")
selectedLegendText.style("fill", "Black");
}
// Create a hash that maps colors to types...
nodeSet.forEach(function(d, i) {
color_hash[d.type] = d.type;
//document.writeln(color_hash[d.type]);
});
function keys(obj)
{
var keys = [];
for(var key in obj)
{
if(obj.hasOwnProperty(key))
{
keys.push(key);
}
}
return 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);
});
// Create a canvas...
var svgCanvas = d3.select(selectString)
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.append("svg:g")
.attr("class", "focalNodeCanvas")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")")
var node_hash = [];
var type_hash = [];
// Create a hash that allows access to each node by its id
nodeSet.forEach(function(d, i) {
node_hash[d.id] = d;
type_hash[d.type] = d.type;
});
// Append the source object node and the target object node to each link records...
linkSet.forEach(function(d, i) {
d.source = node_hash[d.sourceId];
d.target = node_hash[d.targetId];
if (d.sourceId == focalNodeID)
{ d.direction = "OUT"; }
else
{ d.direction = "IN"; }
});
// Create a force layout and bind Nodes and Links
var force = d3.layout.force()
.nodes(nodeSet)
.links(linkSet)
.charge(-1000)
.gravity(.01)
.friction(.2)
.linkStrength(9)
//.size([width/8, height/10])
.linkDistance( function(d) { if (width < height) { return width*1/3; } else { return height*1/3 } } ) // Controls edge length
.on("tick", tick)
.start();
// Draw lines for Links between Nodes
var link = svgCanvas.selectAll(".gLink")
.data(force.links())
.enter().append("g")
.attr("class", "gLink")
.append("line")
.attr("class", "link")
.style("stroke", "#ccc")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
// Create Nodes
var node = svgCanvas.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.attr("type_value", function(d, i) { return d.type; })
.attr("color_value", function(d, i) { return color_hash[d.type]; })
//.attr("fixed", function(d) { if (d.id==focalNodeID) { return true; } else { return false; } } )
.on("mouseover", nodeMouseOver)
.on("mouseout", nodeMouseOut)
.call(force.drag)
.append("a")
.attr("xlink:href", function(d) {return d.hlink; });
// Append circles to Nodes
node.append("circle")
//.attr("x", function(d) { return d.x; })
//.attr("y", function(d) { return d.y; })
.attr("r", function(d) { if (d.id==focalNodeID) { return centerNodeSize; } else { return nodeSize; } } )
.style("fill", "White") // Make the nodes hollow looking
.attr("type_value", function(d, i) { return d.type; })
.attr("color_value", function(d, i) { return color_hash[d.type]; })
//.attr("fixed", function(d) { if (d.id==focalNodeID) { return true; } else { return false; } } )
//.attr("x", function(d) { if (d.id==focalNodeID) { return width/2; } else { return d.x; } })
//.attr("y", function(d) { if (d.id==focalNodeID) { return height/2; } else { return d.y; } })
.attr("class", function(d, i) {
var str = d.type;
var strippedString = str.replace(/ /g, "_")
//return "nodeCircle-" + strippedString; })
if (d.id==focalNodeID) { return "focalNodeCircle"; }
else { return "nodeCircle-" + strippedString; }
})
.style("stroke-width", 5) // Give the node strokes some thickness
.style("stroke", function(d, i) { return color_hash[d.type]; } ) // Node stroke colors
.call(force.drag);
// Append text to Nodes
node.append("text")
.attr("x", function(d) { if (d.id==focalNodeID) { return 0; } else {return 20;} } )
.attr("y", function(d) { if (d.id==focalNodeID) { return 0; } else {return -10;} } )
.attr("text-anchor", function(d) { if (d.id==focalNodeID) {return "middle";} else {return "start";} })
.attr("font-family", "Arial, Helvetica, sans-serif")
.style("font", "normal 16px Arial")
.attr("fill", "Blue")
.style("fill", function(d, i) { return color_hash[d]; })
.attr("type_value", function(d, i) { return d.type; })
.attr("color_value", function(d, i) { return color_hash[d.type]; })
.attr("class", function(d, i) {
var str = d.type;
var strippedString = str.replace(/ /g, "_");
//return "nodeText-" + strippedString; })
if (d.id==focalNodeID) { return "focalNodeText"; }
else { return "nodeText-" + strippedString; }
})
.attr("dy", ".35em")
.text(function(d) { return d.name; });
// Append text to Link edges
var linkText = svgCanvas.selectAll(".gLink")
.data(force.links())
.append("text")
.attr("font-family", "Arial, Helvetica, sans-serif")
.attr("x", function(d) {
if (d.target.x > d.source.x) { return (d.source.x + (d.target.x - d.source.x)/2); }
else { return (d.target.x + (d.source.x - d.target.x)/2); }
})
.attr("y", function(d) {
if (d.target.y > d.source.y) { return (d.source.y + (d.target.y - d.source.y)/2); }
else { return (d.target.y + (d.source.y - d.target.y)/2); }
})
.attr("fill", "Black")
.style("font", "normal 12px Arial")
.attr("dy", ".35em")
.text(function(d) { return d.linkName; });
function tick() {
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
linkText
.attr("x", function(d) {
if (d.target.x > d.source.x) { return (d.source.x + (d.target.x - d.source.x)/2); }
else { return (d.target.x + (d.source.x - d.target.x)/2); }
})
.attr("y", function(d) {
if (d.target.y > d.source.y) { return (d.source.y + (d.target.y - d.source.y)/2); }
else { return (d.target.y + (d.source.y - d.target.y)/2); }
});
}
// Print Legend Title...
svgCanvas.append("text").attr("class","region")
.text("Color Keys for Data Types...")
.attr("x", -1*(width/2 - 10))
.attr("y", (-height/7*3))
.style("fill", "Black")
.style("font", "bold 16px Arial")
.attr("text-anchor","start");
// Plot the bullet circles...
svgCanvas.selectAll("focalNodeCanvas")
.data(sortedKeys).enter().append("svg:circle") // Append circle elements
.attr("cx", -1*(width/2 - 25))
.attr("cy", function(d, i) { return (i*20-height/7*3 + 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...
svgCanvas.selectAll("a.legend_link")
.data(sortedKeys) // Instruct to bind dataSet to text elements
.enter().append("svg:a") // Append legend elements
.append("text")
.attr("text-anchor", "center")
.attr("x", -1*(width/2 - 40))
.attr("y", function(d, i) { return (i*20-height/7*3 + 20); } )
.attr("dx", 0)
.attr("dy", "4px") // 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);
};
</script>
<style type="text/css">
svg {
font: 10px sans-serif;
display: block;
}
</style>
<STYLE type="text/css">
div.div_Header {
width: 100%;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:WhiteSmoke;
text-align:center;
}
h1.h1_BodyHeader { text-align:center;
font: bold 1.5em Arial;
}
h2.h2_LeftMenuHeader {
text-align:center;
font: bold 1.2em Arial;
}
h3.h3_Body {
text-align:center;
}
p.p_Red {
color:Red;
}
table.table_Header {
width: 100%;
text-align:center;
}
td.td_HeaderLeft {
text-align:left;
}
td.td_HeaderRight {
text-align:right;
}
div.div_Menu {
width: 100%;
border:2px solid White;
border-radius:7px;
background: MidnightBlue;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:White;
text-align:center;
}
p.p_Left {
font-family:Arial, Helvetica, sans-serif;
color:Black;
text-align:left;
padding-left: 5px;
font: normal 14px Arial;
}
table.table_Body { width: 100%;
height: 100%;
padding: 0;
}
td.td_BodyLeft {
vertical-align: top;
width: 250px;
height: 100%;
padding: 0;
}
td.td_BodyRight {
vertical-align: top;
}
li.li_LeftMenu {
text-align:left;
font: normal 14px Arial;
}
a.a_LeftMenuNoUnderLine {
text-decoration: none;
}
div.div_Body {
height: 100%;
width: 100%;
position: relative;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:Black;
text-align:center;
}
div.div_Footer {
width: 100%;
border:2px solid White;
border-radius:7px;
background: MidnightBlue;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:White;
text-align:center;
}
p.p_if4itMessage {
width: 100%; background: White;
font: bold .75em Arial;
font-family:Arial, Helvetica, sans-serif;
color:GoldenRod;
text-align:center;
}
.menuButton{
background-color: MidnightBlue;
}
.menuButton li{
height: 100%;
list-style: none;
display: inline;
}
.menuButton li a{
height: 100%;
padding: 3px 0.5em;
text-decoration: none;
color: White;
background-color: MidnightBlue;
border: 2px solid MidnightBlue;
}
.menuButton li a:hover{
height: 100%;
color: MidnightBlue;
background-color: White;
border-style: outset;
background-color: White;
}
.menuButton li a:active{
height: 100%;
border-style: inset;
color: MidnightBlue;
background-color: White;
}
.menuButton li a.disabled{
height: 100%;
padding: 3px 0.5em;
text-decoration: none;
color: MidnightBlue; background-color: White;
border: 2px solid MidnightBlue;
border-style: inset;
border-color: White;
}
</STYLE>
<STYLE type="text/css">
div.div_RootBody {
position: relative;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: normal 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:Black;
padding: 0px 1em;
text-align:left;
}
</STYLE>
<!--[if gt IE 7]>
<style>body { overflow-y:scroll; } </style>
<![endif]-->
</head>
<body>
<div>
<h1 style="text-align:center; font: bold 1.7em Arial;"><a href="http://www.if4it.com">The International Foundation for Information Technology (IF4IT)</a></h1>
</div>
<div class="div_Menu">
<ul class="menuButton">
<li><a href="http://www.if4it.com">HOME</a></li>
<li><a href="http://www.if4it.com/resources.html">RESOURCES</a></li>
<li><a href="http://www.if4it.com">PRODUCTS</a></li> <li><a href="http://www.if4it.com">SERVICES</a></li>
<li><a href="http://www.if4it.com">SUPPORT</a></li>
<li><a href="http://www.if4it.com">HELP</a></li>
</ul>
</div>
<table class="table_Body">
<tr>
<td class="td_BodyLeft">
<div class="div_Body">
<h2 class="h2_LeftMenuHeader">Sample Left Menu Links</h2>
<ul>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com">IF4IT Home</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/taxonomy.html">IF4IT Taxonomies</a></li>
</ul>
<p class="p_Left">This is dummy paragraph 1 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 2 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 3 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 4 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 5 text that would go in this section of the page.</p>
<ul>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com">IF4IT Home</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/taxonomy.html">IF4IT Taxonomies</a></li>
</ul>
<p class="p_Left">This is dummy paragraph 1 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 2 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 3 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 4 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 5 text that would go in this section of the page.</p>
</div>
</td>
<td class="td_BodyRight">
<div class="div_RootBody">
<h1 style="text-align:center; font: bold 1.5em Arial;">D3 Based Node Cluster Chart in an HTML Page</h1>
</div>
<div class="div_RootBody" id="cluster_chart">
<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">
drawCluster("Drawing 1", focalNodeID, nodeSet, linkSet, "#cluster_chart .chart", "colorScale20");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment