tomudding / 2IOA0-DBL-HTI-Webtech

2IOA0 DBL HTI + Webtech

The website can be accessed through https://graphion.uddi.ng/. Please follow the steps under DOCUMENTATION for more information on how to locally run graphion.

DEADLINES

Given project deadlines:

Task	Deadline date
Interim video	24th of May
Interim report	24th of May
Nearly final tool	12th of June
Send 2 best figures to Burch	18th of June
Final tool/report/video	21st of June

Our own deadlines:

Task	Deadline date
Filming video	14th of June
Generating neat visualizations for aesthetics award	16th of June
Editing video (draft)	19th of June
Comments on video (draft)	20th of June (before 12)
Draft of final report	20/21th of June
Checking and correcting report	21th of June
Fix video	21st of June
Final touches on our tool	21st of June

REQUIREMENTS

Minimal requirements as described in VisProjectDescription.pdf and the kickoff slides.

• At least 2 visual metaphors

  • Node-link diagram with at least 3 different layouts:
    • Radial
    • Force-directed
    • Hierarchical
    • Spectral
    • Orthogonal
    • Circular tree
    • Arc diagram (combined with matrix reorderings maybe)
    • Extra: others
  • Adjacency matrix with at least 5 different reordering strategies
    • Clustering
      • Agglomerative hierarchichal clustering
        • Different ways of calculating the similarity between two clusters (aka. linkage criteria):
        • Ward's method (minimizes the total within-cluster variance)
        • single/minimum linkage clustering (dist(C1,C2) = min dist(Pi,Pj))
        • complete/maximum linkage clustering (dist(C1, C2) = max dist(Pi, Pj))
        • average linkage clustering (dist(C1, C2) = avg(dist(Pi, Pj)))
        • weighted
        • centroid
        • median
        • Different distance metrics
        • Euclidean
        • Cityblock
        • etc..
    • Greedy algorithms
      • Bipolarization
    • Optimal-leaf ordering
    • ...
  • Extra: others like
    • Hybrid representations
      • NodeTrix
      • MatLink
    • 3D node-link diagram

• Web-based visualization tool for networks (weighted and directed graphs)

  • Accessable via URL (https://graphion.uddi.ng/)
  • Upload graph data (in a specified data format)
  • Visual interactions from each of the 7 categories of interactions (Yi et al.)
  • Data and insights should be sharable with all other people using the web tool
    • 10 most recent datasets can be chosen
    • Screenshots can be made of each plot
      • Parameters of plots are included in screenshots

Suggested further improvements but not required:

• Multiple coordinated view design
  • Different visualizations next to each other
  • Brushing and linking (highlighting / selecting is synchronized between graphs)
• Edge bundling (though bold red text comes included: Only if you enjoy visualization and like to do more)

DOCUMENTATION

1. Installation

To install the development environment:

1. Open the Anaconda Prompt as an administrator (solves permission issues).
2. Update conda using conda update conda.
3. Clone Git repository to current location with git clone insert_url where insert_url is the url given by the clone button on the top right. Or download the zip file.
4. Go to the Git repository folder using cd [git folder location].
5. Create a new conda environment using conda env create -f environment.yml.

2. Development

To access the development environment:

1. Open the Anaconda Prompt as an administrator (solves permission issues).
2. Enter the environment through conda activate 2ioa0.
3. Make sure you go to the actual Git repository folder using cd [git folder location].
4. Now you can work on the web app.
5. After you finished a certain task, you can upload it to Github by doing the following commands in a git command prompt (or similar actions in Github desktop):
   1. git pull origin master to get the latest repository from Github.
   2. git add . to add all your file changes to a commit.
   3. git commit -m "Put commit message here to make the commit.
   4. git push origin master to push your commit to Github.
      ^{If you decide to implement a whole new feature which requires a lot of modifications please do it on a seperate branch and create a pull request to merge it into the master branch.}

3. Deployment

To run the Flask app service locally execute the following commands (in the repository folder):

1. set FLASK_APP=graphion (or export FLASK_APP=graphion on UNIX-like systems)
2. flask run The Flask service should now be running on localhost:5000.