NISTH Interactive

Network

Yong Siang
1/12/2021
REPORT TITLE

PAGE 2
 REPORT TITLE

Current Website
https://blogs.ntu.edu.sg/nisth/fellows/

Figure 1

Currently, NISTH fellows network page consists of Filter Area and Display Area.
Filter Area allows user to filter fellows based on the following.
• NTU college
• NTU research entity
• Research Category
• Curated topic grouping
• UN SGDs

Upon selecting the filters, the user will click on the filter button on the bottom and fellow
display area will update based on the filtered fellow.

Display area displays fellows according to the following.

• Profile picture
• Name
• Designation

Users can click on their name to look at their detailed description.

PAGE 3
 REPORT TITLE

Things to improve on
Showing relationships between fellows to connect expert areas.
Allow faculty to search for potential collaborators easily using a force directed graph.

Things to look future into it.

What kind of connection relationships can be used to do the connection? E.g. :
Problem Statement, SDGs

Planned Implementation
Paper Prototype

Figure 2 : Current Fellows Page with Visualized View Button

PAGE 4
 REPORT TITLE

Figure 3 : Interaction Map Default Page

This page will use the existing “filter area” GUI for their filtering column to maintain
consistency. At the bottom relationship indication map will be added to allow the user to
display relationships between 2 nodes. Colours will be applied to differentiate various
relationships as well.

PAGE 5
 REPORT TITLE

When clicked on the images a sidebar on the right will appear showing summarized
information about fellow

PAGE 6
 REPORT TITLE

Functionality
• Construct and display a 3D force-directed graph using fellow’s information.
• 3D force-directed graph enables 360 degrees to view obit.
• 3D force-directed graph nodes are represented by fellows’ profile picture.
• 3D force-directed graph nodes can be pulled.
• 3D force-directed graph links must be coloured based on the suggested
relationship colour.
• Clicking on a node will trigger sidebar with fellow’s information appearing on the
right.
• Clicking on a node will also highlight the relationship between fellows

•
Suggested Library
3D force graph is a web component to represent a graph data structure in a 3-
dimensional space using a force-directed iterative layout. Uses ThreeJS/WebGL for 3D
rendering and either d3-force-3d or graph for the underlying physics engine.

https://vasturiano.github.io/3d-force-graph/

Planned Timeline
No Task Progress
1
2

Logbook
No
1
2

PAGE 7