chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.on("click", reheat);
const l = svg.append("g").classed("links_group", true)
const n = svg.append("g").classed("nodes_group", true)
let svg_nodes = n.selectAll("circle");
let svg_edges= l.selectAll("line");
function
update(new_nodes, new_lines) {
svg_nodes = svg_nodes
.data(new_nodes)
.join(
enter => enter.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y),
update => update
.attr("cx", d => d.x)
.attr("cy", d => d.y),
exit => exit.remove()
)
.attr("r", 10)
.attr("fill", d => { return (d.index==0 ? "green" : (d.index==links.length-1 ? "brown" : "black")) })
.on("click", expand);
svg_edges = svg_edges
.data(new_lines)
.join(
enter => enter.append("line")
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y),
update => update
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y),
exit => exit.remove()
)
.attr("stroke", "gray")
.attr("stroke-width", "20px")
.on("click", shrink);
};
function foo(x) { };
return Object.assign(svg.node(), {update, foo});
}
svg_ticker = {
while(1) {
chart.update(nodes, links);
await Promises.delay(50);
}
}
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.
