c-lightning manager dashboardRouting activityPayment FormTransaction HistoryCurrent channels and their balances
Chord diagram of forwards received/sent by channels
chart = {
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("font-size", 10)
.attr("font-family", "sans-serif");
const chords = chord(matrix);
const max = d3.max(d3.merge(matrix));
const group = svg
.append("g")
.selectAll("g")
.data(chords.groups)
.join("g");
group
.append("path")
.attr("fill", d => color(d.index))
.attr("stroke", d => d3.rgb(color(d.index)).darker())
.attr("d", arc);
const groupTick = group
.append("g")
.selectAll("g")
.data(d => groupTicks(d, parseInt(max / 6)))
.join("g")
.attr(
"transform",
d =>
`rotate(${(d.angle * 180) / Math.PI - 90}) translate(${outerRadius},0)`
);
groupTick
.append("line")
.attr("stroke", "#000")
.attr("x2", 6);
groupTick
// .filter(d => d.value % parseInt(max / 4) === 0)
.append('a')
.attr(
'href',
d => `https://ln.bigsun.xyz/channel/${channels[d.source.index]}`
)
.append("text")
.attr("x", 8)
.attr("dy", ".35em")
.attr("transfox564654rm", d =>
d.angle > Math.PI ? "rotate(180) translate(-16)" : null
)
.attr("text-anchor", d => "start")
.text(d =>
d.value
? `${d.value}sat`
: channel_map.has(channels[d.source.index])
? `${channel_map.get(channels[d.source.index]).peer.name} (${
channels[d.source.index]
})`
: channels[d.source.index]
);
svg
.append("g")
.attr("fill-opacity", 0.67)
.selectAll("path")
.data(chords)
.join("path")
.attr("d", ribbon)
.attr("fill", d => color(d.target.index))
.attr("stroke", d => d3.rgb(color(d.target.index)).darker());
return svg.node();
}
transfers = d3.rollup(
forwards.filter(filterFn),
reduceFn,
d => d.in_channel,
d => d.out_channel
)
matrix = {
let n = channels.length;
var matrix = new Array(n);
for (let i = 0; i < n; i++) {
var row = new Array(n);
for (let j = 0; j < n; j++) {
try {
row[j] = transfers.get(channels[i]).get(channels[j]) || 0;
} catch (err) {
row[j] = 0;
}
}
matrix[i] = row;
}
return matrix;
}
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, source: d };
});
}
chord = d3
.chord()
.padAngle(0.05)
.sortSubgroups(d3.descending)
arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
ribbon = d3.ribbon()
.radius(innerRadius)
outerRadius = Math.min(width, height) * 0.4 - 30
innerRadius = outerRadius - 20
height = Math.max(1040, width)
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.
