Skip to content

Instantly share code, notes, and snippets.

@syntagmatic
Forked from mbostock/.block
Last active August 29, 2015 14:15
Embed
What would you like to do?
Chord Arc Labels
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: sans-serif;
font-size: 40px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<script>
var matrix = d3.range(6).map(function(row) {
return d3.range(6).map(function(col) {
return Math.pow(Math.random(),1.5);
});
});
var width = 960,
height = 500,
innerRadius = Math.min(width, height) * 0.4,
outerRadius = innerRadius + 40;
var fill = d3.scale.ordinal()
.range(colorbrewer.Spectral[6]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var chord = d3.layout.chord()
.padding(0.05)
.sortSubgroups(d3.descending)
.matrix(matrix);
svg.selectAll("path")
.data(chord.groups)
.enter().append("path")
.style("fill", function(d) { return fill(d.index); })
.style("stroke", "black")
.style("opacity",0.5)
.attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
.attr("class","arc")
.attr("id",function(d,i){return "group"+i;});
svg.selectAll("text")
.data(chord.groups)
.enter().append("text")
.attr("dx", 4)
.attr("dy", 35)
.append("textPath")
.attr("class", "label")
.attr("xlink:href", function(d) { return "#group" + d.index; })
.text(function(d) { return "Arc " + d.index; })
.style("fill", function(d) { return d3.rgb(fill(d.index)).darker(2); });
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) {
var chordcolor = d3.scale.linear()
.range([fill(d.target.index), fill(d.source.index)])
.domain([-1,1])
.interpolate(d3.interpolateLab);
var weight = (d.source.value - d.target.value) / (d.source.value + d.target.value);
return chordcolor(weight);
})
.style("stroke","black")
.style("opacity", 0.2);
d3.select(self.frameElement).style("height", height + "px");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment