Created
April 23, 2012 10:18
-
-
Save vizv/2470107 to your computer and use it in GitHub Desktop.
created by water, a live-coding editor (http://water.gabrielflor.it)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// chord diagram from http://mbostock.github.com/d3/ex/chord.html | |
// colors from the twilight theme: http://bit.ly/wufWv1 | |
var chord = d3.layout.chord() | |
.padding(0.05) | |
.sortSubgroups(d3.descending) | |
.matrix([ | |
[9798, 5871, 8916, 2868], | |
[ 1951, 10048, 2060, 6171], | |
[ 8010, 16145, 8090, 8045], | |
[ 1013, 990, 940, 6907] | |
]); | |
var w = $('svg').width(), | |
h = $('svg').height(), | |
r0 = Math.min(w, h) * 0.41, | |
r1 = r0 * 1.1; | |
var fill = d3.scale.ordinal() | |
.domain(d3.range(4)) | |
.range(["#CF6A4C", "#CDA869", "#8F9D6A", "#7587A6"]); | |
var svg = d3.select('svg') | |
.append("g") | |
.attr("transform", "translate(" w / 2 "," h / 2 ")"); | |
svg.append("g") | |
.selectAll("path") | |
.data(chord.groups) | |
.enter().append("path") | |
.style("fill", function(d) { return fill(d.index); }) | |
.style("stroke", function(d) { return fill(d.index); }) | |
.attr("d", d3.svg.arc().innerRadius(r0).outerRadius(r1)) | |
.on("mouseover", fade(0.1)) | |
.on("mouseout", fade(1)); | |
var ticks = svg.append("g") | |
.selectAll("g") | |
.data(chord.groups) | |
.enter().append("g") | |
.selectAll("g") | |
.data(groupTicks) | |
.enter().append("g") | |
.attr("transform", function(d) { | |
return "rotate(" (d.angle * 180 / Math.PI - 90) ")" | |
"translate(" r1 ",0)"; | |
}); | |
ticks.append("line") | |
.attr("x1", 1) | |
.attr("y1", 0) | |
.attr("x2", 5) | |
.attr("y2", 0) | |
.style("stroke", "#000"); | |
ticks.append("text") | |
.attr("x", 8) | |
.attr("dy", ".35em") | |
.attr("text-anchor", function(d) { | |
return d.angle > Math.PI ? "end" : null; | |
}) | |
.attr("transform", function(d) { | |
return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; | |
}) | |
.text(function(d) { return d.label; }); | |
svg.append("g") | |
.attr("class", "chord") | |
.selectAll("path") | |
.data(chord.chords) | |
.enter().append("path") | |
.style("fill", function(d) { return fill(d.target.index); }) | |
.attr("d", d3.svg.chord().radius(r0)) | |
.style("opacity", 1); | |
$('.chord path').css('fill-opacity', 0.67); | |
$('.chord path').css('stroke', '#000'); | |
$('.chord path').css('stroke-width', 0.5); | |
/** Returns an array of tick angles and labels, given a group. */ | |
function groupTicks(d) { | |
var k = (d.endAngle - d.startAngle) / d.value; | |
return d3.range(0, d.value, 1000).map(function(v, i) { | |
return { | |
angle: v * k d.startAngle, | |
label: i % 5 ? null : v / 1000 "k" | |
}; | |
}); | |
} | |
/** Returns an event handler for fading a given chord group. */ | |
function fade(opacity) { | |
return function(g, i) { | |
svg.selectAll("g.chord path") | |
.filter(function(d) { | |
return d.source.index != i && d.target.index != i; | |
}) | |
.transition() | |
.style("opacity", opacity); | |
}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment