block by mccannf 4168667

4168667

Full Screen

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="//mikeheavers.com/transfers/projects/js/d3.v2.min.js"></script>
    <script type="text/javascript" src="//mikeheavers.com/transfers/projects/js/packages.js"></script>
    <link type="text/css" rel="stylesheet" href="//mikeheavers.com/transfers/projects/css/bundle-radial.css"/>
  </head>
  <body>
    <div id="chart"></div>
    <script type="text/javascript" src="//mikeheavers.com/transfers/projects/js/dat.gui.min.js"></script>
    <script type="text/javascript" src="projects.js"></script>
  </body>
</html>

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");

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":[]
  }
]