Java, python, devops
Published
Edited
Nov 8, 2018
1 fork
2 stars
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");
group.append("path")
.attr("fill", d => color(d.index))
.attr("stroke", d => color(d.index))
.attr("d", arc);
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[d.index]);
svg.append("g")
.selectAll("path")
.data(chords)
.enter().append("path")
.attr("fill-opacity", d => d.source.value/10)
//.attr("stroke", d => d3.rgb(color(d.source.index)))
//.attr("fill", d => color(d.source.index))
.attr("d", ribbon);
return svg.node();
}
chord = d3.chord()
.padAngle(.04)
.sortSubgroups(d3.descending)
.sortChords(d3.descending)
arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(innerRadius + 20)
ribbon = d3.ribbon()
.radius(innerRadius)
color = d3.scaleOrdinal(d3.schemeCategory10)
outerRadius = Math.min(width, height) * 0.5
innerRadius = outerRadius - 124
width = 964
height = width
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.
