Graphics Reference
In-Depth Information
// ....
var
chord;
// Add a group per country. On hover add the fade
class to
// other chords
var
group =
svg.selectAll(
'.group'
).data(layout.groups).enter()
.append(
'g'
).attr(
'class'
,
'group'
).on(
'mouseover'
,
function
mouseover(d, i) {
chord.classed(
'fade'
,
function
(p) {
return
p.source.index != i && p.target.index != i;
});
});
// Arcs will step through color spectrum...
var
startHue = 180,
hueStep = 360 / countries.length;
var
radius = Math.min(width, height)/2 - 10,
innerRadius = radius - 24;
function
countryColor(i, l) {
return
d3.hsl(startHue - i*hueStep,.7,
l||.5).rgb().toString();
}
// Add the country arcs.
var
groupPath = group.append(
'path'
).attr(
'id'
,
function
(d, i) {
return
'group'
+ i;
}).attr(
'd'
,
d3.svg.arc().innerRadius(innerRadius).outerRadius
(radius))
// Fill with unique hue.
.style(
'fill'
,
function
(d, i) {
return
countryColor(i);
