Genomic-Interactive-Visualization-Engine 使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00091/article/details/142507119

Genomic-Interactive-Visualization-Engine 使用教程

Genomic-Interactive-Visualization-Engine Genomic Interactive Visualization Engine 项目地址: https://gitcode.com/gh_mirrors/ge/Genomic-Interactive-Visualization-Engine

1. 项目介绍

Genomic-Interactive-Visualization-Engine（简称 GIVE）是一个基于 HTML5 的库，允许用户像嵌入标准 HTML 元素一样嵌入基因组可视化面板，从而构建自定义的基因组浏览器。GIVE 支持从公共数据库（如 ENCODE）和内部数据源中获取数据，并使用 Web Components（特别是 Polymer 库）和 Scaled Vector Graphics (SVG) 1.1 进行图形渲染。

GIVE 的主要组成部分包括：

GIVE Web Components：客户端代码，运行在浏览器中，使用 HTML5 实现。
GIVE 服务器：包括服务器端代码，使用 PHP 实现。
GIVE 数据源：用于管理和提供数据。

2. 项目快速启动

2.1 安装 GIVE

GIVE 的安装是可选的，但如果您希望从自己的服务器提供代码和数据源，可以按照以下步骤进行安装。

2.1.1 使用 GIVE-Docker 进行快速部署

推荐使用 GIVE-Docker 进行快速本地部署：

docker pull zhonglab/give
docker run -d -p 80:80 zhonglab/give

2.1.2 手动安装

如果您不使用 Docker，可以手动安装 GIVE。首先，确保您的服务器环境支持 PHP 和 Web 服务器（如 Apache）。然后，按照以下步骤操作：

克隆 GIVE 仓库：

git clone https://github.com/Zhong-Lab-UCSD/Genomic-Interactive-Visualization-Engine.git

配置 Web 服务器以指向 GIVE 目录。
根据 GIVE 教程 2.2 进行详细配置。

2.2 使用 GIVE Web Components

在您的 HTML 页面中导入 GIVE Web Components：

<!DOCTYPE html>
<html>
<head>
    <script src="https://www.givengine.org/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="https://www.givengine.org/components/chart-controller/chart-controller.html">
</head>
<body>
    <chart-controller ref="mm10" title-text="My GIVE Browser" group-id-list='["genes", "singleCell", "customTracks"]'></chart-controller>
</body>
</html>