EdgeNodeComponent = (n, e) => {
const ne = DefaultEdgeNodeComponent(n, e);
ne.style = { transform: `scale(${baseScale})` };
return ne;
}
mutable debug = null
baseScale = {
const mx = _.maxBy(displayed.nodes, n => n.x + n.width / 2);
const bbwidth = mx.x + mx.width / 2;
return width / bbwidth;
}
duration = 500
import {
viewof graph,
width,
DefaultEdgeComponent,
DefaultNodeComponent,
DefaultEdgeNodeComponent
} with {
height,
bb,
displayed as data,
EdgeComponent,
EdgeNodeComponent,
duration
} from "@stardisblue/drawgraph"
bb = {
const wx = _.maxBy(displayed.nodes, n => n.x + n.width / 2);
const hy = _.maxBy(displayed.nodes, n => n.y + n.height / 2);
const baseScale = width / (wx.x + wx.width / 2);
return [0, 0, width, baseScale * (hy.y + hy.height / 2)];
}
height = bb[3] > 300 ? "100%" : '300'
d3 = require('d3@5')
jszip = require('https://bundle.run/jszip@3.4.0')
_ = require('lodash')
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.
