5.1 GIVE

GIVE - Genomic Interaction Visualization Engine

  1. Architecture of GIVE

  2. Distinguished Features

  3. Get started

https://sysbio.ucsd.edu/public/wenxingzhao/give.html

GIVE is a highly adaptive and interactive open source programming library. It provides the easiest way to a portable genome browser to examine genome interactions with different kinds of data, which can be embedded in your own websites.

<!-- header source -->
<script src="https://www.givengine.org/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 
<link rel="import" href="https://www.givengine.org/components/chart-controller/chart-controller.html">
<div style="position: relative; width: 100%; height: 600px">
<chart-controller title-text="A 2-minute starter of building a genome browser with GIVE" ref="hg19" num-of-subs="2" coordinates='["chr18:19140000-19450000", "chr18:19140000-19450000"]' group-id-list='["genes", "CHi-C_promoter"]'></chart-controller>
</div>

A quick example by embedding code generated from GIVE into gitbook, What a fantasia! This is an interactive panel, where you can change the chromosome location(left up corner), interaction datasets (left columns), even zoom-in-and-out by placing your mouse on the chromosome ruler and scroll the mouse wheel!

Architecture of GIVE

The architecture of GIVE is important for users to understand how it works and how to use it. In generally, GIVE is composed of two parts:

  • HTML tag library

  • GIVE-Toolbox

HTML tag library is used to specify what types of data should be included in the browser by indicating specific tags in the code.

GIVE-Toolbox is a set of command line commands to add and manage custom data, which automates all necessary database operations relieving the user from working with a database language.

Besides, GIVE Data Hub holds a large number of datasets, users can select some of them to view and compare and generate the HTML code to share or embed. User can also upload their own datasets to it with conformation from GIVE team.

Distinguished Features

1) Online multiple types of genome interactions viewer

  • multi types of interaction

  • double layer display

  • interactive presentation

2) Portable genome browser generator

  • automatic webpage generation with GIVE-HUG((HTML Universal Generator)

  • embed the code on your own webpage

3) Managing your own data

  • upload your dataset to GIVE Data hub

Get started

Here, we'll show few examples to get you prepared before you dive into details and personalized adjustment. Part of the showcases come from GIVE homepage Examples and Tutorials.

Example1: Create a GIVE viewer based on HTML code

With GIVE generator, you can get a short piece of code without much effort. Thanks to the specialized HTML library, personal preferences can be easily defined by changing parameters of chart-controller or chart-area libraries.

Once you have the code, there are few ways to view your browser!

  • Online HTML testing website like jsfiddle.

  • Local .html file (just copy paste the code into it), and then open it.

  • Personal webpage, or HTML based apps like gitbook (a kind of markdown editor).

a) with the online test environment, you can refer to GIVE Tutorial 0:

c) if you want to integrate the code on your personal website, you can add the code in your html file. Please pay attention that all features in char-controller<\code> should not be seperated by newline. To best fit your browser, you could wrap the controller with div tag.

<!-- header source -->
<script src="https://www.givengine.org/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 
<link rel="import" href="https://www.givengine.org/components/chart-controller/chart-controller.html">

<div style="position: relative; width: 100%; height: 600px">
<chart-controller title-text="A 2-minute starter of building a genome browser with GIVE" ref="hg19" num-of-subs="2" coordinates='["chr18:19140000-19450000", "chr18:19140000-19450000"]' group-id-list='["genes", "CHi-C_promoter"]'></chart-controller>
</div>

You can tweak the browser with different reference genomes, number of subview interactions, the data and the coordinates.

Example2: Generate personalized browser code with GIVE data hub

GIVE data hub has included a lot of public datasets. There are UCSC genome annotation, ChIP-seq data, RNA-seq data, Hi-C data, DNase data, Cage data, RipSeq data, interaction data so on and so forth. Users can select them from data hub and generate their own code to explore something interesting.

Upload your own data

Now that we've already got an idea how GIVE works, now we can explore our own data with the power of GIVE. Let's do it steps by steps.

  • Download docker CE (for local deployment)

  • Transform datatypes

  • Add tracks

Install docker:

Docker is a computer program that performs operating-system-level virtualization also known as containerization. It resembles VM in some ways but much thinner. Instead of virtualizing hardware, containers rest on top of a single Linux instance. This means you can leave behind the useless elements, leaving you with a small, neat capsule containing your application.

To install docker, you can first download and install it on your local machine or server docker CE(community edition). Win and Mac users can directly use it by opening it. Linux users need to start the service by running the following command with root privileges.

service docker start

Install & Run GIVE-docker container

Next, pull down the GIVE-docker from repository (tutorial). After that, you can run GIVE-docker container in your own browser by visiting the localhost:port.com

Transform and add your own data tracks

GIVE engine supports different kinds of data. Before GIVE can present your data, you can first transform them into special data structures that GIVE can handle (these are usually more efficient for zooming and storing). GIVE toolbox provides the tools to transform the data and it is capsuled in the docker.

Steps to embody your own data (tutorial)

  • Step 1: Deployment of GIVE

  • Step 2: Initialization and Create Reference Genome

  • Step 3: Create Track Groups

  • Step 4: Create Gene Annotation Track

  • Step 5: Create Data Track from bed File

  • Step 6: Create Data Track from bigWig File

  • Step 7: Create Data Track from interaction File

  • List and Remove Data Tracks

  • Using The Customized GIVE Genome Browser

Last updated