Skip to content

Instantly share code, notes, and snippets.

@puf

puf/index.html

Last active August 29, 2015 14:05
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 puf/296d68f059aa4b260746 to your computer and use it in GitHub Desktop.
Save puf/296d68f059aa4b260746 to your computer and use it in GitHub Desktop.
Download ZIP
Chord chart with mail volumes
Raw
index.html
<html>
<head>
<style>
body {
font: 10px sans-serif;
}
.chord path {
fill-opacity: .67;
stroke: #000;
stroke-width: .5px;
}
text {
font-size: 10px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"> </script>
</head>
<body>
<script>
var matrix = [
[25, 12, 4, 4, 4, 0, 23, 0, 0, 4, 0, 4, 675, 4, 0, 4, 4, 168, 4, 4, 354, 0, 8, 4, 4],
[0, 44, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 837, 0, 0, 977],
[0, 0, 42, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 88, 32, 0, 0, 0, 0, 0, 0, 0, 0, 36, 0, 18, 1, 0, 5, 1, 0, 0, 1, 0, 0],
[0, 0, 0, 74, 7, 0, 0, 0, 0, 0, 0, 0, 0, 87, 0, 86, 65, 0, 78, 84, 0, 0, 100, 2, 1],
[3, 0, 0, 0, 0, 26, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[49, 0, 0, 0, 0, 0, 23, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 39, 0, 0, 0, 0, 0, 0, 0],
[4, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 59, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 638, 0, 241, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 66, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[64, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 76, 0, 0, 81, 0, 0, 0, 0],
[0, 0, 0, 242, 274, 0, 0, 0, 0, 0, 0, 25, 0, 0, 0, 246, 257, 0, 244, 242, 0, 0, 249, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0],
[0, 0, 0, 0, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 4, 0, 0],
[556, 0, 0, 0, 0, 0, 33, 0, 0, 0, 0, 0, 68, 0, 0, 0, 0, 1, 0, 0, 97, 0, 0, 0, 0],
[0, 0, 0, 3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0],
[0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0],
[122, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 6, 0, 0, 0, 0, 0, 0, 0],
[0, 37, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 21],
[0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 48, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 36, 0, 0, 0]
];
var subjects = [
"sally.beck@enron.com",
"eric.bass@enron.com",
"john.arnold@enron.com",
"larry.campbell@enron.com",
"don.baughman@enron.com",
"michelle.cash@enron.com",
"rick.buy@enron.com",
"phillip.allen@enron.com",
"lynn.blair@enron.com",
"mike.carson@enron.com",
"shelley.corman@enron.com",
"clint.dean@enron.com",
"patti.thompson@enron.com",
"kayne.coulter@enron.com",
"monika.causholli@enron.com",
"john.kinser@enron.com",
"juan.hernandez@enron.com",
"shona.wilson@enron.com",
"joe.stepenovitch@enron.com",
"joe.errigo@enron.com",
"brent.price@enron.com",
"matthew.lenhart@enron.com",
"dean.laurent@enron.com",
"robert.benson@enron.com",
"bryan.hull@enron.com"
];
var chord = d3.layout.chord()
.padding(.05)
.sortSubgroups(d3.descending)
.matrix(matrix);
var width = 960,
height = 500,
innerRadius = Math.min(width, height) * .41,
outerRadius = innerRadius * 1.1;
var fill = d3.scale.ordinal()
.domain(d3.range(4))
.range(["#000000", "#FFDD89", "#957244", "#F26223"]);
var svg = d3.select("body").append("svg")
.attr({
width: width,
height: height,
xmlns: "http://www.w3.org/2000/svg",
xlink: "http://www.w3.org/1999/xlink"
})
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var paths = svg.append("g").selectAll("path")
.data(chord.groups);
// this draws the outer rim of segments
paths
.enter().append("path")
.style("fill", function(d) { return fill(d.index); })
.style("stroke", function(d) { return fill(d.index); })
.attr('id', function(d) { return 'p'+d.index; })
.attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
.on("mouseover", fade(.1))
.on("mouseout", fade(1));
// this draws the text labels over each segment
paths.enter()
.append('text')
.append('textPath')
.attr('xlink:href', function(d) { return '#p'+d.index; })
.text(function(d) { return subjects[d.index]; });
// this draws the connectiosn between the segments around the rim
svg.append("g")
.attr("class", "chord")
.selectAll("path")
.data(chord.chords)
.enter().append("path")
.attr("d", d3.svg.chord().radius(innerRadius))
.style("fill", function(d) { return fill(d.target.index); })
.style("opacity", 1);
// Returns an event handler for fading a given chord group.
function fade(opacity) {
return function(g, i) {
svg.selectAll(".chord path")
.filter(function(d) { return d.source.index != i && d.target.index != i; })
.transition()
.style("opacity", opacity);
svg.selectAll("text")
.transition()
.style('font-size', function(d) { return d.index == i ? 20 : 10 });
};
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment