Published
Edited
Nov 30, 2020
1 star
chart = {
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
const chords = chord(matrix);
const group = svg.append("g")
.attr("font-size", 35)
.attr("font-family", "Tahoma")
.attr("opacity", 0.6)
.selectAll("g")
.data(chords.groups)
.join("g");
group.append("path")
.attr("fill", d => color(names[d.index]))
.attr("d", arc);
group.append("text")
.each(d => (d.angle = (d.startAngle + d.endAngle) / 2))
.attr("dy", "0.15em")
.attr("transform", d => `
rotate(${(d.angle * 180 / Math.PI - 90)})
translate(${outerRadius + 20})
${d.angle > Math.PI ? "rotate(180)" : "rotate(180)"}
`)
.attr("text-anchor", d => d.angle > Math.PI ? "end" : "end")
.text(d => d.index > 10 ? names[d.index] : "");
const textId = DOM.uid("text");
svg.append("path")
.attr("id", textId.id)
.attr("fill", "none")
.attr("d", d3.arc()({outerRadius, startAngle: 0, endAngle: 2 * Math.PI}));
svg.append("g")
.attr("fill-opacity", 0.6)
.selectAll("g")
.data(chords)
.join("path")
.attr("d", ribbon)
.attr("fill", d => color(names[d.target.index]))
.style("mix-blend-mode", "multiply")
.append("title")
.text(d => `${names[d.source.index]} ➜ ${names[d.target.index]} ${(d.source.value)}%`);
/*
const tooltip = d3.select('body')
.append('div')
.attr('id', 'barchart-tooltip')
.style('position', 'absolute')
.style('z-index', '1')
.style('visibility', 'hidden')
.style('padding', '10px')
.style('background', 'rgba(0,0,0,0.6)')
.style('border-radius', '4px')
.style('color', '#fff');
svg.selectAll('rect')
.data(names)
.join('rect')
.attr('fill', 'purple')
.on("mouseover", function(e,d,i) {
let tooltipWidth = tooltip.node().offsetWidth;
let tooltipHeight = tooltip.node().offsetHeight;
tooltip
.style("left", e.pageX - tooltipWidth/2 +'px')
.style("top", e.pageY-tooltipHeight - 10+'px')
.style('visibility', 'visible')
.html(`${names[d.source.index]} ➜ ${names[d.target.index]} ${(d.source.value)}%`);
d3.select(this).attr("fill", "steelblue");})
.on('mousemove', function (e) {
let tooltipWidth = tooltip.node().offsetWidth;
let tooltipHeight = tooltip.node().offsetHeight;
tooltip
.style("left", e.pageX - tooltipWidth/2 +'px')
.style("top", e.pageY-tooltipHeight - 10+'px')
})
.on("mouseout", function(e,d) {
tooltip
.style('visibility', 'hidden')
d3.select(this).attr("fill", "purple");});
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 7)
.selectAll("g")
.data(chords.groups)
.join("g")
.call(g => g.append("path")
.attr("d", arc)
.attr("fill", d => color(names[d.index]))
.attr("stroke", "#fff"))
.call(g => g.append("text")
.attr("dy", -3)
.append("textPath")
.attr("xlink:href", textId.href)
.attr("startOffset", d => d.startAngle * outerRadius)
.text(d => names[d.index]))
.call(g => g.append("title")
.text(d => `${names[d.index]}
owes ${formatValue(d3.sum(matrix[d.index]))}
is owed ${formatValue(d3.sum(matrix, row => row[d.index]))}`));
*/
return svg.node();
}
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.
