// highlight link nodes
function highlight_node_links(ev, node) {
var remainingNodes = [],
nextNodes = [];
var stroke_opacity = 0;
if (d3.select(this).attr("data-clicked") == "1") {
d3.select(this).attr("data-clicked", "0");
stroke_opacity = 0.5;
} else {
d3.select(this).attr("data-clicked", "1");
stroke_opacity = 0.9;
}
var traverse = [
{
linkType: "source",
nodeType: "target"
},
{
linkType: "target",
nodeType: "source"
}
];
traverse.forEach(function (step) {
node[step.linkType].forEach(function (link) {
remainingNodes.push(link[step.nodeType]);
highlight_link(link.id, stroke_opacity);
});
while (remainingNodes.length) {
nextNodes = [];
remainingNodes.forEach(function (node) {
node[step.linkType].forEach(function (link) {
nextNodes.push(link[step.nodeType]);
highlight_link(link.id, stroke_opacity);
});
});
remainingNodes = nextNodes;
}
});
}
function highlight_link(id, opacity) {
d3.select("#link-" + id).style("stroke-opacity", opacity);
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
