Skip to content

Instantly share code, notes, and snippets.

@Guerino1

Guerino1/index.html

Last active December 21, 2015 21:08
Show Gist options
  • Save Guerino1/6366020 to your computer and use it in GitHub Desktop.
Save Guerino1/6366020 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Generated Sortable HTML Table
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 Density Chart</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Description" content="This page provides a table-oriented view of density." />
<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"></script>
<script type="text/javascript">
//d3.select(self.frameElement).style("height", "1400px");
//d3.select(self.frameElement).style("width", "1400px");
// 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 headerInfo = [
];
var densitySet = [
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html\">Node1</a>", Total: 1000 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/B__Application_2.NodeCluster.html\">Node2</a>", Total: 1500 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/C__Application_3.NodeCluster.html\">Node3</a>", Total: 700 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/D__Application_4.NodeCluster.html\">Node4</a>", Total: 300 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/E__Application_5.NodeCluster.html\">Node5</a>", Total: 1000 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/F__Application_6.NodeCluster.html\">Node6</a>", Total: 900 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/G__Application_7.NodeCluster.html\">Node7</a>", Total: 1090 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/H__Application_8.NodeCluster.html\">Node8</a>", Total: 35 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/I__Application_9.NodeCluster.html\">Node9</a>", Total: 1000 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html\">Node10</a>", Total: 99 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/B__Application_2.NodeCluster.html\">Node11</a>", Total: 950 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/C__Application_3.NodeCluster.html\">Node12</a>", Total: 1850 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/D__Application_4.NodeCluster.html\">Node13</a>", Total: 0 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/E__Application_5.NodeCluster.html\">Node14</a>", Total: 2000 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/F__Application_6.NodeCluster.html\">Node15</a>", Total: 100 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/G__Application_7.NodeCluster.html\">Node16</a>", Total: 10 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/H__Application_8.NodeCluster.html\">Node17</a>", Total: 600 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/I__Application_9.NodeCluster.html\">Node18</a>", Total: 200 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html\">Node19</a>", Total: 9 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/B__Application_2.NodeCluster.html\">Node20</a>", Total: 1100 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/C__Application_3.NodeCluster.html\">Node21</a>", Total: 1 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/D__Application_4.NodeCluster.html\">Node22</a>", Total: 0 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/E__Application_5.NodeCluster.html\">Node23</a>", Total: 13 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/F__Application_6.NodeCluster.html\">Node24</a>", Total: 452 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/G__Application_7.NodeCluster.html\">Node25</a>", Total: 1600 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/H__Application_8.NodeCluster.html\">Node26</a>", Total: 1100 },
{ Name: "<a href=\"http://nounz.if4it.com/Nouns/Applications/I__Application_9.NodeCluster.html\">Node27</a>", Total: 1500 }
];
function drawDensityTable( drawingName, densitySet, selectString, backgroundColor, textColor ) {
var maxRelationshipValue = 0;
densitySet.forEach(function(d) {
d.Percentage = d.Total;
if (d.Total > maxRelationshipValue) { maxRelationshipValue = d.Total; };
});
var recordSortFunction = function() {
var thisObject = d3.select(this);
var k = thisObject.attr("keyName"); var dataRecords = d3.selectAll("#density_body_record"); if(k != "Name") {
dataRecords.sort(function(a, b) { return (b[k]) - (a[k]); });
}
else {
dataRecords.sort(function(a, b) {
return a[k] < b[k] ? -1 : (a[k] > b[k] ? 1 : 0); });
};
};
var headerMouseOver = function () {
var thisObject = d3.select(this);
thisObject.style("background", textColor);
thisObject.style("color", backgroundColor);
};
var headerMouseOut = function () {
var thisObject = d3.select(this);
thisObject.style("background", backgroundColor);
thisObject.style("color", textColor);
};
var bodyRecordMouseOver = function () {
var thisObject = d3.select(this);
thisObject.style("background", "Orange");
};
var bodyRecordMouseOut = function () {
var thisObject = d3.select(this);
thisObject.style("background", "transparent");
};
var densityKeys = d3.keys(densitySet[0]).filter(function(key) {
return key;
}
);
var dummyArray = [{dummy: 1}];
var svgCanvas = d3.select(selectString).selectAll("table")
.data(dummyArray)
.enter()
.append("table")
.attr("id", "density_table");
var densityTable = d3.selectAll("#density_table").selectAll("table.thead")
.data(dummyArray)
.enter()
.append("thead")
.attr("id", "density_header");
var densityHead = d3.selectAll("#density_header").selectAll("thead.tr")
.data(dummyArray)
.enter()
.append("tr")
.attr("id", "density_header_record");
var densityHeaderRecord = d3.selectAll("#density_header_record").selectAll("tr.td")
.data(densityKeys)
.enter()
.append("td")
.attr("id", "density_headerer_data")
.attr("keyName", function(d) { return d; })
.text(function(d) { return d; }) // Append Keys
.style("background", backgroundColor)
.style("color", textColor)
.style("border", "0px solid White")
.style("font", "bold 12px Arial")
.style("padding", "4px")
.style("text-align", "center")
.on('mouseover', headerMouseOver)
.on("mouseout", headerMouseOut)
.on("click", recordSortFunction);
var densityTable = d3.selectAll("#density_table").selectAll("table.tbody")
.data(dummyArray)
.enter()
.append("tbody")
.attr("id", "density_body");
var densityBody = d3.selectAll("#density_body").selectAll("tbody.tr")
.data(densitySet)
.enter()
.append("tr")
.attr("id", "density_body_record")
.attr("index", function(d, i) { return i; })
.on("mouseover", bodyRecordMouseOver)
.on("mouseout", bodyRecordMouseOut);
var densityBodyDataRecords = d3.selectAll("#density_body_record").selectAll("tr.td")
.data(function(d) { return densityKeys.map(function(k) { return d[k]; }); })
.enter()
.append("td")
.attr("id", "density_body_data")
//.text(function(d) { return d; })
.html(function(d, i) {
if(i < 2) { return d; }
})
.style("font", "normal 12px Arial")
.append("svg")
.attr("width", function(d, i) {
if(i == 0) { return 200; }
else if(i == 1) { return 100; }
else { return 500; }
})
//.attr("height", 15)
.attr("height", function(d, i) {
if(i < 2) { return 0; }
else { return 15; }
})
.append("rect")
.attr("height", 15)
.style("fill", "Blue")
.attr("width", function(d, i) {
if(i == 2) { return (d/maxRelationshipValue)*100*5; }
else { return 0; }
});
};
</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 Density Chart in an HTML Page</h1>
</div>
<div class="div_RootBody" id="density_chart">
</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">
drawDensityTable("Noun Instance Density Overview", densitySet, "#density_chart", "MidnightBlue", "White");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment