Admin Graph Screenshots

From CoGepedia
Jump to: navigation, search


Here at CoGe we've been working on an Admin dashboard for the site, a place where CoGe Administrators can get to the tools and information they need to maintain and improve the sight all in one place. The newest addition to this page is the "Graph" tab, which allows us to see a visual representation of our user base and the kind of data it uses.

Using the D3.js force layout we are able to see this information in the form of a naturally self-organizing graph. Each node in the first layer of the graph is a user. These nodes can be clicked to reveal their child objects: the notebooks, genomes, and experiments that user maintains on the site. Notebooks themselves can then also be expanded in a similar fashion. The size of each node is relative to the number of child objects it holds, so it is fairly easy to see who the power users are at a glance. The graph is "naturally self-organizing" because of the force calculations that the layout runs on each node and link. A "gravity" value pulls each element towards the center of the screen to keep them form leaving the view. A "charge" value pushes nodes away from each other, and scaling this value off of the node's size allows us to prevent visual overlap between nodes. The balance of these two values causes the graph to stabilize in a state where each node is equally visible, which gives us a great, holistic picture of how our users are using data in CoGe.

This tool is not yet publicly available (because it displays sensitive information about users and their data) but we are working on an "anonymized" version for public use.

Snapshots of the development process of the Admin dashboard's Graph tab.

Graph Screen 1.png

Adjusting the size and "charge" force of nodes.

Graph Screen 2.png

High charge and small size make for visually stunning graphs, but most of the nodes are too small to interact with properly.

Graph Screen 3.png

Even when a node's charge is calculated using its size, it doesn't seem to scale in a linear fashion.

Graph Screen 4.png

This is a much cleaner balance. Each node has its own space without the graph as a whole spreading out too much.

Graph Screen 5.png

Some of the nodes in the "Groups" subtree. The large white node is the "User" subtree.

Graph Screen 6.png

More open nodes, showing several layers of depth.

Graph Screen 7.png

The large red node is a notebook that has a large number of experiments stored inside.

Graph Screen 8.png

When opened, the notebook appears to hold entirely genomes (green nodes).

Graph Screen 9.png

Moving some of the nodes around makes the graph clearer.

Graph Screen 10.png

A graph angel that naturally arises when looking at our two biggest power-users.

Graph Screen 11.png

A fully opened look at the group graph. Black nodes are nodes that could have child objects, but don't.

Graph Screen 12.png

The same graph with a filter applied to show public (green), restricted (grey), and deleted data (yellow).