chart = Treemap(root, {
value: (d) => d.weight,
group: (d, n) => "peer " + d.from,
label: (d, n) =>
`${d.bytes} bytes\npeer ${d.from}\n\nexpiring\nat ${new Date(
d.expiration * 1000
).toLocaleTimeString("de")}\n`,
title: (d, n) => `${d.txid}`,
link: (d, n) => `https://mempool.space/tx/${d.txid}`,
width: 1000,
height: 600
})
root = process(getorphantxs)
function process(orphans) {
let byPeers = {};
for (let orphan of orphans) {
let peers = orphan.from.join(", ");
if (!(peers in byPeers)) {
byPeers[peers] = {
group: peers,
from: orphan.from,
bytes: null,
children: []
};
}
byPeers[peers].children.push(orphan);
}
console.log(byPeers);
return { bytes: null, children: Object.values(byPeers) };
}
getorphantxs = d3.json(
"https://gist.githubusercontent.com/0xB10C/31ff4fa91b07ea33e394a21e6af560c2/raw/58c1947e07eeb3a50abf48c5c5a4b4be8aaf7529/getorphantxs.json"
)
import {Treemap} from "@d3/treemap-component"
import {Swatches} from "@d3/color-legend"
import {howto} from "@d3/example-components"
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.
