/hiview

HiView: the universal viewer for hierarchical data

Primary LanguageJavaScriptMIT LicenseMIT

HiView (a universal viewer for hierarchical data)

This is the documentation for HiView classic. Click here for DDRAM documenation

What is HiView?

HiView (http://hiview.ucsd.edu/) is a web application for visualizing hierarchical structure and the data that supports this structure. Hierarchical structure is stored and represented by a data structure called an ontology.

Users can upload their own ontologies using the ddot Python package (source code and tutorial) and then view them on HiView.

Updates

  • 12/4/2018 - v1.5 release
  • 6/11/2018 - v1 in beta
  • 9/20/2017 - Updated for new version

Publication

(TBD)

Quick start guide for users

Go to http://hiview.ucsd.edu, and click the EXAMPLES button to select a pre-computed ontology. Press START, and you will be taken to a visualization of that ontology.

HiView's visualization is separated into two panels (see screenshots below):

  1. The Main Panel shows the ontology's hierarchical structure. This panel shows either a "circle-packing" diagram (the default) or a node-link diagram. The diagram that is shown can be switched in the Control Panel (see below).

  2. The Side Panel shows the data that supports the hierarchical structure. To activate this panel, double-click on any subsystem node in the Main Panel.

Main panel: Circle-packing diagram

In a circle-packing diagram, hierarchical relations are intuitively represented by drawing small circles nested within larger ones (like physical compartments of the cell).

Main panel: Node-link diagram

In a node-link diagram, hierarchical relations are represented by directed edges and drawn compactly with a 2D layout algorithm.

Side Panel: Interaction network diagram

The Side Panel allows you to visualize how data (in the form of gene-gene interaction networks) support the existence of each subsystem and their hierarchical organization. The Side Panel contains several visual components:

  1. A gene-gene functional similarity network, consisting of genes in the selected subsytem
  2. A histogram of the gene similarities
  3. Checkboxes to toggle the visualization of other gene interaction types
  4. A list of other attributes about the selected subsystem.

Control Panel

To open the Control Panel, double-click on the "hamburger" button at the top-left of the screen (i.e., the icon with three horizontal lines). The Control Panel allows the following configurations:

  1. Switching between the circle-packing (the default diagram) and the node-link diagram.
  2. Configuring the color of circles in the circle-packing diagram.
  3. Configuring node size, label size, and edge thickness in the node-link diagram.
  4. Enabling gene set enrichment analysis.

Options for Circle-Packing diagram

Options for Node-Link diagram

Automatic gene set enrichment analysys by Enrichr

When a user selects a subsystem, HiView can automatically perform gene set enrichment analysis using the Enrichr web service. By default, this option is turned off. To enable this option, turn on the Automatically run gene set analysis with Enricher function in the Control Panel. Enrichment results are displayed on a separate bottom panel.

Quick Start for developers

HiView is implemented using React

  1. Checkout this repository
  2. Clone CyViewer module
  3. yarn install
  4. yarn link
  5. In the frontend directory, run yarn link cy-viewer
  6. yarn start

Developer Documentation

  • UX Design
  • Architecture Design

Roadmap

V1 (Summer 2018)

  • Support for small to medium size data
  • Public data only
  • Automatic enrichment analysis

V2 (Fall 2018)

  • Large data support
    • e.g., human dataset
  • Private data support (for NDEx)

Developer's Guide

(TBD)

Note

© 2017 - 2018 UC, San Diego Trey Ideker Lab

HiView Application is designed and implemented by Keiichiro Ono (kono ucsd edu).

Data-Driven Ontology Toolkit (DDOT) is developed by Mike Yu