Skip to content

Instantly share code, notes, and snippets.

@mccannf

mccannf/index.html

Created November 29, 2012 12:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mccannf/4168667 to your computer and use it in GitHub Desktop.
Save mccannf/4168667 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Mike Heavers - Projects</title>
<script type="text/javascript" src="http://mikeheavers.com/transfers/projects/js/d3.v2.min.js"></script>
<script type="text/javascript" src="http://mikeheavers.com/transfers/projects/js/packages.js"></script>
<link type="text/css" rel="stylesheet" href="http://mikeheavers.com/transfers/projects/css/bundle-radial.css"/>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript" src="http://mikeheavers.com/transfers/projects/js/dat.gui.min.js"></script>
<script type="text/javascript" src="projects.js"></script>
</body>
</html>
Raw
projects.js
/* MH - USER DEFINED VARIABLES */
var chartConfig = { "Tension" : .85, "canvasSize" : 800, "dataFile" : "projects.json", "linePadding" : 160, "textPadding" : 30, "arcPadding" : 5, "arcWidth" : 30 }
var pi = Math.PI;
var radius = chartConfig.canvasSize / 2,
splines = [];
var cluster = d3.layout.cluster() //Cluster is the diagram style, a node to link dendrogram dendrogram (tree diagram)
.size([360, radius - chartConfig.linePadding]); //MH - sets the size of the circle in relation to the size of the canvas
var bundle = d3.layout.bundle(); //Bundles the node link lines so that they spread at the end but keep close initially
var arcInner = radius - chartConfig.linePadding + chartConfig.arcPadding;
var arcOuter = arcInner + chartConfig.arcWidth;
//var arc = d3.svg.arc().innerRadius(arcInner).outerRadius(arcOuter);
var line = d3.svg.line.radial()
.interpolate("bundle")
.tension(chartConfig.Tension) //How tightly to bundle the lines. No tension creates straight lines
.radius(function(d) { return d.y; })
.angle(function(d) { return d.x / 180 * Math.PI; });
var vis = d3.select("#chart").append("svg")
.attr("width", radius * 2)
.attr("height", radius * 2)
.attr("class","svg")
.append("g")
.attr("class","chart")
.attr("transform", "translate(" + radius + "," + radius + ")");
d3.json(chartConfig.dataFile, function(classes) {
var nodes = cluster.nodes(packages.root(classes)),
links = packages.imports(nodes),
splines = bundle(links);
var groupData = nodes.filter(function(d) { return groupItems(d.name, d.depth) });
//var groupData = vis.selectAll("g.group")
// .data(nodes.filter(function(d) {return d.children; }))
//.enter().append("g")
// .attr("class", "group");
var groupArc = d3.svg.arc()
.innerRadius(arcData[0].rI)
.outerRadius(arcData[0].rO)
.startAngle(function(d) { return findStartAngle(d.children) })
.endAngle(function(d) { return findEndAngle(d.children) });
var path = vis.selectAll ("path.link")
.data(links)
.enter().append("path")
.attr("class", function(d){ return "link source-" + d.source.key + " target-" + d.target.key; })
.attr("d", function(d,i){ return line(splines[i]); });
vis.selectAll("g.node")
.data(nodes.filter(function(n) { return !n.children; }))
.enter().append("g")
.attr("class", "node")
.attr("id",function(d){ return "node-" + d.key; })
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
.append("text")
.attr("dx", function(d) { return d.x < 180 ? chartConfig.textPadding : -chartConfig.textPadding; }) //dx Moves The text out away from the lines in a positive or negative direction, depending on which side of the axis it is on
.attr("dy", ".31em") //moves the text up or down radially around the circle
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
.text(function(d) {
textString = d.key;
textString = textString.split('_').join(' '); //MH replace underscores with spaces
return textString;
})
.on("mouseover",textOver)
.on("mouseout",textOut);
vis.selectAll("arc")
.data(groupData)
.enter().append("arc")
.attr("d", groupArc)
.attr("id", function (d) { return "arc" + d.key })
.attr("class", "arc")
.append("svg:textPath")
.attr("xlink:href", function (d) { return "#arc" + d.key })
.text(function(d) {
return d.key
})
.attr("class","arcText");
});
function groupItems(name, depth) {
if (name.indexOf("employers.") == -1)
return depth == 1;
else
return depth == 2;
}
function findStartAngle(children) {
var min = children[0].x;
children.forEach(function(d){
if (d.x < min)
min = d.x;
});
return min;
}
function findEndAngle(children) {
var max = children[0].x;
children.forEach(function(d){
if (d.x > max)
max = d.x;
});
return max;
}
var arcData = [
{aS: 0, aE: 45,rI:radius - chartConfig.linePadding + chartConfig.arcPadding,rO:radius - chartConfig.linePadding + chartConfig.textPadding-chartConfig.arcPadding}
];
function degToRad(degrees){
return degrees * (pi/180);
}
function textOver(d){
//console.log('over');
vis.selectAll("path.link.target-" + d.key)
.classed("target",true)
.each(updateNodes("source",true));
vis.selectAll("path.link.source-" + d.key)
.classed("source", true)
.each(updateNodes("target", true));
}
function textOut(d){
vis.selectAll("path.link.source-" + d.key)
.classed("source", false)
.each(updateNodes("target", false));
vis.selectAll("path.link.target-" + d.key)
.classed("target", false)
.each(updateNodes("source", false));
}
function updateNodes(name,value){
return function(d){
if (value) this.parentNode.appendChild(this);
vis.select("#node-"+d[name].key).classed(name,value);
}
}
// Just for bl.ocks.org
d3.select(self.frameElement).style("height", "800px");
d3.select(self.frameElement).style("width", "800px");
Raw
projects.json
[
{
"name":"employers.Freelance",
"imports":[
"clients.Montrose_High_School",
"clients.Technology_in_Education",
"clients.Fandango",
"clients.ICPA",
"clients.Showtime",
"clients._VVF",
"clients.Team_Tactical",
"clients.individuals.Andrew_Borin",
"clients.individuals.Christine_Cauble",
"clients.Rock_Rip_Roll",
"clients.Victoria_Kirk",
"clients.Valkor_Tactical",
"clients.Diane_Von_Furstenburg",
"clients.Bayou_Blue",
"clients.The_New_Lo_Fi",
"clients.ThirdEye",
"clients._Math_is_Beautiful",
"clients.Swiss_Petite",
"clients.individuals.Niko_Courtelis",
"clients.individuals.Leeorah_Hartman",
"clients.Advance_Network_Solutions",
"clients.Alliance_Cinema",
"clients.Amazing_Stories",
"clients.individuals.Anne_Marie_Michel",
"clients.Armada_Medical",
"clients.Asiel_Design",
"clients.Babes_w_Douchebags",
"clients.Bareback_Grill",
"clients.Bebe",
"clients.Blazen_Creative",
"clients.Blue_Bay",
"clients.individuals.Camilla_Bergstrom",
"clients.Colony_Club",
"clients.CAP",
"clients.Cope",
"clients.Creative_Remodeling",
"clients.individuals.Cynthia_Lingg",
"clients.individuals.Dorman_Baltazar",
"clients.Dwellers_Haven",
"clients.EL_Galerie",
"clients.Enchante",
"clients.Enclave",
"clients.Feed_the_Bull",
"clients.Filmmates",
"clients.GDA",
"clients.Ghosts_on_the_Radio",
"clients.Homenet",
"clients.Infusion_Home",
"clients.Izon",
"clients.Evolution_PT",
"clients.JHerzog",
"clients.JMS_Video",
"clients.Judith_Adelson",
"clients.individuals.Karina_Michel",
"clients.Kaya_Couture",
"clients.KG_Construction",
"clients.Levelstar",
"clients.Licata",
"clients.Live_Consulting",
"clients.Mar_Vel",
"clients.Mimi_Events",
"clients.North_American_Dining",
"clients.Our_Acadia",
"clients.PCVOA",
"clients.PEBC",
"clients.Processed_Meat",
"clients.Ryden",
"clients.Sagebrush",
"clients.Speed_of_Sound",
"clients.Sonic_Pool",
"clients.Stokes_Chili",
"clients.SVV",
"clients.Tarragon",
"clients.Tram",
"clients.Tuana",
"clients.Two_Oceans",
"clients.U_Cross",
"clients.Vuela_Altofilms",
"clients.Pool",
"clients.NYCA",
"clients.Solid_Gold",
"clients.armani.ArmaniExchange",
"clients.armani.AX_Life",
"clients.armani.Styletraxx",
"clients.Active_Outfitters",
"clients.AZN_Network",
"clients.Grayline_Worldwide",
"clients.Europtics",
"clients.Quintess",
"clients.Starz"
]
},
{
"name":"employers.Bayard",
"imports":[
"clients.ADP",
"clients.Centene",
"clients.University_of_Kentucky",
"clients.Hertz",
"clients.Six_Flags",
"clients.Kaiser_Permanente",
"clients.Ball_Aerospace",
"clients.Anheuser_Busch"
]
},
{
"name":"employers.SSV",
"imports":[
"clients.ssv.GearDirect",
"clients.ssv.Colorado_Snowboards",
"clients.ssv.Golf_Bargains",
"clients.ssv.Bicycle_Village"
]
},
{
"name":"employers.Rabble_and_Rouser",
"imports":[
"clients.weber.Weber",
"clients.weber.Ducane",
"clients.National_MS_Society",
"clients.City_of_Denver"
]
},
{
"name":"employers.Maverick",
"imports":[
"clients.bacardi.Bacardi",
"clients.bacardi.Grey_Goose",
"clients.bacardi.Bombay_Sapphire",
"clients.Sensis",
"clients.citi.CAPACD",
"clients.citi.NCST",
"clients.citi.Social_Compact",
"clients.bacardi.Mojito",
"clients.VeeV",
"clients.42Below",
"clients.Costa_Farms",
"agencies.Citi",
"clients.citi.EARN",
"clients.citi.NDC",
"clients.citi.NCLR",
"clients.citi.Justine_Petersen",
"clients.citi.Wildcat",
"agencies.RAPP",
"agencies.Dewey_Square",
"agencies.AgencyNet",
"agencies.Radical",
"clients.bacardi.7Tiki",
"clients.citi.AEO"
]
},
{
"name":"employers.Superfad",
"imports":[
"clients.superfad.AICE",
"clients.AMEX",
"clients.superfad.Pete_Frame",
"clients.Toyota",
"clients.superfad.On_Creativity",
"clients.IBM",
"clients.Amazon",
"clients.superfad.Laboratory",
"clients.superfad.Reprizent",
"clients.Bulwark",
"clients.Koch",
"agencies.Ogilvy",
"agencies.RAPP",
"agencies.EuroRSCG",
"agencies.Fitzgerald"
]
},
{
"name":"clients.Toyota",
"imports":[]
},
{
"name":"clients.IBM",
"imports":[
"agencies.EuroRSCG"
]
},
{
"name":"clients.Amazon",
"imports":[]
},
{
"name":"clients.AMEX",
"imports":[]
},
{
"name":"clients.Bulwark",
"imports":[
"agencies.Fitzgerald"
]
},
{
"name":"clients.Koch",
"imports":[]
},
{
"name":"clients.superfad.On_Creativity",
"imports":[]
},
{
"name":"clients.superfad.Pete_Frame",
"imports":[]
},
{
"name":"clients.superfad.Laboratory",
"imports":[]
},
{
"name":"clients.superfad.AICE",
"imports":[]
},
{
"name":"clients.superfad.Reprizent",
"imports":[]
},
{
"name":"clients.bacardi.Bacardi",
"imports":[]
},
{
"name":"clients.bacardi.Grey_Goose",
"imports":[]
},
{
"name":"clients.bacardi.Bombay_Sapphire",
"imports":[]
},
{
"name":"clients.bacardi.Mojito",
"imports":[]
},
{
"name":"clients.bacardi.7Tiki",
"imports":[]
},
{
"name":"clients.VeeV",
"imports":[]
},
{
"name":"clients.42Below",
"imports":[]
},
{
"name":"clients.Sensis",
"imports":[]
},
{
"name":"clients.Costa_Farms",
"imports":[]
},
{
"name":"clients.citi.NDC",
"imports":[]
},
{
"name":"clients.citi.NCLR",
"imports":[]
},
{
"name":"clients.citi.Justine_Petersen",
"imports":[]
},
{
"name":"clients.citi.NCLR",
"imports":[]
},
{
"name":"clients.citi.Wildcat",
"imports":[]
},
{
"name":"clients.citi.NCLR",
"imports":[]
},
{
"name":"clients.citi.AEO",
"imports":[]
},
{
"name":"clients.citi.EARN",
"imports":[]
},
{
"name":"clients.citi.CAPACD",
"imports":[]
},
{
"name":"clients.citi.Social_Compact",
"imports":[]
},
{
"name":"clients.citi.NCST",
"imports":[]
},
{
"name":"clients.National_MS_Society",
"imports":[]
},
{
"name":"clients.City_of_Denver",
"imports":[]
},
{
"name":"clients.weber.Weber",
"imports":[]
},
{
"name":"clients.weber.Ducane",
"imports":[]
},
{
"name":"clients.ssv.GearDirect",
"imports":[]
},
{
"name":"clients.ssv.Colorado_Snowboards",
"imports":[]
},
{
"name":"clients.ssv.Golf_Bargains",
"imports":[]
},
{
"name":"clients.ssv.Bicycle_Village",
"imports":[]
},
{
"name":"clients.Anheuser_Busch",
"imports":[]
},
{
"name":"clients.Hertz",
"imports":[]
},
{
"name":"clients.Six_Flags",
"imports":[]
},
{
"name":"clients.Ball_Aerospace",
"imports":[]
},
{
"name":"clients.ADP",
"imports":[]
},
{
"name":"clients.University_of_Kentucky",
"imports":[]
},
{
"name":"clients.Centene",
"imports":[]
},
{
"name":"clients.Kaiser_Permanente",
"imports":[]
},
{
"name":"clients.individuals.Karina_Michel",
"imports":[]
},
{
"name":"clients.individuals.Leeorah_Hartman",
"imports":[]
},
{
"name":"clients.individuals.Niko_Courtelis",
"imports":[]
},
{
"name":"clients.individuals.Anne_Marie_Michel",
"imports":[]
},
{
"name":"clients.individuals.Andrew_Borin",
"imports":[]
},
{
"name":"clients.individuals.Christine_Cauble",
"imports":[]
},
{
"name":"clients.individuals.Camilla_Bergstrom",
"imports":[]
},
{
"name":"clients.individuals.Cynthia_Lingg",
"imports":[]
},
{
"name":"clients.individuals.Dorman_Baltazar",
"imports":[]
},
{
"name":"clients.Filmmates",
"imports":[]
},
{
"name":"clients.GDA",
"imports":[]
},
{
"name":"clients.Ghosts_on_the_Radio",
"imports":[]
},
{
"name":"clients.Homenet",
"imports":[]
},
{
"name":"clients.Infusion_Home",
"imports":[]
},
{
"name":"clients.Izon",
"imports":[]
},
{
"name":"clients.JHerzog",
"imports":[]
},
{
"name":"clients.JMS_Video",
"imports":[]
},
{
"name":"clients.Evolution_PT",
"imports":[]
},
{
"name":"clients.Judith_Adelson",
"imports":[]
},
{
"name":"clients.Kaya_Couture",
"imports":[]
},
{
"name":"clients.KG_Construction",
"imports":[]
},
{
"name":"clients.Levelstar",
"imports":[]
},
{
"name":"clients.Licata",
"imports":[]
},
{
"name":"clients.Live_Consulting",
"imports":[]
},
{
"name":"clients.Mar_Vel",
"imports":[]
},
{
"name":"clients.Mimi_Events",
"imports":[]
},
{
"name":"clients.North_American_Dining",
"imports":[]
},
{
"name":"clients.Our_Acadia",
"imports":[]
},
{
"name":"clients.PCVOA",
"imports":[]
},
{
"name":"clients.PEBC",
"imports":[]
},
{
"name":"clients.Processed_Meat",
"imports":[]
},
{
"name":"clients.Ryden",
"imports":[]
},
{
"name":"clients.Sagebrush",
"imports":[]
},
{
"name":"clients.Speed_of_Sound",
"imports":[]
},
{
"name":"clients.Sonic_Pool",
"imports":[]
},
{
"name":"clients.Stokes_Chili",
"imports":[]
},
{
"name":"clients.SVV",
"imports":[]
},
{
"name":"clients.Tarragon",
"imports":[]
},
{
"name":"clients.Tram",
"imports":[]
},
{
"name":"clients.Tuana",
"imports":[]
},
{
"name":"clients.Two_Oceans",
"imports":[]
},
{
"name":"clients.U_Cross",
"imports":[]
},
{
"name":"clients.Vuela_Altofilms",
"imports":[]
},
{
"name":"clients.Pool",
"imports":[]
},
{
"name":"clients.NYCA",
"imports":[]
},
{
"name":"clients.Solid_Gold",
"imports":[]
},
{
"name":"clients.Montrose_High_School",
"imports":[]
},
{
"name":"clients.Technology_in_Education",
"imports":[]
},
{
"name":"clients.Fandango",
"imports":[]
},
{
"name":"clients.ICPA",
"imports":[]
},
{
"name":"clients.Showtime",
"imports":[]
},
{
"name":"clients._VVF",
"imports":[]
},
{
"name":"clients.Team_Tactical",
"imports":[]
},
{
"name":"clients.Rock_Rip_Roll",
"imports":[]
},
{
"name":"clients.Victoria_Kirk",
"imports":[]
},
{
"name":"clients.Valkor_Tactical",
"imports":[]
},
{
"name":"clients.Diane_Von_Furstenburg",
"imports":[]
},
{
"name":"clients.Bayou_Blue",
"imports":[]
},
{
"name":"clients.The_New_Lo_Fi",
"imports":[]
},
{
"name":"clients.ThirdEye",
"imports":[]
},
{
"name":"clients._Math_is_Beautiful",
"imports":[]
},
{
"name":"clients.Swiss_Petite",
"imports":[]
},
{
"name":"clients.Advance_Network_Solutions",
"imports":[]
},
{
"name":"clients.Alliance_Cinema",
"imports":[]
},
{
"name":"clients.Amazing_Stories",
"imports":[]
},
{
"name":"clients.Active_Outfitters",
"imports":[]
},
{
"name":"clients.AZN_Network",
"imports":[]
},
{
"name":"clients.Grayline_Worldwide",
"imports":[]
},
{
"name":"clients.Europtics",
"imports":[]
},
{
"name":"clients.Quintess",
"imports":[]
},
{
"name":"clients.Starz",
"imports":[]
},
{
"name":"clients.Armada_Medical",
"imports":[]
},
{
"name":"clients.Babes_w_Douchebags",
"imports":[]
},
{
"name":"clients.Asiel_Design",
"imports":[]
},
{
"name":"clients.Bareback_Grill",
"imports":[]
},
{
"name":"clients.Bebe",
"imports":[]
},
{
"name":"clients.Blazen_Creative",
"imports":[]
},
{
"name":"clients.Blue_Bay",
"imports":[]
},
{
"name":"clients.Colony_Club",
"imports":[]
},
{
"name":"clients.CAP",
"imports":[]
},
{
"name":"clients.Cope",
"imports":[]
},
{
"name":"clients.Creative_Remodeling",
"imports":[]
},
{
"name":"clients.Dwellers_Haven",
"imports":[]
},
{
"name":"clients.EL_Galerie",
"imports":[]
},
{
"name":"clients.Enchante",
"imports":[]
},
{
"name":"clients.Enclave",
"imports":[]
},
{
"name":"clients.Feed_the_Bull",
"imports":[]
},
{
"name":"clients.armani.ArmaniExchange",
"imports":[]
},
{
"name":"clients.armani.AX_Life",
"imports":[]
},
{
"name":"clients.armani.Styletraxx",
"imports":[]
},
{
"name":"agencies.Dewey_Square",
"imports":[]
},
{
"name":"agencies.Radical",
"imports":[]
},
{
"name":"agencies.AgencyNet",
"imports":[]
},
{
"name":"agencies.Ogilvy",
"imports":[]
},
{
"name":"agencies.RAPP",
"imports":[]
},
{
"name":"agencies.EuroRSCG",
"imports":[]
},
{
"name":"agencies.Fitzgerald",
"imports":[]
},
{
"name":"agencies.Citi",
"imports":[]
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment