Public
Edited
Dec 23, 2023
chart = {
const width = 640;
const height = width;
const outerRadius = Math.min(width,height) * 0.5 -30;
const innerRadius = outerRadius - 20;
const {names, colors}= data;
const sum = d3.sum(data.flat());
const tickStep = d3.tickStep(0, sum, 100);
const tickStepMajor = d3.tickStep(0, sum, 50);
const formatValue = d3.formatPrefix(",.0", tickStep);
const chord = d3.chord()
.padAngle(20/ innerRadius)
.sortSubgroups(d3.descending);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
const ribbon = d3.ribbon()
.radius(innerRadius);
const svg = d3. create("svg")
.attr("width",width)
.attr("height", height)
.attr("viewBox", [-width/2, -height/2, width, height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const col = d3.interpolateRgb("purple", "orange")(0.8);
const circle = svg.append("circle")
.attr("cx", 0) // 中心のx座標
.attr("cy", 0) // 中心のy座標
.attr("r", outerRadius) // 半径
.attr("fill", col) // 塗りつぶしの色
.attr("opacity",0.5);
const chords = chord(data);
const group = svg.append("g")
.selectAll()
.data(chords.groups)
.join("g");
group.append("path")
.attr("fill", d => colors[d.index])
.attr("d", arc)
.append("title")
//.text(d =>`${d.value.toLocaleString("en-US")}${names[d.index]}`)
const groupTick = group.append("g")
.selectAll()
.data(d => groupTicks(d, tickStep))
.join("g")
.attr("transform", d =>`rotate(${d.angle * 180 / Math.PI - 90}) translate(${outerRadius},0)`);
groupTick.append("line")
.attr("stroke", "currentColor")
.attr("x2", 6);
groupTick
.filter(d => d.value % tickStepMajor === 0)
.append("text")
.attr("x",8)
.attr("dy", ".35em")
.attr("transform",d =>d.angle > Math.PI ? "rotate(180) translate(-16)":null)
.attr("text-anchor", d => d.angle > Math.PI ? "end" :null)
.text(d => formatValue(d.value));
let c = d3. quantize(d3. interpolate("red", "blue"),4)
c = d3.hsl(c[2]);
c.h += 30;
c.s +=0.2;
c + "";
c.opacity = 0.8;
c + "";
svg.append("g")
.attr("fill-opacity", 0.7)
.selectAll()
.data(chords)
.join("path")
.attr("d", ribbon)
.attr("fill", c)
.attr("stroke", "white")
.append("title")
.text(d => `${d.source.value.toLocaleString("en-US")}${names[d.source.index]}→
${names[d.target.index]}${d.source.index !== d.target.index ? `\n${d.target.value.toLocaleString("en-US")}${names[d.target.index]}→ ${names[d.source.index]}`:``}`)
.transition()
.delay(d => d.value/2)
.duration(500)
.ease(d3.easePolyOut);
return svg.node();
}
function groupTicks(d,step){
const k = (d.endAngle - d.startAngle) / d.value;
return d3.range(0, d.value, step).map(value =>{
return {value: value, angle: value * k + d.startAngle};
})
}
data = Object.assign([
//[11975, 5871, 8916, 2686],
[5430, 3805, 4500,9765],
[1951, 10048, 2060, 6171],
[8010, 16145, 8090, 8045],
[1013, 990, 940, 6907],
],{
names:["blond","red","blue", "black","brown"],
colors:["#00AEEF","#ffdd89","#f26223","#70A19F","#000000", "#957244"]
})
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.
