al6x/index.html

## index.html
<!-- http://bl.ocks.org/3827722 -->
<!DOCTYPE html>
<head>
  <link href='style.css' rel='stylesheet' type='text/css' />
  <script src="http://d3js.org/d3.v2.min.js"></script>
</head>
<body>
  <div class='chord'></div>
  <div class='details'>
    <p class='details-name'></p>
    <pre class='details-code'></pre>
  </div>
  <script src="script.js"></script>
</body>

## script.js
// Data.
var components = [
  {
    name    : "Unix",
    color   : "#049cdb",
    details :
      "type       : 'cobalt.core.OperatingSystem'\n" +
      "hardwareId : 't1.micro'\n" +
      "imageId    : 'us-east-1/ami-a29943cb'\n" +
      "instances  : 3"
  },
  {
    name: "MySQL",
    color: "#46a546",
    details :
      "type : 'cobalt.core.MySQL'\n" +
      "port : 3943"
  },
  {
    name: "NGinx",
    color: "#9d261d",
    details :
      "type : 'cobalt.core.NGinx'\n" +
      "host : 'app.enclave.com\n" +
      "port : 80\n" +
      "path : /data/wordpress\n"
  },
  {
    name: "PHP",
    color: "#ffc40d",
    details :
      "type    : 'cobalt.core.PHP'\n" +
      "version : 5.0.0"
  },
  {
    name: "FileStorage",
    color: "#f89406",
    details :
      "type  : 'cobalt.core.FileStorage'\n" +
      "path  : '/data/wordpress/files'\n" +
      "limit : 500Gb"
  },
  {
    name: "WordPress",
    color: "#c3325f",
    details :
      "type  : 'cobalt.ext.WordPress'\n" +
      "theme : 'clean'\n" +
      "path  : '/data/wordpress'"
  }
]

var matrix = [
  [0, 1, 1, 1, 1, 0],
  [0.4, 0, 0, 0, 0, 1],
  [0.4, 0, 0, 0, 0.4, 1],
  [0.4, 0, 0, 0, 0, 1],
  [0.4, 0, 1, 0, 0, 1],
  [0, 0.4, 0.4, 0.4, 0.4, 0]
]

// Graphics.
var width = 400,
    height = 400,
    outerRadius = Math.min(width, height) / 2 - 10,
    innerRadius = outerRadius - 24;

var formatPercent = d3.format(".1%");

var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var layout = d3.layout.chord()
    .padding(.04)
    .sortSubgroups(d3.descending)
    .sortChords(d3.ascending);

var path = d3.svg.chord()
    .radius(innerRadius);

var svg = d3.select(".chord").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("id", "circle")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.append("circle")
    .attr("r", outerRadius);

// Compute the chord layout.
layout.matrix(matrix);

// Add a group per neighborhood.
var group = svg.selectAll(".group")
    .data(layout.groups)
  .enter().append("g")
    .attr("class", "group")
    .on("mouseover", mouseover);

// Add a mouseover title.
group.append("title").text(function(d, i) {
  return components[i].name + ": " + formatPercent(d.value) + " of origins";
});

// Add the group arc.
var groupPath = group.append("path")
    .attr("id", function(d, i) { return "group" + i; })
    .attr("d", arc)
    .style("fill", function(d, i) { return components[i].color; });

// Add a text label.
var groupText = group.append("text")
    .attr("x", 6)
    .attr("dy", 15);

groupText.append("textPath")
    .attr("xlink:href", function(d, i) { return "#group" + i; })
    .text(function(d, i) { return components[i].name; });

// Remove the labels that don't fit. :(
groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength(); })
    .remove();

// Add the chords.
var chord = svg.selectAll(".chord")
    .data(layout.chords)
  .enter().append("path")
    .attr("class", "chord")
    .style("fill", function(d) { return components[d.source.index].color; })
    .attr("d", path);

// Add an elaborate mouseover title for each chod.
chord.append("title").text(function(d) {
  return components[d.source.index].name
      + " → " + components[d.target.index].name
      + ": " + formatPercent(d.source.value)
      + "\n" + components[d.target.index].name
      + " → " + components[d.source.index].name
      + ": " + formatPercent(d.target.value);
});

function mouseover(d, i) {
  // chord.classed("fade", function(p) {
  //   return p.source.index != i && p.target.index != i;
  // });
  chord.classed("fade", function(p) {
    return p.source.index != i && p.target.index != i;
  });
  chord.classed("opaque", function(p) {
    return p.source.index == i;
  });

  var component = components[i]
  d3.select('.details-name').html(component.name)
  d3.select('.details-code').html(component.details)
}

var component = components[0]
d3.select('.details-name').html(component.name)
d3.select('.details-code').html(component.details)

## style.css
#circle circle {
  fill: none;
  pointer-events: all;
}

.group path {
  fill-opacity: .5;
}

path.chord {
  stroke: #000;
  stroke-width: .25px;
}

#circle:hover path.fade {
  display: none;
}

#circle:hover path.opaque {
  fill-opacity: .1;
}

.details {
  position: absolute;
  left: 420px;
  top: 0px;
}
	<!-- http://bl.ocks.org/3827722 -->
	<!DOCTYPE html>
	<head>
	<link href='style.css' rel='stylesheet' type='text/css' />
	<script src="http://d3js.org/d3.v2.min.js"></script>
	</head>
	<body>
	<div class='chord'></div>
	<div class='details'>
	<p class='details-name'></p>
	<pre class='details-code'></pre>
	</div>
	<script src="script.js"></script>
	</body>
	// Data.
	var components = [
	{
	name : "Unix",
	color : "#049cdb",
	details :
	"type : 'cobalt.core.OperatingSystem'\n" +
	"hardwareId : 't1.micro'\n" +
	"imageId : 'us-east-1/ami-a29943cb'\n" +
	"instances : 3"
	},
	{
	name: "MySQL",
	color: "#46a546",
	details :
	"type : 'cobalt.core.MySQL'\n" +
	"port : 3943"
	},
	{
	name: "NGinx",
	color: "#9d261d",
	details :
	"type : 'cobalt.core.NGinx'\n" +
	"host : 'app.enclave.com\n" +
	"port : 80\n" +
	"path : /data/wordpress\n"
	},
	{
	name: "PHP",
	color: "#ffc40d",
	details :
	"type : 'cobalt.core.PHP'\n" +
	"version : 5.0.0"
	},
	{
	name: "FileStorage",
	color: "#f89406",
	details :
	"type : 'cobalt.core.FileStorage'\n" +
	"path : '/data/wordpress/files'\n" +
	"limit : 500Gb"
	},
	{
	name: "WordPress",
	color: "#c3325f",
	details :
	"type : 'cobalt.ext.WordPress'\n" +
	"theme : 'clean'\n" +
	"path : '/data/wordpress'"
	}
	]

	var matrix = [
	[0, 1, 1, 1, 1, 0],
	[0.4, 0, 0, 0, 0, 1],
	[0.4, 0, 0, 0, 0.4, 1],
	[0.4, 0, 0, 0, 0, 1],
	[0.4, 0, 1, 0, 0, 1],
	[0, 0.4, 0.4, 0.4, 0.4, 0]
	]

	// Graphics.
	var width = 400,
	height = 400,
	outerRadius = Math.min(width, height) / 2 - 10,
	innerRadius = outerRadius - 24;

	var formatPercent = d3.format(".1%");

	var arc = d3.svg.arc()
	.innerRadius(innerRadius)
	.outerRadius(outerRadius);

	var layout = d3.layout.chord()
	.padding(.04)
	.sortSubgroups(d3.descending)
	.sortChords(d3.ascending);

	var path = d3.svg.chord()
	.radius(innerRadius);

	var svg = d3.select(".chord").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("id", "circle")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	svg.append("circle")
	.attr("r", outerRadius);

	// Compute the chord layout.
	layout.matrix(matrix);

	// Add a group per neighborhood.
	var group = svg.selectAll(".group")
	.data(layout.groups)
	.enter().append("g")
	.attr("class", "group")
	.on("mouseover", mouseover);

	// Add a mouseover title.
	group.append("title").text(function(d, i) {
	return components[i].name + ": " + formatPercent(d.value) + " of origins";
	});

	// Add the group arc.
	var groupPath = group.append("path")
	.attr("id", function(d, i) { return "group" + i; })
	.attr("d", arc)
	.style("fill", function(d, i) { return components[i].color; });

	// Add a text label.
	var groupText = group.append("text")
	.attr("x", 6)
	.attr("dy", 15);

	groupText.append("textPath")
	.attr("xlink:href", function(d, i) { return "#group" + i; })
	.text(function(d, i) { return components[i].name; });

	// Remove the labels that don't fit. :(
	groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength(); })
	.remove();

	// Add the chords.
	var chord = svg.selectAll(".chord")
	.data(layout.chords)
	.enter().append("path")
	.attr("class", "chord")
	.style("fill", function(d) { return components[d.source.index].color; })
	.attr("d", path);

	// Add an elaborate mouseover title for each chod.
	chord.append("title").text(function(d) {
	return components[d.source.index].name
	+ " → " + components[d.target.index].name
	+ ": " + formatPercent(d.source.value)
	+ "\n" + components[d.target.index].name
	+ " → " + components[d.source.index].name
	+ ": " + formatPercent(d.target.value);
	});

	function mouseover(d, i) {
	// chord.classed("fade", function(p) {
	// return p.source.index != i && p.target.index != i;
	// });
	chord.classed("fade", function(p) {
	return p.source.index != i && p.target.index != i;
	});
	chord.classed("opaque", function(p) {
	return p.source.index == i;
	});

	var component = components[i]
	d3.select('.details-name').html(component.name)
	d3.select('.details-code').html(component.details)
	}

	var component = components[0]
	d3.select('.details-name').html(component.name)
	d3.select('.details-code').html(component.details)
	#circle circle {
	fill: none;
	pointer-events: all;
	}

	.group path {
	fill-opacity: .5;
	}

	path.chord {
	stroke: #000;
	stroke-width: .25px;
	}

	#circle:hover path.fade {
	display: none;
	}

	#circle:hover path.opaque {
	fill-opacity: .1;
	}

	.details {
	position: absolute;
	left: 420px;
	top: 0px;
	}