chart = {
// + kid know depths
// + tree is drawn
// + tree node takes yPos from depth
// + tree node takes xPos from childIndex
// + tree takes extra members
// + lanes available for every kid
// + messages shown on a lane
// + dots msgs shown in a row
// + dots msgs shown in a sequence
// + stub msgs shown in a not mocked sequence
// + full msgs shown in a not mocked sequence
// + if control flow shifts, then
// instead of msg there is a control bridge
// + swimpool stretches
// + lanes stretches
// + messages switches
// + message triggers grouped in a tree
// + message triggers show their names
// + bridge starts at message place
// + tree available from uptime kuma log
// + sample bespoke tree available
// + kids list available
// - improve code design
// + improve ui
// + fix lane path lengths
// > make all panel available with scroll or zoom
// + try div container
// + try zoom
// + on a sample
// + on a final tree
// > add control panel
// > zoom +
// > zoom -
// > center
// > zoom reset
// > move <-
// > move ->
// + get all available messages
// + data extraction automated
// + messages stored available from file
// + tree available from file
// - fix this list to state statement
// ! move lane names
// ! add lanes highlight on click
// ! add bridges highlight on click
// + when hover message then lane full path is shown
// - flows clear
// - data flow is clear
// - control flow is clear
// - HAR file activity merged to server logs
// - app build available
// - app available by 3001 port
// - 3000 vs 3001 ports usage is clear
// - all ports related code actions are logged
// - development mode restrictions clear
// - all dev dependent code actions are logged
const w = 10000
const h = windowHeight
const amountOfLeaves = 8
const windowSize = w
const leafWidth = windowSize/weightedTree.width //amountOfLeaves
const leafHeight = 30
const depth = 1;
const root =
d3.create("svg")
.attr("viewBox", [0, 0, w, h])
.attr("width", w)
.attr("height", h)
.attr("stroke-width", 2)
.attr("fill","red")
const g = root.append("g");
const svg = g.append("svg")
function zoomed({transform}) {
g.attr("transform", transform);
}
root.call(d3.zoom()
.extent([[0, 0], [w/10, h/10]])
.scaleExtent([-10, 10])
.on("zoom", zoomed));
drawTree(tree,svg,leafWidth,leafHeight);
// drawMessages(svg, messages,lanesDic,leafWidth,leafHeight);
return root.node();
}
save = FileAttachment("save.json").json()
addrs = [...new Set(save.data.map(({fromAddress,toAddress}) => [fromAddress,toAddress]).flatMap(e => e))]
tree = {
return {name: "", children: addrs.map(e => ({name: e, children: []}))}
}
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.
