function reset_nodes() {
d3.select(svg)
.selectAll('.node-before')
.transition(1000)
.style('fill', '#ffffff');
}
function highlight_nodes(id) {
d3.select(svg)
.select(id)
.transition(1000)
.style('fill', '#e2e2e2');
}
function get_node_position(id){
let node = d3.select(svg).select(id);
return [node.attr('cx'), node.attr('cy')];
}
function remove_old_arrows(){
d3.select(svg)
.selectAll('.gnn-arrows')
.remove();
}
function draw_arrows_to_updated_node(id) {
let position = get_node_position(id);
let half_diff = [(updated_node_position[0] - position[0])/2,
(updated_node_position[1] - position[1])/2];
let position_str = position.join(',');
let half_diff_str = half_diff.join(',');
d3.select(svg)
.select('#layer2')
.append('path')
.attr('d', `m ${position_str} l ${half_diff_str} l ${half_diff_str}`)
.attr('class', 'gnn-arrows')
.attr('stroke', '#000000')
.attr('fill', 'none')
.attr('stroke-width', 0.264583)
.attr('stroke-linecap', 'butt')
.attr('stroke-linejoin', 'miter')
.attr('stroke-miterlimit', 4)
.attr('stroke-dasharray', '0.264583, 3.175')
.attr('stroke-dashoffset', 0)
.attr('stroke-opacity', 1)
.attr('marker-mid', 'url(#marker3144)');
}
on_selected_node_change = {
// Reset all node fills.
reset_nodes();
// Highlight neighbours.
let neighbours_ids = get_neighbours(selected_node_id);
neighbours_ids.map(highlight_nodes);
// Draw arrows.
remove_old_arrows();
neighbours_ids.map(draw_arrows_to_updated_node);
}
add_interactivity = {
d3.select(svg)
.selectAll('.dummy-node')
.style('fill', '#ffffff')
.style('fill-opacity', '0')
.on('mouseover', function(event){
mutable selected_node_id = '#' + d3.select(this).attr('id')
.replace('-dummy', '').replace('-after', '-before');
})
}
mutable selected_node_id = '#node-E-before';
updated_node_id = selected_node_id.replace('before', 'after')
updated_node_position = get_node_position(updated_node_id)
cnn_svg_height = svg_width * 28 / 130
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.
