Quark is a data visualization framework.
Quark is framework built on top of Linkurious.js which lets you painlessly visualize your data in form of nodes & edges. It offers a lot of features out of the box and runs in a browser so you don't need to worry about installing anything or configuring things. Just feed it some data and Quark will plot a beautiful and intractable graph out of it.
Here's a screenshot if you are eager to take a look at it:
All modern web browsers are supported, including:
- Internet Explorer 10+
- Chrome 23+ and Chromium
- Firefox 15+
- Safari 6+
Touch events on tablet and mobile are currently supported as beta features.
left click
Select a noderight click
Highlight edges of the nodedrag
Move aroundmousewheel
zoom in & zoom out
Keyboard Arrows
Move aroundspacebar + +
Zoom inspacebar + -
Zoom outspacebar + a
Select/deselect all nodesspacebar + e
Select neighbors of selected node(s)spacebar + u
Deselect nodesspacebar + i
Select nodes with no edgesspacebar + l
Select nodes with 1 edge
Options in the sidebar are divided in sections and their documentation here follows the same style.
It arranges the nodes in a circular layout.
Click a node and then click on the center option to place it in the center of the graph.
It resets the color of all edges and nodes.
Lasso tool lets you select nodes by drawing a line around them.
It optimizes the size of nodes that are too small or too big.
It removes nodes & edges which are too small.
It deletes the selected node(s) from the graph.
The dropdown list lets you select different types of edge styles.
Supported edge styles are:
line
Simple straight linesCurved
Curved linesArrow
Arrows that point towards the target of the edgecArrows
Arrows but curved
It shows the total number of edges. You can click it to toggle edges on/off.
It shows the total number of nodes. You can click it to toggle nodes on/off.
Toggle edge labels on/off.
Toggle node labels on/off.
The color option lets you choose a color from a color picker and apply it to the selected node(s).
Enter full label/id of a node and it will find and highlight it. Default color is yellow
.
It helps you find & color nodes that are more densely connected together than to the rest of the network.
It lets you select the "aggressiveness" to use while coloring the communities. Lower the level, higher the number of communities.
It simply resets the color change made by the cluster option. However it doesn't reset the the position of the nodes i.e. they remain in cluster form.
As the name suggests, it lets you export your current graph to a JSON file.
Before reading any further, take a look at my Orbit which uses Quark to analyse crypto wallet relationships.
You have 5 points a, b, c, d, e
and you know the relationships between them like a
is related to c
.
Then create a file with the contents
a,e
c,d
e,a
d,e
a,c
c,e
Save it with any name and any extension and feed it to quark.py
as follows
python3 quark.py <filename>
That's it! Open quark.html
and you will see your graph.
Why are the nodes so small? Because in this automatic mode, the size of a node is determined by how many other nodes are connected to. For any noticeable variation in node size, your graph should have enough nodes i.e. larger than 20.
If you are like me and you want full control of everything like the co-ordinates and size of nodes, edge thickness and their labels etc. then you will need to arrange this information in JSON syntax as follows:
{
"nodes": [{"label": "a", "x": 1, "y": 1, "id": "node1", "size":10}, {"label": "b", "x": 2, "y": 1, "id": "node2", "size":4}],
"edges": [{"source":"node1", "target":"node2", "id":"edge1", "size":2}]
}
Save it with any name and again, pass it to the handler and open quark.html
Quark is tested and built on a spaghetti laptop with just 3GB RAM, built-in graphic card & i3 processor. On this configuration, a graph with 7000 nodes & 3000 edges was rendering just fine.
A computer with better specifications will be able to handle more data smoothly. Just to be on the safe side, Quark prompts the user for using webgl
renderer if the number of edges is more than 8000.
webgl
uses your GPU to render graphs which boosts the performance but it doesn't support interaction events.
Quark uses canvas
renderer by default.
Tips:
- Edges consume more memory than nodes.
- Memory caused by edge styles:
line < curve < arrow < curved arrow
- Delete the nodes which seem insignificant to you.
- Hide edges/nodes when you are not dealing with them.
- Hide node labels (you will still be able to see them on hovering over nodes).
- Hide edge labels.
Quark is built on top of Linkurious.js and the files from Linkurious.js are stored in the libs
directory. The bugs in them are out of scope so don't open an issue here. You are welcome if you want to fix issues yourself with a pull request./
Feel free to open issues about a bug, question or feature request.