Created
July 24, 2012 11:11
-
-
Save Guerino1/3169420 to your computer and use it in GitHub Desktop.
D3 Radial Wheel With HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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