function arc(d) {
const y1 = d.source.y;
const y2 = d.target.y;
const r = Math.abs(y2 - y1) / 3;
return `M${margin.left},${y1}A${r},${r} 0,0,${y1 < y2 ? 1 : 0} ${margin.left},${y2}`;
}
y = d3.scalePoint(graph.nodes.map(d => d.id).sort(d3.ascending), [margin.top, height - margin.bottom])
margin = ({top: 20, right: 20, bottom: 20, left: 500})
height = (data.nodes.length - 1) * step + margin.top + margin.bottom
step = 14
color = d3.scaleOrdinal(graph.nodes.map(d => d.group).sort(d3.ascending), d3.schemeCategory10)
graph = {
const nodes = data.nodes.map(({id, group, workload}) => ({
id,
sourceLinks: [],
targetLinks: [],
group: _.get(workload, "namespace", id),
health: !!workload && !!workload.health ? workload.health.score : null,
latency: _.get(workload, "ingress.latency.request_p90_milliseconds", 0),
"5xx_responses": _.get(workload, "ingress.request_count.response_code_5xx", 0),
totalRequests: _.get(workload, "ingress.request_count.total", 0),
workload,
}));
const nodeById = new Map(nodes.map(d => [d.id, d]));
const links = data.links.map(({source, target, value}) => ({
source: nodeById.get(source),
target: nodeById.get(target),
value
}));
for (const link of links) {
const {source, target, value} = link;
source.sourceLinks.push(link);
target.targetLinks.push(link);
}
return {nodes: nodes.filter(n => !!_.get(n, "workload.namespace", "") ), links};
}
data = FileAttachment("e2e-test.json").json()
d3 = require("d3@5")
_ = 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.
