How to link multiple graph networks in d3js so that an event in one calls the same event in other networks - d3.js

Question

I am drawing four network graphs of the same data but using different properties to color the node. Currently, I am able to generate all 4 networks and for each network I am able to double click a node to see the connected nodes of the network. My question is how do I extend this functionality so that if I click a node on any of the graph networks, the other 3 also show me the node I clicked and the connected nodes therein.
This question asked previously Mouseover event on two charts at the same time d3.js does a similar thing for pie charts but I am not sure how I can adapt it to my code.
var drawNetworkFunction = function(descriptor, chartId) {
var width = 470;
var height = 310;
var toggle = 0;
var activenode;
var svg = d3.select(chartId).append("svg")
.attr("width", width)
.attr("height", height);
var container = svg.append("g")
.attr("class", "everything");
if (descriptor == "id" || descriptor == "cluster") {
var color = d3.scaleOrdinal(d3.schemeCategory10);
}
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
return d.id;
}))
.force("charge", d3.forceManyBody().strength(-7))
.force("center", d3.forceCenter(width / 2, height / 2));
d3.json("Perovskite_info.json", function(graph) {
if (descriptor == "cohesive") {
var cscale = d3.scaleLinear()
.domain([1.6, 7.2])
.range([0, 1]);
} else if (descriptor == "similarity") {
var cscale = d3.scaleLinear()
.domain([0, 1])
.range([0, 1]);
}
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke", "#000")
.attr("stroke-opacity", "0.1");
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.attr("pvs_id", function(d) { return d.id; })
.enter().append("circle")
.attr("r", 5)
.attr("fill", function(d) {
var col = '';
if (descriptor == "id") {
col = color(d.group);
} else if (descriptor == "cluster") {
col = color(d.cluster);
} else if (descriptor == "cohesive") {
col = d3.interpolatePurples(cscale(d.cohesive));
} else if (descriptor == "similarity") {
col = d3.interpolateReds(cscale(d.similarity));
}
return col;
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
.on("dblclick", connectedNodes);
node.append("title")
.text(function(d) {
return ["Perovskite :" + d.id,
"Cluster :" + d.cluster,
"Cohesive Energy :" + d.cohesive,
"Similarity to CaTiO3 :" + d.similarity
];
});
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
link
.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
node
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
}
var linkedByIndex = {};
for (i = 0; i < graph.nodes.length; i++) {
linkedByIndex[i + "," + i] = 1;
};
graph.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
function neighboring(a, b) {
return linkedByIndex[a.index + "," + b.index];
}
function HS_f(activenode) {
if (activenode != null) {
var fing_plot = d3.select("#HSA_fingerprint")
.append("svg")
.attr("id", "fin_pl")
.attr("width", 300)
.attr("height", 300);
fing_plot.append('svg:image')
.attr("xlink:href", function() { return "./finger_prints_lo/" + activenode + "_lo.png" })
.attr("width", 250)
.attr("height", 250);
return fing_plot;
}
}
function connectedNodes() {
if (toggle == 0) {
d = d3.select(this).node().__data__;
node.style("opacity", function(o) {
return neighboring(d, o) | neighboring(o, d) ? 1 : 0.15;
});
toggle = 1;
activenode = d.id;
window.activenode = activenode;
console.log(activenode);
HS_f(activenode);
} else {
node.style("opacity", 1);;
toggle = 0;
d3.select("#fin_pl").remove();
}
}
});
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return svg;
}
For the json file please refer to the link: https://api.myjson.com/bins/m3gd8
Also my html file is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type=" text/javascript " src="http://code.jquery.com/jquery-latest.js "></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="draw_net.js"></script>
<title>Library of Perovskite structures from Materials Project Database</title>
<div id="title_main">
<h2>Graph Network of Perovskite structures from Materials Project Database</h2>
</div>
</head>
<body>
<link rel="stylesheet" href="pvs-net.css" />
<div style="width: 80%; float:left; overflow: auto;">
<div id="Perovskite_Network">
<div style="width: 50%; float:left;">
<div id="Network1">
<div id="title_1">
<h3>Isomap Graph Network</h3>
<script>
var Net1 = drawNetworkFunction('id', '#Network1');
</script>
</div>
</div>
<div id="Network2">
<div style="width: 50%; float:left; overflow: auto;"></div>
<div id="title_2">
<h3>Spectral Clustering on Isomap Graph Network</h3>
<script>
var Net2 = drawNetworkFunction('cluster', '#Network2');
</script>
</div>
</div>
</div>
<div style="width: 50%; float:right; overflow: auto;">
<div id="Network3">
<div id="title_3">
<h3>Calculated Cohesive Energy</h3>
<script>
var Net3 = drawNetworkFunction('cohesive', '#Network3');
</script>
</div>
</div>
<div id="Network4">
<div id="title_4">
<h3>Similarity score against CaTiO3</h3>
<script>
var Net4 = drawNetworkFunction('similarity', '#Network4');
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width: 20%; height: 500px; float:right;">
<div id="HSA_fingerprint">
<div id="title">
<h3>Hirschfeld Surface Fingerprint Plot</h3>
</div>
</div>
</div>
</body>
</html>

Answer 1

Glad you came back with the data and the HTML. It makes it easier to debug and come up with a solution.
I just changed a couple of lines of code in the connectedNodes function:
Instead of node.style("opacity", function(o) {...}), I replaced it with:
d3.select('#Perovskite_Network').selectAll('.nodes').selectAll('circle').style("opacity", function(o) {
return neighboring(d, o) | neighboring(o, d) ? 1 : 0.15;
});
This would select all circles from all the the SVGs. Let me know if that doesn't help or if you need any improvements.
Snippet:
var drawNetworkFunction = function(descriptor, chartId) {
var width = 470;
var height = 310;
var toggle = 0;
var activenode;
var svg = d3.select(chartId).append("svg")
.attr("width", width)
.attr("height", height);
var container = svg.append("g")
.attr("class", "everything");
if (descriptor == "id" || descriptor == "cluster") {
var color = d3.scaleOrdinal(d3.schemeCategory10);
}
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
return d.id;
}))
.force("charge", d3.forceManyBody().strength(-7))
.force("center", d3.forceCenter(width / 2, height / 2));
d3.json("https://api.myjson.com/bins/m3gd8", function(graph) {
if (descriptor == "cohesive") {
var cscale = d3.scaleLinear()
.domain([1.6, 7.2])
.range([0, 1]);
} else if (descriptor == "similarity") {
var cscale = d3.scaleLinear()
.domain([0, 1])
.range([0, 1]);
}
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke", "#000")
.attr("stroke-opacity", "0.1");
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.attr("pvs_id", function(d) { return d.id; })
.enter().append("circle")
.attr("r", 5)
.attr("fill", function(d) {
var col = '';
if (descriptor == "id") {
col = color(d.group);
} else if (descriptor == "cluster") {
col = color(d.cluster);
} else if (descriptor == "cohesive") {
col = d3.interpolatePurples(cscale(d.cohesive));
} else if (descriptor == "similarity") {
col = d3.interpolateReds(cscale(d.similarity));
}
return col;
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
.on("dblclick", connectedNodes);
node.append("title")
.text(function(d) {
return ["Perovskite :" + d.id,
"Cluster :" + d.cluster,
"Cohesive Energy :" + d.cohesive,
"Similarity to CaTiO3 :" + d.similarity
];
});
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
link
.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
node
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
}
var linkedByIndex = {};
for (i = 0; i < graph.nodes.length; i++) {
linkedByIndex[i + "," + i] = 1;
}
graph.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
function neighboring(a, b) {
return linkedByIndex[a.index + "," + b.index];
}
function HS_f(activenode) {
if (activenode != null) {
var fing_plot = d3.select("#HSA_fingerprint")
.append("svg")
.attr("id", "fin_pl")
.attr("width", 300)
.attr("height", 300);
fing_plot.append('svg:image')
.attr("xlink:href", function() { return "./finger_prints_lo/" + activenode + "_lo.png" })
.attr("width", 250)
.attr("height", 250);
return fing_plot;
}
}
function connectedNodes() {
if (toggle == 0) {
d = d3.select(this).node().__data__;
d3.select('#Perovskite_Network').selectAll('.nodes').selectAll('circle').style("opacity", function(o) {
return neighboring(d, o) | neighboring(o, d) ? 1 : 0.15;
});
toggle = 1;
activenode = d.id;
window.activenode = activenode;
//console.log(activenode);
HS_f(activenode);
} else {
d3.select('#Perovskite_Network').selectAll('.nodes').selectAll('circle').style("opacity", 1);
toggle = 0;
d3.select("#fin_pl").remove();
}
}
});
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return svg;
}
drawNetworkFunction('id', '#Network1');
drawNetworkFunction('cluster', '#Network2');
drawNetworkFunction('cohesive', '#Network3');
drawNetworkFunction('similarity', '#Network4');
<meta charset="utf-8">
<script type=" text/javascript " src="http://code.jquery.com/jquery-latest.js "></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="draw_net.js"></script>
<title>Library of Perovskite structures from Materials Project Database</title>
<div id="title_main">
<h2>Graph Network of Perovskite structures from Materials Project Database</h2>
</div>
<link rel="stylesheet" href="pvs-net.css" />
<div style="width: 80%; float:left; overflow: auto;">
<div id="Perovskite_Network">
<div style="width: 50%; float:left;">
<div id="Network1">
<div id="title_1">
<h3>Isomap Graph Network</h3>
</div>
</div>
<div id="Network2">
<div style="width: 50%; float:left; overflow: auto;"></div>
<div id="title_2">
<h3>Spectral Clustering on Isomap Graph Network</h3>
</div>
</div>
</div>
<div style="width: 50%; float:right; overflow: auto;">
<div id="Network3">
<div id="title_3">
<h3>Calculated Cohesive Energy</h3>
</div>
</div>
<div id="Network4">
<div id="title_4">
<h3>Similarity score against CaTiO3</h3>
</div>
</div>
</div>
</div>
</div>
<div style="width: 20%; height: 500px; float:right;">
<div id="HSA_fingerprint">
<div id="title">
<h3>Hirschfeld Surface Fingerprint Plot</h3>
</div>
</div>
</div>
And a fiddle link: https://jsfiddle.net/shashank2104/bj76ckh4/4/
I have a few suggestions though:
The file is being fetched for every drawNetworkFunction call which slows down the rendering of the page.
Along with fetching of the file, the object linkedByIndex is created in every call which is independent of the descriptor or chartId.
Suggestion: Move the above steps in a single function and pass the linkedByIndex and graph (data) to the drawNetworkFunction and then the rest. Hope this helps.