Published
Edited
May 11, 2021
Importers
Insert cell
Insert cell
chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, y.range()[1]])
.attr('font-size', 10)
.attr('font-family', 'sans-serif')
.attr('fill', 'black');

const centerArea = 80;
const centerRight = (width + centerArea) / 2;
const centerLeft = (width - centerArea) / 2;

const range = [margin.left, width / 4];
const x = d3
.scaleLinear()
.domain([0, d3.max(channels, d => d3.max([d.in_msat, d.out_msat]))])
.range();

// incoming bars
svg
.append('g')
.selectAll("rect")
.data(channels, d => d.scid)
.join("rect")
.attr('y', d => y(d.scid))
.attr('x', d => centerLeft - x(d.in_msat))
.attr("width", d => x(d.in_msat))
.attr("height", y.bandwidth() - 1)
.attr('fill', '#66d998');

// incoming labels
svg
.append('g')
.selectAll("text")
.data(channels, d => d.scid)
.join('text')
.attr('y', d => y(d.scid))
.attr('x', d => centerLeft - x(d.in_msat))
.text(d => parseInt(d.in_msat / 1000))
.attr('dy', 13)
.attr('text-anchor', d => (x(d.in_msat) < 50 ? 'end' : 'start'))
.attr('fill', 'black');

// outgoing bars
svg
.append('g')
.selectAll("rect")
.data(channels, d => d.scid)
.join("rect")
.attr('y', d => y(d.scid))
.attr('x', centerRight)
.attr("width", d => x(d.out_msat))
.attr("height", y.bandwidth() - 1)
.attr('fill', '#f4b969');

// outgoing labels
svg
.append('g')
.selectAll("text")
.data(channels, d => d.scid)
.join('text')
.attr('y', d => y(d.scid))
.attr('x', d => centerRight + x(d.out_msat))
.text(d => parseInt(d.out_msat / 1000))
.attr('dy', 13)
.attr('text-anchor', d => (x(d.out_msat) < 50 ? 'start' : 'end'))
.attr('fill', 'black');

// central labels
svg
.append('g')
.selectAll('text')
.data(channels, d => d.scid)
.join('text')
.attr("x", centerLeft + (centerRight - centerLeft) / 2)
.attr("y", d => y(d.scid))
.attr('dy', 13)
.text(d => d.scid)
.attr('text-anchor', 'middle')
.attr('fill', 'black');

return html`<h3>per channel [incoming/outgoing]</h3>

${svg.node()}`;
}
Insert cell
y = d3
.scaleBand()
.domain(channels.map(d => d.scid))
.rangeRound([margin.top, margin.top + 20 * channels.length])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require('d3@5')
Insert cell

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.
Learn more