|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<body> |
|
<svg width="960" height="960"></svg> |
|
<script> |
|
d3.text("data.csv", function(error, datas) { |
|
var dataf = d3.csv.parseRows(datas); |
|
|
|
dataf.shift(); |
|
|
|
var text = []; |
|
var nest = d3.nest() |
|
.key(function(d) { return d[1]; }) |
|
.entries(dataf) |
|
.sort(function(a, b) { return a.key < b.key ? -1 : 1; }); |
|
nest.forEach(function(d) { |
|
text.push(d.key); |
|
}); |
|
nest = d3.nest() |
|
.key(function(d) { return d[2]; }) |
|
.entries(dataf) |
|
.sort(function(a, b) { return a.key < b.key ? -1 : 1; }); |
|
nest.forEach(function(d) { |
|
text.push(d.key); |
|
}); |
|
var textnested = []; |
|
d3.nest() |
|
.key(function(d) { return d; }) |
|
.entries(text) |
|
.forEach(function(d) { |
|
textnested.push(d.key); |
|
}); |
|
if(textnested.length < text.length) { |
|
var inDirection = 1; |
|
text = textnested; |
|
text.sort(function(a, b) { return a < b ? -1 : 1; }); |
|
} |
|
nest = d3.nest() |
|
.key(function(d) { return d[0]; }) |
|
.entries(dataf); |
|
if(nest.length < dataf.length) { |
|
nest.forEach(function(d) { |
|
d.values.forEach(function(e) { e.push(1/d.values.length); }); |
|
}); |
|
} |
|
|
|
var matrix = []; |
|
text.forEach(function(d, i) { |
|
matrix[i] = d3.range(text.length).map(function() { return 0; }); |
|
}); |
|
dataf.forEach(function(d) { |
|
var x = text.indexOf(d[1]), |
|
y = text.indexOf(d[2]); |
|
if(nest.length < dataf.length) matrix[x][y]+=d[d.length-1]; |
|
else matrix[x][y]++; |
|
if(!inDirection) { |
|
if(nest.length < dataf.length) matrix[y][x]+=d[d.length-1]; |
|
else matrix[y][x]++; |
|
} |
|
}); |
|
var chord = d3.layout.chord() |
|
.padding(.04) |
|
.matrix(matrix); |
|
var svg = d3.select("svg") |
|
.append("g") |
|
.attr("transform", "translate(480, 480)"); |
|
var fill = d3.scale.category20(); |
|
var g = svg.selectAll(".group") |
|
.data(chord.groups) |
|
.enter() |
|
.append("g") |
|
.attr("class", "group"); |
|
g.append("path") |
|
.attr("d", d3.svg.arc().innerRadius(350).outerRadius(370)) |
|
.style("fill", function(d) { return fill(d.index); }) |
|
.on("mouseover", standOut(0.1)) |
|
.on("mouseout", standOut(1)); |
|
g.append("text") |
|
.attr("transform", function(d) { |
|
return "rotate("+(((d.startAngle+d.endAngle)/2) * (180/Math.PI) - 90)+")" |
|
+ "translate(376)" + (((d.startAngle+d.endAngle)/2) > Math.PI ? "rotate(180)" : ""); |
|
}) |
|
.attr("text-anchor", function(d) { return ((d.startAngle+d.endAngle)/2) > Math.PI ? "end" : ""; }) |
|
.text(function(d) { return text[d.index]; }); |
|
svg.selectAll(".chord") |
|
.data(chord.chords) |
|
.enter() |
|
.append("path") |
|
.attr("class", "chord") |
|
.attr("d", d3.svg.chord().radius(350)) |
|
.style("fill", function(d) { return fill(d.source.index); }) |
|
.style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); }); |
|
function standOut(o) { |
|
return function(d, i) { |
|
var gstandout = []; |
|
svg.selectAll(".chord") |
|
.each(function(e) { e.source.index == i ? gstandout.push(e.target.index) : e.target.index == i ? gstandout.push(e.source.index) : ""; }) |
|
.filter(function(e) { return e.source.index != i && e.target.index != i; }) |
|
.style("opacity", o); |
|
svg.selectAll(".group") |
|
.filter(function(e, j) { return gstandout.indexOf(j) == -1 && j != i; }) |
|
.style("opacity", o); |
|
}; |
|
} |
|
}); |
|
</script> |
|
</body> |