Skip to content

Instantly share code, notes, and snippets.

@Guerino1

Guerino1/index.html

Created July 24, 2012 11:11
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save Guerino1/3169420 to your computer and use it in GitHub Desktop.
Save Guerino1/3169420 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Radial Wheel With HTML
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"></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 focalNode = [
{id: "N1", name: "Node 1", type: "Data Type 1", hlink: "http://www.if4it.com"}
];
var nodeSet = [
{id: "N2", name: "Node 2", type: "Data Type 3", relName: "Relationship 1", hlink: "http://www.if4it.com/glossary.html"},
{id: "N3", name: "Node 3", type: "Data Type 4", relName: "Relationship 2", hlink: "http://www.if4it.com/resources.html"},
{id: "N4", name: "Node 4", type: "Data Type 5", relName: "Relationship 3", hlink: "http://www.if4it.com/taxonomy.html"},
{id: "N5", name: "Node 5", type: "Data Type 1", relName: "Relationship 4", hlink: "http://www.if4it.com/disciplines.html"},
{id: "N6", name: "Node 6", type: "Data Type 2", relName: "Relationship 5", hlink: "http://www.if4it.com"},
{id: "N7", name: "Node 7", type: "Data Type 3", relName: "Relationship 6", hlink: "http://www.if4it.com/glossary.html"},
{id: "N8", name: "Node 8", type: "Data Type 4", relName: "Relationship 7", hlink: "http://www.if4it.com/resources.html"},
{id: "N9", name: "Node 9", type: "Data Type 5", relName: "Relationship 8", hlink: "http://www.if4it.com/taxonomy.html"},
{id: "N10", name: "Node 10", type: "Data Type 1", relName: "Relationship 9", hlink: "http://www.if4it.com/disciplines.html"},
{id: "N11", name: "Node 11", type: "Data Type 2", relName: "Relationship 10", hlink: "http://www.if4it.com"},
{id: "N12", name: "Node 12", type: "Data Type 3", relName: "Relationship 11", hlink: "http://www.if4it.com/glossary.html"},
{id: "N13", name: "Node 13", type: "Data Type 4", relName: "Relationship 12", hlink: "http://www.if4it.com/resources.html"},
{id: "N14", name: "Node 14", type: "Data Type 5", relName: "Relationship 13", hlink: "http://www.if4it.com/taxonomy.html"},
{id: "N15", name: "Node 15", type: "Data Type 1", relName: "Relationship 14", hlink: "http://www.if4it.com/disciplines.html"},
{id: "N16", name: "Node 16", type: "Data Type 3", relName: "Relationship 15", hlink: "http://www.if4it.com"},
{id: "N17", name: "Node 17", type: "Data Type 1", relName: "Relationship 16", hlink: "http://www.if4it.com/glossary.html"},
{id: "N18", name: "Node 18", type: "Data Type 1", relName: "Relationship 17", hlink: "http://www.if4it.com/glossary.html"},
{id: "N19", name: "Node 19", type: "Data Type 4", relName: "Relationship 18", hlink: "http://www.if4it.com/glossary.html"},
{id: "N20", name: "Node 20", type: "Data Type 4", relName: "Relationship 19", hlink: "http://www.if4it.com/glossary.html"},
{id: "N21", name: "Node 21", type: "Data Type 4", relName: "Relationship 20", hlink: "http://www.if4it.com/glossary.html"},
{id: "N22", name: "Node 22", type: "Data Type 1", relName: "Relationship 21", hlink: "http://www.if4it.com/glossary.html"},
{id: "N23", name: "Node 23", type: "Data Type 5", relName: "Relationship 22", hlink: "http://www.if4it.com/glossary.html"},
{id: "N24", name: "Node 24", type: "Data Type 5", relName: "Relationship 23", hlink: "http://www.if4it.com/glossary.html"},
{id: "N25", name: "Node 25", type: "Data Type 6", relName: "Relationship 24", hlink: "http://www.if4it.com/glossary.html"}
];
function drawRadialHubAndSpoke( drawingName, focalNode, nodeSet, selectString, colors, margin, outerRadius, innerRadius, sortArcs ) {
// 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.
// 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 = 1100;
var height = 1100;
var typeMouseOver = function() {
var thisObject = d3.select(this);
var typeValue = thisObject.attr("type_value");
var strippedTypeValue = typeValue.replace(/ /g, "_");
var pie1ArcsSelector = "." + "pie1-" + strippedTypeValue;
var selectedArcs = d3.selectAll(pie1ArcsSelector);
//document.writeln(pie1ArcsSelector);
selectedArcs.style("fill", "Maroon");
var pie2ArcsSelector = "." + "pie2-" + strippedTypeValue;
var selectedArcs = d3.selectAll(pie2ArcsSelector);
//document.writeln(pie2ArcsSelector);
selectedArcs.style("fill", "Maroon");
var pie3ArcsSelector = "." + "pie3-" + strippedTypeValue;
var selectedArcs = d3.selectAll(pie3ArcsSelector);
//document.writeln(pie3ArcsSelector);
selectedArcs.style("fill", "Maroon");
var legendBulletSelector = "." + "legendBullet-" + strippedTypeValue;
var selectedBullet = d3.selectAll(legendBulletSelector);
//document.writeln(legendBulletSelector);
selectedBullet.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 focalNodeSelector = "." + "focalNodeCircle";
var focalNode = d3.selectAll(focalNodeSelector);
var focalNodeType = focalNode.attr("type_value");
//document.writeln(focalNodeSelector);
if (typeValue == focalNodeType) {
focalNode.style("fill", "Maroon");
focalNode.style("stroke", "Maroon");
};
var focalNodeTextSelector = "." + "focalNodeText";
var selectedFocalNodeText = d3.selectAll(focalNodeTextSelector);
var focalNodeTextType = selectedFocalNodeText.attr("type_value");
//document.writeln(pie3SliceSelector);
if (typeValue == focalNodeTextType) {
selectedFocalNodeText.style("fill", "Maroon");
};
var legendTextSelector = "." + "legendText-" + strippedTypeValue;
var selectedLegendText = d3.selectAll(legendTextSelector);
//document.writeln(legendBulletSelector);
selectedLegendText.style("font", "bold 14px Arial")
selectedLegendText.style("fill", "Maroon");
};
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 pie1ArcsSelector = "." + "pie1-" + strippedTypeValue;
var selectedArcs = d3.selectAll(pie1ArcsSelector);
//document.writeln(pie1ArcsSelector);
selectedArcs.style("fill", colorValue);
var pie2ArcsSelector = "." + "pie2-" + strippedTypeValue;
var selectedArcs = d3.selectAll(pie2ArcsSelector);
//document.writeln(pie2ArcsSelector);
selectedArcs.style("fill", colorValue);
var pie3ArcsSelector = "." + "pie3-" + strippedTypeValue;
var selectedArcs = d3.selectAll(pie3ArcsSelector);
//document.writeln(pie3ArcsSelector);
selectedArcs.style("fill", colorValue);
var legendBulletSelector = "." + "legendBullet-" + strippedTypeValue;
var selectedBullet = d3.selectAll(legendBulletSelector);
//document.writeln(legendBulletSelector);
selectedBullet.style("fill", colorValue);
var nodeTextSelector = "." + "nodeText-" + strippedTypeValue;
var selectedNodeText = d3.selectAll(nodeTextSelector);
//document.writeln(pie3SliceSelector);
selectedNodeText.style("font", "normal 16px Arial")
selectedNodeText.style("fill", "Blue");
var focalNodeSelector = "." + "focalNodeCircle";
var focalNode = d3.selectAll(focalNodeSelector);
var focalNodeType = focalNode.attr("type_value");
//document.writeln(focalNodeSelector);
if (typeValue == focalNodeType) {
focalNode.style("fill", colorValue);
focalNode.style("stroke", colorValue);
};
var focalNodeTextSelector = "." + "focalNodeText";
var selectedFocalNodeText = d3.selectAll(focalNodeTextSelector);
//document.writeln(pie3SliceSelector);
selectedFocalNodeText.style("fill", "Blue");
var legendTextSelector = "." + "legendText-" + strippedTypeValue;
var selectedLegendText = d3.selectAll(legendTextSelector);
//document.writeln(legendBulletSelector);
selectedLegendText.style("font", "normal 14px Arial")
selectedLegendText.style("fill", "Black");
};
var sliceMouseOver = function() {
var thisObject = d3.select(this);
var indexValue = thisObject.attr("index_value");
var pie1SliceSelector = "#" + "pie1-slice" + indexValue;
var selectedArcs = d3.selectAll(pie1SliceSelector);
//document.writeln(pie1SliceSelector);
selectedArcs.style("fill", "DarkBlue");
var pie2SliceSelector = "#" + "pie2-slice" + indexValue;
var selectedArcs = d3.selectAll(pie2SliceSelector);
//document.writeln(pie2SliceSelector);
selectedArcs.style("fill", "DarkBlue");
var pie3SliceSelector = "#" + "pie3-slice" + indexValue;
var selectedArcs = d3.selectAll(pie3SliceSelector);
//document.writeln(pie3SliceSelector);
selectedArcs.style("fill", "DarkBlue");
var nodeTextSelector = "#" + "pie3-node" + indexValue;
var selectedNodeText = d3.selectAll(nodeTextSelector);
//document.writeln(pie3SliceSelector);
selectedNodeText.style("font", "bold 16px Arial")
selectedNodeText.style("fill", "DarkBlue");
var focalNodeSelector = "." + "focalNodeCircle";
var focalNode = d3.selectAll(focalNodeSelector);
//document.writeln(focalNodeSelector);
focalNode.style("fill", "DarkBlue");
focalNode.style("stroke", "DarkBlue");
var focalNodeTextSelector = "." + "focalNodeText";
var selectedFocalNodeText = d3.selectAll(focalNodeTextSelector);
//document.writeln(pie3SliceSelector);
selectedFocalNodeText.style("fill", "DarkBlue");
};
var sliceMouseOut = function() {
var thisObject = d3.select(this);
var indexValue = thisObject.attr("index_value");
var colorValue = thisObject.attr("color_value");
var pie1SliceSelector = "#" + "pie1-slice" + indexValue;
var selectedArcs = d3.selectAll(pie1SliceSelector);
//document.writeln(pie1SliceSelector);
selectedArcs.style("fill", colorValue);
var pie2SliceSelector = "#" + "pie2-slice" + indexValue;
var selectedArcs = d3.selectAll(pie2SliceSelector);
//document.writeln(pie2SliceSelector);
selectedArcs.style("fill", colorValue);
var pie3SliceSelector = "#" + "pie3-slice" + indexValue;
var selectedArcs = d3.selectAll(pie3SliceSelector);
//document.writeln(pie3SliceSelector);
selectedArcs.style("fill", colorValue);
var nodeTextSelector = "#" + "pie3-node" + indexValue;
var selectedNodeText = d3.selectAll(nodeTextSelector);
//document.writeln(pie3SliceSelector);
selectedNodeText.style("font", "normal 16px Arial")
selectedNodeText.style("fill", "Blue");
var focalNodeSelector = "." + "focalNodeCircle";
var focalNode = d3.selectAll(focalNodeSelector);
var focalNodeColorValue = focalNode.attr("color_value");
//document.writeln(focalNodeSelector);
focalNode.style("fill", focalNodeColorValue);
focalNode.style("stroke", focalNodeColorValue);
var focalNodeTextSelector = "." + "focalNodeText";
var selectedFocalNodeText = d3.selectAll(focalNodeTextSelector);
//document.writeln(pie3SliceSelector);
selectedFocalNodeText.style("fill", "Blue");
};
var focalNodeMouseOver = function() {
var focalNodeSelector = "." + "focalNodeCircle";
var focalNode = d3.selectAll(focalNodeSelector);
//document.writeln(focalNodeSelector);
focalNode.style("fill", "DarkBlue");
focalNode.style("stroke", "DarkBlue");
var focalNodeTextSelector = "." + "focalNodeText";
var selectedFocalNodeText = d3.selectAll(focalNodeTextSelector);
//document.writeln(pie3SliceSelector);
selectedFocalNodeText.style("font", "Bold 20px Arial")
selectedFocalNodeText.style("fill", "DarkBlue");
};
var focalNodeMouseOut = function() {
var focalNodeSelector = "." + "focalNodeCircle";
var focalNode = d3.selectAll(focalNodeSelector);
var focalNodeColorValue = focalNode.attr("color_value");
//document.writeln(focalNodeSelector);
focalNode.style("fill", focalNodeColorValue);
focalNode.style("stroke", focalNodeColorValue);
var focalNodeTextSelector = "." + "focalNodeText";
var selectedFocalNodeText = d3.selectAll(focalNodeTextSelector);
//document.writeln(pie3SliceSelector);
selectedFocalNodeText.style("font", "Bold 16px Arial")
selectedFocalNodeText.style("fill", "Blue");
};
var color_hash = [];
// 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 nodes...
nodeSet.forEach(function(d,i) {
d.color = color_hash[d.type];
//document.writeln(d.type);
});
var svgCanvas = d3.select(selectString)
.append("svg:svg")
.data([nodeSet])
.attr("width", width)
.attr("height", height)
.append("svg:g")
.attr("class", "focalNodeCanvas")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")")
// Start 1st Pie...
var arc1 = d3.svg.arc()
.innerRadius(width/8 - 20)
.outerRadius(width/8);
var pie1 = d3.layout.pie()
.value(function(d) { return 1; } );
var arcs1 = svgCanvas.selectAll("g.slice1")
.data(pie1)
.enter().append("svg:g")
.attr("class", "slice1")
.append("svg:a")
.attr("xlink:href", function(d) { return d.data.hlink; });
arcs1.append("svg:path")
.attr("fill", function(d) {return d.data.color; } )
.attr("type_value", function(d) {return d.data.type; } )
.attr("index_value", function(d, i) {return i; } )
.attr("id", function(d, i) {return "pie1-slice" + i; } )
.attr("color_value", function(d) {return d.data.color; } )
.attr("class", function(d, i) {
var str = d.data.type;
var strippedString = str.replace(/ /g, "_")
return "pie1-" + strippedString; })
.style("stroke", "White")
.attr("stroke-width", "2")
.attr("d", arc1)
.on('mouseover', sliceMouseOver)
.on("mouseout", sliceMouseOut);
// Start 2nd Pie...
var arc2 = d3.svg.arc()
.innerRadius(width/8 + 5)
.outerRadius(width/3.25 - 35);
var pie2 = d3.layout.pie()
.value(function(d) { return 1; } );
var arcs2 = svgCanvas.selectAll("g.slice2")
.data(pie2)
.enter().append("svg:g")
.attr("class", "slice2")
.append("svg:a")
.attr("xlink:href", function(d) { return d.data.hlink; });
arcs2.append("svg:path")
.attr("fill", function(d) {return d.data.color; } )
.style("fill-opacity", .25)
.attr("type_value", function(d) {return d.data.type; } )
.attr("index_value", function(d, i) {return i; } )
.attr("id", function(d, i) {return "pie2-slice" + i; } )
.attr("color_value", function(d) {return d.data.color; } )
.attr("class", function(d, i) {
var str = d.data.type;
var strippedString = str.replace(/ /g, "_")
return "pie2-" + strippedString; })
.style("stroke", "White")
.attr("stroke-width", "2")
.attr("d", arc2)
.on('mouseover', sliceMouseOver)
.on("mouseout", sliceMouseOut);
// Start 3rd Pie...
var arc3 = d3.svg.arc()
.innerRadius(width/3.25 - 30)
.outerRadius(width/3.25 - 10);
var pie3 = d3.layout.pie()
.value(function(d) { return 1; } );
var arcs3 = svgCanvas.selectAll("g.slice3")
.data(pie3)
.enter().append("svg:g")
.attr("class", "slice3")
.append("svg:a")
.attr("xlink:href", function(d) { return d.data.hlink; });
arcs3.append("svg:path")
.attr("fill", function(d) {return d.data.color; } )
.attr("type_value", function(d) {return d.data.type; } )
.attr("index_value", function(d, i) {return i; } )
.attr("id", function(d, i) {return "pie3-slice" + i; } )
.attr("color_value", function(d) {return d.data.color; } )
.attr("class", function(d, i) {
var str = d.data.type;
var strippedString = str.replace(/ /g, "_")
return "pie3-" + strippedString; })
.attr("stroke-width", "2")
.style("stroke", "White")
.attr("d", arc3)
.on('mouseover', sliceMouseOver)
.on("mouseout", sliceMouseOut);
// Add link names to the arcs, translated to the arc centroid and rotated.
arcs3.filter(function(d) {
return d.endAngle - d.startAngle > .2; }).append("svg:text")
.attr("dy", ".35em")
//.attr("dx", "-20px")
.attr("dx", function(d) {
var a = angle(d, 0, 0);
return a < 0 ? "-16px" : "16px";
})
.attr("text-anchor", function(d) {
var a = angle(d, 0, 0);
return a < 0 ? "start" : "end";
})
.attr("transform", function(d) { //set text'ss origin to the centroid
//we have to make sure to set these before calling arc.centroid
d.innerRadius = (width/8); // Set Inner Coordinate
d.outerRadius = (width/4); // Set Outer Coordinate
return "translate(" + arc2.centroid(d) + ")rotate(" + angle(d, -90, 90) + ")";
})
.style("fill", "Black")
.style("font", "normal 10px Arial")
.text(function(d) { return d.data.relName; });
// Add node names to the arcs, translated to the arc centroid and rotated.
arcs3.filter(function(d) {
return d.endAngle - d.startAngle > .2; }).append("svg:text")
.attr("dy", "5px")
.attr("dx", function(d) {
var a = angle(d, 0,0);
return a < 0 ? "15px" : "-15px";
})
.attr("text-anchor", function(d) {
var a = angle(d, 0, 0);
return a <= 0 ? "start" : "end";
})
.attr("type_value", function(d) {return d.data.type; } )
.attr("index_value", function(d, i) {return i; } )
.attr("id", function(d, i) {return "pie3-node" + i; } )
.attr("color_value", function(d) {return d.data.color; } )
.attr("class", function(d, i) {
var str = d.data.type;
var strippedString = str.replace(/ /g, "_")
return "nodeText-" + strippedString; })
.attr("transform", function(d) { //set text's origin to the centroid
// Make sure to set these before calling arc.centroid
d.innerRadius = (height/2); // Set Inner Coordinate
d.outerRadius = (height/2); // Set Outer Coordinate
return "translate(" + arc3.centroid(d) + ")rotate(" + angle(d, -90, 90) + ")";
})
.style("fill", "Blue")
.style("font", "normal 16px Arial")
.text(function(d) { return d.data.name; })
.on('mouseover', sliceMouseOver)
.on("mouseout", sliceMouseOut)
.append("svg:a")
.attr("xlink:href", function(d) { return d.data.hlink; });
// Updated Angle Calculation Function...
function angle(d, offset, threshold) {
var a = (d.startAngle + d.endAngle) * 90 / Math.PI + offset;
return a > threshold ? a - 180 : a;
}
// 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("circle")
.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);
// Plot the center node circle...
// Note: Issue w/ selecting circles requires this circle to be drawn after legend bullet circles
svgCanvas.selectAll("#focalNodeCanvas")
.data(focalNode)
.enter().append("svg:a")
.attr("xlink:href", function(d) { return d.hlink; })
.append("svg:circle") // Append circle element
.attr("x", width/2)
.attr("y", height/2)
.attr("stroke-width", "8")
.style("stroke", function(d, i) { return color_hash[d.type]; })
.style("fill", function(d, i) { return color_hash[d.type]; })
.style("fill-opacity", .25)
.attr("type_value", function(d) {return d.type; } )
.attr("color_value", function(d, i) { return color_hash[d.type]; })
.attr("class", "focalNodeCircle")
.attr("r", height/8-30)
.on('mouseover', focalNodeMouseOver)
.on("mouseout", focalNodeMouseOut);
// Add focalNode text...
svgCanvas.selectAll("a.focalNode_link")
.data(focalNode)
.enter().append("svg:a")
.attr("xlink:href", function(d) { return d.hlink; })
.append("text")
.attr("x", 0)
.attr("y", 0)
.attr("dx", 2)
.attr("dy", 7)
.attr("type_value", function(d) {return d.type; } )
.attr("class", "focalNodeText")
.style("fill", "Blue")
.style("font", "bold 16px Arial")
.attr("text-anchor","middle")
.text(function(d) { return d.name; })
.on('mouseover', focalNodeMouseOver)
.on("mouseout", focalNodeMouseOut);
// 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 {
width: 250px;
height: 100%;
padding: 0;
}
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>
<div class="div_RootBody">
<h1 style="text-align:center; font: bold 1.5em Arial;">D3 Based Radial Hub and Spoke Chart in an HTML Page</h1>
</div>
<div class="div_RootBody" id="radial_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">
drawRadialHubAndSpoke("Drawing 1", focalNode, nodeSet, "#radial_chart .chart", "colorScale20", 10, 100, 5, 0);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment