How to gather nodes based on group in VisJS? - javascript

I'm pretty new to VisJS and attempting to visualize computer usage data. Over the past 2 months, I've collected data on how long I spend in each application on my computer in a chronological pattern. I want to create a VisJS network where each node is time spent in an application, the nodes are grouped by application, and the edges connect each node to the application I was using prior and the application I used next.
I've formatted all of my data, created a network from it, but the network always shows up in a ring. I want the different nodes to be arranged by their group - all of the "Chrome" nodes are by other "Chrome" nodes, etc.
Here's the code I'm using:
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes, //about 9,000 nodes
edges: edges //about 9,000 edges
};
var options = {nodes: {
shape: 'dot',
scaling: {
min: 0,
max: 1
}
},layout: {improvedLayout: false}, physics:{enabled: true},edges: {
color:{inherit:true},
width: 0.15,
smooth: {
type: 'continuous'
}
},};
var network = new vis.Network(container, data, options);
Pretty basic, but the actual result is a mess because I have over 9,000 individual nodes. The actual result looks like this:
https://i.ibb.co/gm6d1R7/Screen-Shot-2019-04-08-at-11-23-03-AM.png
I want it to look more like the VisJS example here:
http://visjs.org/examples/network/edgeStyles/smoothWorldCup.html
The thing is, as far as I can tell, I'm using the same options as this visualization - they've just gone in and manually placed each node with coordinates, which I really can't do with 9,000 nodes. Is there a way to do this automatically without placing each node individually?

Related

Select specified nodes and edges in vis.js

I created a small network with less than 100 nodes and I wish to select some specified nodes and edges like:
desiredNodes=[nodeId1,nodeId2...], desiredEdges=[edgeId1,edgeId2...].
The default network.selectEdges() and network.selectNodes() both have unselectAll built in and I could not figure out how to disable unselectAll.
I have tried
mySelection = {nodes: desiredNodes,
highlightEdges: false,
edges: desiredEdges};
network.setSelection(mySelection);
But in this case, all edges connected to desiredNodes are selected and the result is exactly like network.selectNodes(desiredNodes,true).
Is there a way to solve it?
According to the documentation, setSelection takes an optional second argument where you can supply configuration options like highlightEdges.
mySelection = {
nodes: desiredNodes,
edges: desiredEdges
};
myOptions = {
highlightEdges: false
};
network.setSelection(mySelection, myOptions);
The other available configuration option happens to be unselectAll, so you could try disabling that in the options object too.

JQuery Flot : How to add data to the existing point graph instead of redrawing

I am plotting a point graph and the graph should get update with new data for every 5 secs. Here min and max range are always fixed
Currently, when I get new data from server, I do merge the new data to the existing source.data and plotting the complete graph.
So, I dont want to redraw the complete data again and again. As the length of the source.data is increasing, performance is going down . So instead of redraw complete data, can I add only the new data to the existing graph
Please find the source code here
var source = [
{
data: [],
show: true,
label: "Constellation",
name: "Constellation",
color: "#0000FF",
points: {
show: true,
radius: 2,
fillColor: '#0000FF'
},
lines: {
show: false
}
}
]
var options = {...}
$.getJSON(URL , function(data) {
...
$.merge(source[0].data, new_data);
plotObj = $.plot("#placeholder", source, options);
}
Follow this steps:
plotObj.setData(newData);
plotObj.setupGrid(); //if you also need to update axis.
plotObj.draw(); //to redraw data
Another usefull method is getData(). With this method you can get the current data.
var data = plotObj.getData();
Your method of calling $.plot over and over should be avoided. It used to leak memory (not sure if it still does).
That said, #Luis is close, but let's put it all together. To add data to an existing plot do this:
var allData = plotObj.getData(); // allData is an array of series objects
allData[seriesIndex].data.push([newXPoint,newYPoint]);
plotObj.setData(allData);
plotObj.setupGrid(); // if axis have changed
plotObj.draw();
It should be noted that this does redraw the entire plot. This is unavoidable with HTML5 canvas. BUT flot draws extremely fast, you'll barely notice it.

Rickshaw RangeSlider - Zoom in by default

I am looking at a simple Rickshaw chart with data from a JSON file.
d3.json(data, function(error, json) {
var graph = new Rickshaw.Graph( {
element: document.getElementById(chart_id),
renderer: 'line',
series: [
{name: 'myseries',
data: json[0].data}
]
})
graph.render();
});
I would like to access the graph after it has been rendered. Since the graph is created within a callback function I cannot simply return the handle. Also document.getElementById(chart_id) does not have a chart attribute.
My goal is to, for example, allow users to specify a certain range for multiple charts at the same time (e.g. last 5 years) without having to adjust the RangeSlider for each one of them. With access to the chart I could then do
new_rng = [new_min,new_max]
graph.window.xMin = new_rng[0]
graph.window.xMax = new_rng[1]
$('#' + slider_id).slider('option', 'values',new_rng)
Any ideas?
I think this is a similar problem to the one I encountered with a xively feed where the data is not returned when the graph is rendered. Here's my post.
Multiple calls to xively.feed.history()

Javascript Infovis change individual node color

In this case i'm using JIT Hypertree. I am going to differentiate a node's color from the other's so that every node on the tree have their own color. Is there anyway to change the individual color so it would be different from other node?
I just managed to change the color of all nodes, but not individual.
Node: {
dim: 9,
color: "#009933"
},
You have to set the overridable property to true there on Node.
Node: {
dim: 9,
overridable: true
},
Then, after loading data and before drawing, iterate over the nodes and use setData to set the individual colors. Here's an example that uses random colors, but you could also plug colors into your JSON data and pull it from there:
ht.graph.eachNode(function(node) {
node.setData('color', "hsl("+Math.random()*360+",100%,50%)");
});
Now, shameless plug: I wrote a library to generate colors based on, say, IDs. So if you don't want to handpick colors and you want the colors to have a persistent relation to the data, it would help. Here's the example of using that.
ht.graph.eachNode(function(node) {
node.setData('color', $.fn.autumn.getColor(node.id));
});

What is the 'Hello, World' for the Javascript InfoVis Toolkit?

I am doing research in graph theory and need to visualize graphs in real time.
(That is, if the graph data changes, its representation changes with it.)
InfoVis seems to meet that goal, but I am struggling to put together a simple 'Hello, World' page that just displays a graph on-screen with clickable nodes (where clicking causes the node to change color).
I have a working installation of JIT (the given examples work),
I just need a minimal example of InfoVis to get started,
and it is proving difficult to piece one together from the documentation.
Fiddle example.
This isn't exactly minimal, but you can probably remove some more stuff to make it so. I took code from the graph manipulation example, and removed some superfluous CSS and JS.
To get the nodes to change color, I added this line to the "onClick" function:
node.data["$color"] = "#FF0000";
The minimal elements seem to be:
a JSON data structure
instantiate the $jit.ForceDirected object, and call loadJSON
There's also a bunch of boilerplate code for cross-browser compatibility (checking for canvas support, etc).
The pared-down JSON structure looks like this:
// define three nodes
var json = [
{ // first node
// node identifier
id: "graphnode1",
// node label
name: "A graph node (#1)"
// the node's color, shape, and size
data: {
$color: "#FFFFFF",
$type: "circle",
$dim: 10
},
// this node is adjacent to nodes 2 and 3
adjacencies: [
"graphnode2",
{
nodeTo: "graphnode2",
// make the connector blue
data: {
"$color": "#0000FF"
}
},
"graphnode3",
{
nodeTo: "graphnode3",
}
]
},
// second node
{
id: "graphnode2",
name: "Another graph node (#2)"
},
// third node
{
id: "graphnode3",
name: "Another graph node (#3)"
}
];
Here's the outline of the initial code:
var json = {
// structure here
};
var fd = new $jit.ForceDirected({
// create canvas in "infovis" DOM element
injectInto: 'infovis',
// many other options here
});
fd.loadJSON(json);

Categories