Comments (14)
Hi @lazarospa, did you find a way to do this? I saw a R counterpart "visOptions(highlightNearest = TRUE, nodesIdSelection = TRUE)", but, as it appears, there is none for Python - I could be wrong.
from pyvis.
Hi @boludo00, wondering if you can help.
from pyvis.
Do you mean something like in this example?
https://visjs.github.io/vis-network/examples/network/exampleApplications/neighbourhoodHighlight.html
If so, then additional JavaScript would need to be supplied in the template.html that pyvis uses for rendering your graph. Inspecting the above example's source code, something similar would like:
var network;
var allNodes;
var highlightActive = false;
var nodesDataset = new vis.DataSet(nodes); // these come from WorldCup2014.js
var edgesDataset = new vis.DataSet(edges); // these come from WorldCup2014.js
function redrawAll() {
var container = document.getElementById("mynetwork");
var options = {
nodes: {
shape: "dot",
scaling: {
min: 10,
max: 30,
label: {
min: 8,
max: 30,
drawThreshold: 12,
maxVisible: 20,
},
},
font: {
size: 12,
face: "Tahoma",
},
},
edges: {
width: 0.15,
color: { inherit: "from" },
smooth: {
type: "continuous",
},
},
physics: false,
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true,
hideEdgesOnZoom: true,
},
};
var data = { nodes: nodesDataset, edges: edgesDataset }; // Note: data is coming from ./datasources/WorldCup2014.js
network = new vis.Network(container, data, options);
// get a JSON object
allNodes = nodesDataset.get({ returnType: "Object" });
network.on("click", neighbourhoodHighlight);
}
function neighbourhoodHighlight(params) {
// if something is selected:
if (params.nodes.length > 0) {
highlightActive = true;
var i, j;
var selectedNode = params.nodes[0];
var degrees = 2;
// mark all nodes as hard to read.
for (var nodeId in allNodes) {
allNodes[nodeId].color = "rgba(200,200,200,0.5)";
if (allNodes[nodeId].hiddenLabel === undefined) {
allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
allNodes[nodeId].label = undefined;
}
}
var connectedNodes = network.getConnectedNodes(selectedNode);
var allConnectedNodes = [];
// get the second degree nodes
for (i = 1; i < degrees; i++) {
for (j = 0; j < connectedNodes.length; j++) {
allConnectedNodes = allConnectedNodes.concat(
network.getConnectedNodes(connectedNodes[j])
);
}
}
// all second degree nodes get a different color and their label back
for (i = 0; i < allConnectedNodes.length; i++) {
allNodes[allConnectedNodes[i]].color = "rgba(150,150,150,0.75)";
if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
allNodes[allConnectedNodes[i]].label =
allNodes[allConnectedNodes[i]].hiddenLabel;
allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
}
}
// all first degree nodes get their own color and their label back
for (i = 0; i < connectedNodes.length; i++) {
allNodes[connectedNodes[i]].color = undefined;
if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
allNodes[connectedNodes[i]].label =
allNodes[connectedNodes[i]].hiddenLabel;
allNodes[connectedNodes[i]].hiddenLabel = undefined;
}
}
// the main node gets its own color and its label back.
allNodes[selectedNode].color = undefined;
if (allNodes[selectedNode].hiddenLabel !== undefined) {
allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
allNodes[selectedNode].hiddenLabel = undefined;
}
} else if (highlightActive === true) {
// reset all nodes
for (var nodeId in allNodes) {
allNodes[nodeId].color = undefined;
if (allNodes[nodeId].hiddenLabel !== undefined) {
allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
allNodes[nodeId].hiddenLabel = undefined;
}
}
highlightActive = false;
}
// transform the object into an array
var updateArray = [];
for (nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
updateArray.push(allNodes[nodeId]);
}
}
nodesDataset.update(updateArray);
}
redrawAll();
This is something that can be supplied in the template file, for more info on that, checkout #57
I have always wanted to add custom functionality like this to the default template, but have never gotten around to it.
from pyvis.
Thanks @boludo00. This solves the question of @lazarospa
On my part, I'm looking for the Python counterpart as explained in the Select by node id section found in this link: https://cran.r-project.org/web/packages/visNetwork/vignettes/Introduction-to-visNetwork.html
I have a network graph that has about 500 nodes. Looking for a single node can be challenging. This is where a feature like Select by node id can come handy. Another thing that can be really useful is being able to Add legend - also a section in the above mentioned link.
from pyvis.
Let me see what I can do about that. I agree that could be helpful when looking for a specific node.
from pyvis.
Thanks @boludo00. Very much appreciated.
from pyvis.
I have been messing around with some pretty big changes in order to support and maintain custom interactions, check out PR #91 you can see a demonstration of some added features I think you were requesting. If you want to pull that expiremental branch you can mess with it and see if it needs any more attention, but I'm going to work on cleaning and testing some more things before I release this into the wild.
from pyvis.
Thank you. The demo looks great! It's exactly the feature I was looking for.
I tried to replicate what you did. After pulling the experimental branch, all I'm presented is the dropdown menu and no graph. Without the pulled branch, and excluding the parameters neighborhood_highlight and select_menu, the graph was generated, but (of course) without the dropdown menu.
from pyvis.
Oh I see. There might have been an issue with resolving the dependencies that I didn't catch. Are you working out of a Jupyter Notebook by chance? I would take a look at your browser's debugger and check out the console for any errors.
from pyvis.
Here you go. localhost-1619774542138.log
P.S. Actually, I'm using Anaconda distro and PyCharm. I tried Jupyter notebook to completely replicate your demo. Also, if I may add:
- With the current experimental branch, manually selecting a node within the graph highlight itself and its neighbors while greying out the rest. Can we incorporate this as well for the dropdown menu option?
- I used Networkx and was able to assign different colors for each node base of a categorical column. Kindly skip to item number 3.
I get the error TypeError: add_node() got multiple values for argument 'color'
Note: I wanted to distinguish each node based on a categorical column of a Panda dataframe. In my original code, I didn't use the Networkx library directly (I will try to use Networkx now). I use PyVis to create nodes and edges with g.add_node() and g.add_edge() respectively via a for loop. If I remove the color parameter in g.add-node(), I'm no longer presented with this error; however, that will make my graph monochrome. - Adding a legend in the graph (based on a categorical column) would also be a great addition. If this is too much of a hassle, having item number 1 will be enough.
Thank you.
from pyvis.
-
Ok, I got the select working with greying out the rest. It is basically the same behavior of neighborhood highlight, except it doesnt fire on click event. Just on selection. Which means, too reset the nodes colors I added a button you can click instead of clicking off the nodes.
-
I think I know what you mean by this error. I got this error when attempting to do
g.add_node(n_id, n_id, color="blue")
because a recent change toadd_node
added thecolor
kwarg inplace of the label. So therefore it was receiving 2 args for color. To avoid this you can either useg.add_node(n_id, color="red")
org.add_node(n_id, label=n_id, color="red")
-
I have added a legend before in an internal project so this is definitely doable.
from pyvis.
Thanks @boludo00.
Have you seen the console errors?
from pyvis.
This feature would be great. I tried using the example with the experimental branch but couldn't get it to work. @boludo00 do you know if this will be on any future update?
from pyvis.
Hi @boludo00
I'm trying to change the color of the nodes when it gets clicked on. I've tried using the options dictionary but it didn't work:
network_graph.set_options(
"""
var options = {
"configure": {
"enabled": true
},
"interaction": {
"hover": true
},
"nodes":{
"chosen": true,
"color": {
"highlight": {
"border": "#D66A5E",
"background": "#C93C2C"
},
"hover" : {
"border": "#D66A5E",
"background": "#C93C2C"
}
},
"font": {
"size": 20
}
}
}
""")
How can I achieve this ?
Thanks!
from pyvis.
Related Issues (20)
- Adding and editing nodes and edges graphically HOT 1
- remove print statement
- Intergration with EasyGraph
- Some buttons not working
- Some buttons not working
- Dropdown list button is not precise
- Clustering nodes with same labels?
- Filtering Nodes HOT 1
- Arrows are not displayed on the graph HOT 1
- highlightActive is not defined: Causes wierd jump of graph
- AttributeError: 'NoneType' object has no attribute 'render' HOT 4
- How do you change the fonts of the labels on the nodes?
- Be able to set the color of an edge independently of the source node
- Left to Right Orientation?
- Interactive Node in in Output HOT 1
- Use palette to color nodes and add colorbar
- Edge titles does not work? HOT 6
- Pyvis HTML Output does not use 100% of the page HOT 2
- Save as json
- Problem with labels, trying integration with pandas, Latex and Networkx
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pyvis.