@@ -6,4 +6,28 @@ This directory contains the visualization suite for the workshop ""Providing new
1. Active internet connection as some of the dependencies are loaded via CDNs
2. If you use _Firefox_, just open the file index.html in it
3. If you use a different browser, you need to set up a simple web server; with Python 3, you just need to run "python -m http.server" in this directory
* Per default, this should serve the app on port 8000 of localhost (access via 0.0.0.0:8000 or localhost:8000 in your browser)
\ No newline at end of file
* Per default, this should serve the app on port 8000 of localhost (access via 0.0.0.0:8000 or localhost:8000 in your browser)
## How to use the visualization suite
After accessing the suite in your browser, upload a graph JSON file using drag-and-drop and by clicking "Upload".
### Available settings (settings view)
Before actually starting the visualization, you can select the following options:
* _Visualize degree of nodes_: A node with more connections is shown larger than a node with fewer connections. (Default: false)
* _Add time slider_: Adds a slider that allows to filter graph based on dates. (Default: false)
* _Drop description nodes_: Do not display text description nodes (useful on very large and/or unsimplified graphs) (Default: false)
* _Minimum count of connections for persons_: Only show persons and associated nodes if those persons are connected to at least the set number of trials (Default: 1)
### Available settings (visualization view)
After visualization is complete, you can interact with the graph in the following ways to inspect it more closely or to filter out specfic parts:
***Settings menu** (gear symbol on the top-left):
* _Enable Physics_: Enables the physics module of _vis.js_, thus makingg the network move around and react to dragging of nodes (Default: false)
* _Lock network_: Other than zooming and dragging nodes, the network becomes unresponsive to user interaction. Ideal when selecting a node and inspecting its connections without accidentally unselecting it. (Default: false)
* _Node Types_: Lists all special node types (see below for details) with their associated shape and color. You can highlight each node type individually. Further, you can remove all description nodes.
* _Minimum count of connections for persons_: see above
* _Map node types_: Allows you to transform the graph by mapping two node types that have no direct connection onto each other by way of checking how many trials they are mututally associated with.
