Skip to content

Instantly share code, notes, and snippets.

@Guerino1

Guerino1/index.html

Last active August 29, 2015 14:03
Show Gist options
  • Save Guerino1/473e3ca0a0b2995bc60c to your computer and use it in GitHub Desktop.
Save Guerino1/473e3ca0a0b2995bc60c to your computer and use it in GitHub Desktop.
Download ZIP
D3 Nested Block Browser embedded in HTML File
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", hlink: "http://nounz.if4it.com"},
{id: "N1", name: "Ability to Market Our Products", type: "Capability", 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", 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", hlink: "file:///Users/guerino/GUERINO%20WORK/Web/NOUNZ/INTRANET/HTML/Nouns/Applications/A_Application_1.NodeCluster.html"},
{id: "N4", name: "United States", type: "Country", hlink: "file:///Users/guerino/GUERINO%20WORK/Web/NOUNZ/INTRANET/HTML/Nouns/Countries/United_States.NodeCluster.html"},
{id: "N5", name: "John Smith", type: "Person", hlink: "http://nounz.if4it.com/Nouns/Resources/Smith_John.html"},
{id: "N6", name: "Jane Doe", type: "Person", hlink: "http://nounz.if4it.com/Nouns/Resources/Doe_Jane.html"},
{id: "N7", name: "Manufacturing", type: "Organization", hlink: "http://nounz.if4it.com/Nouns/Organizations/Organization_E.NodeCluster.html"},
{id: "N8", name: "Ability to Manufacture Product", type: "Capability", hlink: "http://nounz.if4it.com/Nouns/Capabilities/Ability_to_Manufacture_Product.html"},
{id: "N9", name: "Product 1", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_1.html"},
{id: "N10", name: "Product 2", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_2.html"},
{id: "N11", name: "Product 3", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_2.html"},
{id: "N12", name: "Product 4", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_2.html"},
{id: "N13", name: "Product 5", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_2.html"},
{id: "N14", name: "Product 6", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_2.html"},
{id: "N15", name: "Product 7", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_2.html"},
{id: "N16", name: "Product 8", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_2.html"},
{id: "N17", name: "Product 9", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_2.html"},
{id: "N18", name: "Product 10", type: "Product", hlink: "http://nounz.if4it.com/Nouns/Products/Product_2.html"}
];
var linkSet = [
{source: "N0", target: "N1"},
{source: "N1", target: "N2"},
{source: "N1", target: "N3"},
{source: "N1", target: "N3"},
{source: "N2", target: "N11"},
{source: "N2", target: "N12"},
{source: "N0", target: "N4"},
{source: "N4", target: "N5"},
{source: "N0", target: "N6"},
{source: "N6", target: "N7"},
{source: "N6", target: "N8"},
{source: "N7", target: "N9"},
{source: "N7", target: "N10"},
{source: "N10", target: "N13"},
{source: "N10", target: "N14"},
{source: "N13", target: "N15"},
{source: "N13", target: "N16"},
{source: "N5", target: "N17"},
{source: "N5", target: "N18"}
];
function drawHorizontalPartition( drawingName, nodeSet, linkSet, selectString, colors, margin)
{
// Code Start
var m = [20, 120, 20, 120],
w = 1120,
h = 600,
x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([0, h]);
var horizontalTreeOffset = 150;
var horizontalNodeOffset = horizontalTreeOffset - 10;
var horizontalNodeOffsetLeaf = horizontalTreeOffset + 10;
var legendTitleHorizontalOffset = m[0]/4;
var legendTitleVerticalOffset = m[1]/4 + 55;
// Create a nodeByNameHash...
var nodesByIdHash = [];
// Set up hashes
nodeSet.forEach(function(d, i) {
nodesByIdHash[d.id] = d;
});
// Have not figured out what the purpose of the value attribute is.
// Need to set the value retrieval function so that a value can be
// appended to each node. It's arbitrarily set to the number 1, which
// seems to make all children proportional in size.
var partition = d3.layout.partition()
.value(function(d) { return 1; });
var vis = d3.select(selectString).append("svg:svg")
.attr("width", w)
.attr("height", h);
// 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 = nodesByIdHash[link.source];
var child = nodesByIdHash[link.target];
//var parent = link.source = nodeById(link.source),
//child = link.target = nodeById(link.target);
if (parent.children) parent.children.push(child);
else parent.children = [child];
});
linkSet.forEach(function(link) {
var parent = nodesByIdHash[link.source];
var child = nodesByIdHash[link.target];
if (parent.id != nodeSet[0].id) child.parent = parent;
});
// Need to use the root from the nodesByIdHash, which have been manipulated...
var root = nodesByIdHash[nodeSet[0].id];
var partitionedNodes = partition.nodes(root)
var g = vis.selectAll("g")
//.data(partition.nodes(root))
.data(partitionedNodes)
.enter().append("svg:g")
.attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; })
.on("click", click);
var kx = w / root.dx,
ky = h / 1;
g.append("svg:rect")
.attr("width", root.dy * kx)
.attr("height", function(d) { return d.dx * ky; })
//.style("fill", function(d) { if(d.children) { return "LightSteelBlue"; } else { return "LightGrey"; } })
.style("fill", function(d) {
if(d.children) {
if(d.depth == 0) {return "#A9BCF5"; }
else { return "LightSteelBlue"; } }
else { return "LightGrey"; }
}
)
.style("stroke", "White")
.attr("class", function(d) { return d.children ? "parent" : "child"; });
//g.append("svg:text")
//.attr("transform", transform)
//.attr("dy", ".35em")
//.style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; })
//.text(function(d) { return d.name; })
g.append("svg:text")
.attr("transform", transform)
.attr("dy", ".35em")
.style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; })
.append("svg:a")
.attr("class", "textLink")
.attr("xlink:href", function(d) {return d.hlink; })
.text(function(d) { return d.name; })
.attr("fill", "Blue")
d3.select(window)
.on("click", function() { click(root); })
function click(d) {
if (!d.children) return;
kx = (d.y ? w - 40 : w) / (1 - d.y);
ky = h / d.dx;
x.domain([d.y, 1]).range([d.y ? 40 : 0, w]);
y.domain([d.x, d.x + d.dx]);
var t = g.transition()
.duration(d3.event.altKey ? 7500 : 750)
.attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; });
t.select("rect")
.attr("width", d.dy * kx)
.attr("height", function(d) { return d.dx * ky; });
t.select("text")
.attr("transform", transform)
.style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; });
d3.event.stopPropagation();
}
function transform(d) {
return "translate(8," + d.dx * ky / 2 + ")";
}
//Code End
};
</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 Partition-based Nested Block Browser Embedded in an HTML Page With Linked Text</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">
drawHorizontalPartition("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