摘 要

本论文主要阐述当今分子遗传数据研究中对于可视化工具的迫切需求及其存在的必要性，并且针对这些需求做出的相对应的可视化工具并对其功能及应用对象做出说明。论文针对研究人员在进行研究过程中的各种需求，通过对于JSP及HTML5程序语言的应用，在网页模式下，分析、设计，并实现了分子遗传数据可视化工具的网页应用版。

该工具基于HTML5的网页编程语言，实现了在网页上直接读取大数据量的遗传分子数据，并将其转化为图像的效果，便于研究人员在研究过程中直观比较不同遗传分子数据件的异同，以及不同样本个体间表形数据上的差异。

论文主要包括以下三个部分的内容：

第一部分是对程序背景以及程序本身的可行性分析，说明了开发该程序的目的以及开发所用到的相关技术。

第二部分是需求分析和总体设计，通过对研究者研究需求的分析，产生相对应的整体系统以及各项功能。

第三部分是详细设计以及各项功能实现，按照详细设计进行代码开发以实现系统的功能。

第四部分是对于已经实现的功能效果的验证，并对程序本身设计进行总结。

关键字：遗传分子 ,可视化 ,HTML5 ,JSP

Abstract

This paper mainly focuses on the necessary of the visualization tool for the research of molecular genetic data, And according to these requirements，we will make a visualization tool to response to the necessary and explain the functions of it. The paper accords to the researchers of various needs in the research process, we use the JSP and HTML5 programming language, analysis, design, and implementation of molecular genetic data visualization tools webpage application version in the webpage mode.

This tool base on the HTML5 webpage programming language, what can show the genetic and molecular data while direct reading a large amount of data on the webpage, and turn it into image effect, it is convenient for researchers in the process of visual comparison of different genetic similarities and differences between molecular data, as well as the comparison of data between different individuals.

The thesis mainly includes three partial contents:

The first part is about the background and feasibility analysis of application program, also tell us about the development of the program objective and what technologies we will use.

The second part is the demand analysis and the overall design, through the analysis of the demand for researchers, what functions should be relative to the overall system.

The third part is the detailed design and the function realization, also the code is developed in accordance with the detailed design to realize the function of the system. The fourth part is to verify the functional effects have been achieved, and we will summarize the program design.

Key word: Genetic and molecular,Visualization tool， HTML5,JSP

目录

第一章 问题来源 6

1.1引言 6

1.2 选题背景 7

第二章 主要技术支持 9

2.1 HTML5网络语句 9

2.2 数据可视化技术 10

2.3 JSP 10

第三章 需求和可行性分析 11

3.1需求分析 11

3.1.1遗传数据可视化需求分析 11

3.1.2个体样本可视化需求分析

3.2 技术可行性 14

3.3系统的可操作性 14

3.4系统的可移植性 14

3.5系统的可维护性 14

第四章 系统总体设计 15

4.1 基本架构 15

4.2运行环境及开发工具 15

4.3功能设计 16

第五章 详细设计 16

5.1后台设计 16

5.1.1技术选型 16

5.1.2数据结构 17

5.1.3风格选型 17

5.2前端页面设计 18

5.2.1读取功能实现 18

5.2.2页面跳转功能 18

5.2.3数据验证 19

5.3.1canvas标签的应用以及实现可视化 19

5.3.2横竖排转换功能的实现 20

5.3.3图例的设计 21

5.3.4返回标签的应用 21

第六章 系统实现 21

问题来源

1.1引言

当今时代对于DNA以及遗传数据的研究在生物科学技术领域占着越来越大的比重，遗传数据的研究对于人类社会以及生物学的发展有着极大的促进作用。

人类作为一种生物，存在个体与个体间的众多差异，科学家表示几乎不存在一样的两个人，造成这一切的原因很大的理由便是由于每个人遗传信息各不相同，越来越多的证据证明人格特性都是可以遗传的，人的行为也会受这些遗传的影响。对于遗传数据的研究对于解释个体之间的不同差异有着有效的数据支持，并且能从中找到相同点，以便解析很多对于人类社会极为重要的信息。

分子遗传学作为遗传学的分支，主要致力于研究基因的本质，功能以及基因的变化等等，通过对于同类生物分子遗传数据之间的异同，能够更好的分析出群体与个体的关系，用数据和实例，在遗传学的角度解释诸多生物学现象。

1.2 选题背景

分子遗传数据在研究领域所占的越来越重的比例，使得大量科研人员致力于研究遗传数据的工作之中。随着目前技术的逐渐发展，大规模，高通量测序以及分型技术等技术诞生，遗传数据的数据量以及其繁琐性和复杂度也在不断提升，研究人员必须通过科学的有序性的比较才能对这些数据进行系统地分析得出自己所需要的结论。例如如下两张图片中所示：

以上分别是一组基因个体的样本数据以及分子遗传数据的样本，前者的数据代表每个样本的重量，后者则仅只是9项DNA数据的比较序列。我们不难看出，这样繁琐的数据为研究者的研究和对比带来了很大的困难，并且很多时候我们需要对比更加大量的数据串来确保对于试验成果的准确性的提升。所以分子遗传数据可视化工具的开发势在必行，通过实现将分子从数据转化为图像的方式，既可以使得研究人员可以直观的去对比不同与相同分子遗传数据的情况，缩减了研究的困难和繁琐，另一方面用二维的，直观的图形去表现数据，也可以使得研究人员更轻易的发现很多容易被忽略的研究点。

主要技术支持

本次开发的分子遗传数据可视化工具运用了JS的编程技术，网页方面主要以新兴的HTML5网络语言为主，主要技术的介绍如下。

2.1 HTML5网络语句

HTML是网络语句的一种标准，是WHATWG（Web超文本应用技术工作组）用于规范Web标准化运动所推出的一种版本范例。HTML5则是由WHATWG和W3C（World Wide Web Consortium—万维网联盟）所合作提出的新版本的HTML。它有着以下诸多特点：

1.语意方面：HTML5能够赋予网页更好的结构，使得其意义更加清晰，并且随着对微数据，微格式等更加丰富的标签的运用，可以构建出对于用户以及程序自身都更有价值的由数据驱动的Web。

2．储存方面：HTML5拥有本地存储的特性一级APP Cache的功能，能够使基于其所开发的网页拥有极短的启动时间以及更快的联网速度，他的API说明文档也对以上两点有着推动作用。

3. 设备兼容方面：自从Geolocation功能的API文档被公开，HTML5作为最新锐的网络语言标准，为前端以及后台开发者们提供了更多的功能优化选择，他给予了开发者无比开放的数据应用接入和开放接口。很多内置标签以及工具可以直接使外部程序和浏览器内部数据相连，例如很多音频、视频方面的工具。

4.连接方面：基于HTML5标准下的网页，可以提供例如即时聊天，在线交流以及即时更新的功能，他的推送技术可以使服务器上的信息更容易的在用户之间传递，例如Server-Sent Event和WebSockets两个特性。

5.多媒体插件方面：HTML5支持很多网页端的多媒体功能，例如Audio、Video等，并可以使他们轻松与网站的APPS，影音和摄像头方面的功能相互照应，一个简单标签的运用就可以提供出FLASH等功能。

6.显示和特效方面：HTML5提供基于SVG、Canvas、WebGL和CSS3这些标签上的3D功能，可以在浏览器中轻松的提供出精美的3D和动态效果给使用网页的用户。

7.CSS3特性：