Published
Edited
Jun 8, 2019
1 star
chart = {
const svg = d3.select(DOM.svg(width, height))
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("font-size", 10)
.attr("font-family", "sans-serif")
.style("width", "100%")
.style("height", "auto");
const chords = chord(data.matrix);
const group = svg.append("g")
.selectAll("g")
.data(chords.groups)
.enter().append("g");
// **QUESTION: Does the opacity mouseover go here?
group.append("path")
.attr("class", "group")
.attr("fill", d => color(d.index))
.attr("stroke", d => color(d.index))
.attr("d", arc)
.on("mouseover", fade(.1))
.on("mouseout", fade(opacityDefault));
group.append("text")
.each(d => { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr("dy", ".35em")
.attr("transform", d => `
rotate(${(d.angle * 180 / Math.PI - 90)})
translate(${innerRadius + 26})
${d.angle > Math.PI ? "rotate(180)" : ""}`)
.attr("text-anchor", d => d.angle > Math.PI ? "end" : null)
.text(d => data.nameByIndex.get(d.index));
svg.append("g")
.attr("fill-opacity", 1)
.selectAll("path")
.data(chords)
.enter().append("path")
.attr("class", "ribbons")
.attr("stroke", d => d3.rgb(color(d.source.index)).darker())
.attr("fill", d => color(d.source.index))
.attr("d", ribbon)
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", opacityDefault);
tooltip.html(data.nameByIndex.get(d.source.index) + " leads to " + data.nameByIndex.get(d.target.index))
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
return svg.node();
}
md`### Styles`
// **QUESTION: How to adapt this for the current chord diagram?
// From http://bl.ocks.org/farazshuja/6225ffc34c23ade0de169c4d96252bbe
//Returns an event handler for fading a given chord group.
function fade(opacity) {
return function(d,i) {
svg.selectAll(".chord path")
.filter(function(d) { return d.source.index != i && d.target.index != i; })
.transition()
.style("opacity", opacity);
};
}//fade
_ = require('lodash')
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
