CN112015513A - 一种基因大数据前端可视化交互分析方法 - Google Patents
一种基因大数据前端可视化交互分析方法 Download PDFInfo
- Publication number
- CN112015513A CN112015513A CN202011154123.2A CN202011154123A CN112015513A CN 112015513 A CN112015513 A CN 112015513A CN 202011154123 A CN202011154123 A CN 202011154123A CN 112015513 A CN112015513 A CN 112015513A
- Authority
- CN
- China
- Prior art keywords
- graph
- browser
- javascript
- data
- svg
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 108090000623 proteins and genes Proteins 0.000 title claims abstract description 27
- 230000000007 visual effect Effects 0.000 title claims abstract description 24
- 238000000034 method Methods 0.000 title claims description 32
- 238000012482 interaction analysis Methods 0.000 title claims description 15
- 238000013515 script Methods 0.000 claims abstract description 43
- 238000009877 rendering Methods 0.000 claims abstract description 38
- 230000002452 interceptive effect Effects 0.000 claims abstract description 20
- 238000004458 analytical method Methods 0.000 claims abstract description 15
- 230000003993 interaction Effects 0.000 claims abstract description 14
- 238000005516 engineering process Methods 0.000 claims abstract description 11
- 238000009795 derivation Methods 0.000 claims abstract description 8
- 238000010586 diagram Methods 0.000 claims description 25
- 238000012800 visualization Methods 0.000 claims description 13
- CCEKAJIANROZEO-UHFFFAOYSA-N sulfluramid Chemical group CCNS(=O)(=O)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F CCEKAJIANROZEO-UHFFFAOYSA-N 0.000 claims description 6
- 238000012163 sequencing technique Methods 0.000 description 9
- 238000007405 data analysis Methods 0.000 description 8
- 238000011160 research Methods 0.000 description 7
- 238000001514 detection method Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 238000007418 data mining Methods 0.000 description 3
- 230000014509 gene expression Effects 0.000 description 3
- 238000005065 mining Methods 0.000 description 3
- 238000012216 screening Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000003759 clinical diagnosis Methods 0.000 description 1
- 238000013079 data visualisation Methods 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 239000003814 drug Substances 0.000 description 1
- 229940079593 drug Drugs 0.000 description 1
- 230000008846 dynamic interplay Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000002474 experimental method Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 230000002068 genetic effect Effects 0.000 description 1
- 238000012165 high-throughput sequencing Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000003908 quality control method Methods 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G16—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR SPECIFIC APPLICATION FIELDS
- G16B—BIOINFORMATICS, i.e. INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR GENETIC OR PROTEIN-RELATED DATA PROCESSING IN COMPUTATIONAL MOLECULAR BIOLOGY
- G16B45/00—ICT specially adapted for bioinformatics-related data visualisation, e.g. displaying of maps or networks
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- Life Sciences & Earth Sciences (AREA)
- Biophysics (AREA)
- Bioinformatics & Computational Biology (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Health & Medical Sciences (AREA)
- Bioinformatics & Cheminformatics (AREA)
- General Physics & Mathematics (AREA)
- Biotechnology (AREA)
- Evolutionary Biology (AREA)
- General Health & Medical Sciences (AREA)
- Medical Informatics (AREA)
- Spectroscopy & Molecular Physics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种基因大数据前端可视化交互分析方法，包括如下步骤：JavaScript脚本加载：前端交互技术使用JavaScript；服务器接收请求后，向用户浏览器发送JavaScript脚本包；数据加载：服务器接收请求后，将对应数据发送给用户浏览器；图形初步渲染：使用Canvas绘图代码实现高效动态视图渲染；图形参数调整与重新渲染：被读入JavaScript脚本，继续使用Canvas绘图代码重新完成图形渲染；图形导出：浏览器将基于JavaScript脚本包中的Canvas转码脚本，转化为SVG或者PNG图形代码，并另存SVG或者PNG图形到电脑本地文件夹。本发明操作简单，用户友好。
Description
技术领域
本发明涉及生物信息学技术领域，具体涉及一种基因大数据前端可视化交互分析方法。
背景技术
随着基因测序技术的快速进步、检测成本呈现超摩尔定律的趋势下降、高通量测序设备的广泛应用，使得基因检测变的普及，在更广的研究领域上发挥作用，如临床诊断、遗传检测、个人基因组、药物基因组等众多研究领域。
基因检测变普及的同时也带来新的机遇和问题，通过基因组学、转录组学、蛋白组学、代谢组学等基因组学检测技术形成基因数据量也呈倍数增长，对海量数据的筛选和挖掘变为下一个重点和难点。组学大数据分析一般需要由大型服务器完成，然后以图表的形式将结果呈现。组学数据数据量大，信息抽象复杂，数据以可视化图形的方式呈现是协助数据解读人员进行数据解析的关键方法。在数据解析过程中，解读人员需要根据自己的初步判断不断调整可视化绘图参数，例如调整丰度过滤的阈值，删减样本等，然后依据参数调整后图形的变化进一步调整判断。应对可视化图形实时调整的需求，目前最高效的方式是通过云端web界面的方式，呈现动态交互式图形。该策略的实现方式为：
1）通过云端连接服务器，将服务器内的相关数据和绘图指令加载进入浏览器，并以动态web界面的形式向解读人员呈现图形。
2）数据解读人员可以通过web界面内的页面菜单调整参数，浏览器将根据参数变化，将调整后的图形实时反馈给解读人员。
web界面动态图形常用的图形渲染方式为采用SVG格式的图形。SVG格式图形是最常用的不依赖分辨率的矢量图图形格式之一，但在进行组学大数据图形可视化过程中会面临效率太低的问题。组学大数据可视化经常要呈现大量样本的信息，例如数万个基因，数十万个细胞，数百万个SNP。这意味着这些信息对应的可视化图形，将是由大量的点、线等元素构成的高复杂度图形。常规的SVG格式渲染此类由海量元素构成的高复杂度图形效率非常缓慢，加载一副图形可能需要耗费数十秒时间。这意味着数据解读者每次修改参数都需要长时间等待才能看到修改后的图形变化，而不是得到实时的图形反馈。这将严重降低数据解析的效率，带来极差的用户体验。
如果直接换用Canvas等依赖分辨率的交互式绘图技术，虽然可以提高图形刷新速度，但却会由于分辨率的限制丢失了一部分图形信息。对于科研领域的用户，由于发表文章的要求，需要结果图形可输出为矢量图，以满足后续各类图形调整的需求。
为了解决这一生物大数据图形可视化的难点，需要开发能同时满足以下两点需求的可视化渲染技术：
1）能快速渲染大数据复杂元素，在浏览器端的图形能够实时响应用户的参数调整结果；
2）结果可以输出为矢量图，以满足后续科研论文图形调整的需求。
发明内容
有鉴于此，为了解决现有技术中的上述问题，本发明提出一种基因大数据前端可视化交互分析方法，前端交互使用JavaScript的技术，使用Canvas绘图代码实现生物大数据的前端高效交互可视化，并且网页端图形可以通过转码转化为SVG、PNG等用户熟悉的格式输出，从而可以兼顾图形，可以高效交互，同时结果可以输出为SVG矢量图。
本发明通过以下技术手段解决上述问题：
一种基因大数据前端可视化交互分析方法，包括如下步骤：
S1、JavaScript脚本加载：前端交互技术使用JavaScript；用户登陆某个页面网址后，浏览器向服务器发送请求；服务器接收请求后，向用户浏览器发送JavaScript脚本包，JavaScript脚本包中包含浏览器界面布局信息和后续所有的绘图脚本；
S2、数据加载：如果浏览器页面时涉及某个图形或者用户主动选择某个图形后，浏览器将通过云端向服务器发送数据请求；服务器接收请求后，将对应数据发送给用户浏览器；
S3、图形初步渲染：浏览器基于绘图数据和JavaScript脚本，使用Canvas绘图代码实现高效动态视图渲染；
S4、图形参数调整与重新渲染：用户选择浏览器界面的交互式菜单栏中的图形参数选项；菜单信息将以参数的形式直接反馈给前端浏览器，被读入JavaScript脚本，继续使用Canvas绘图代码重新完成图形渲染；
S5、图形导出：用户在交互界面，点击选择SVG或者PNG输出图形后，浏览器将基于JavaScript脚本包中的Canvas转码脚本，将Canvas图形代码转化为SVG或者PNG图形代码，并另存SVG或者PNG图形到电脑本地文件夹。
优选地，可视化交互分析的图型包括t-sne图、散点图、曼哈顿图和QQ plot图。
优选地，散点图为相关性系数散点图和火山图。
优选地，S4 中，参数调整包括图形中的字体大小、字体选择、图形标题、X轴和Y轴标题、透明度、图形边框、图例、点的大小和点的颜色。
优选地，S5中，下载的SVG或PNG格式图形，可自定义设置图形高度和宽度。
与现有技术相比，本发明的有益效果至少包括：
（1）本发明前端交互使用JavaScript的技术，使用Canvas绘图代码实现生物大数据的前端交互可视化，和图形的快速渲染；
（2）市面上此类图都是一张静态的图，本发明根据需要选择参数，快速筛选数据，同步生成图形，实现图结果动态化展示，能够有更多个性化的分析功能，呈现结果具有多样性；
（3）操作简单，用户友好，一键式实现参数选择和结果可视化展示，实现组学测序数据个性化分析。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明基因大数据前端可视化交互分析方法的流程图；
图2是本发明t-SNE图参数调整及图形自定义下载界面展示图；
图3是本发明火山图参数调整及图形自定义下载界面第一展示图；
图4是本发明火山图参数调整及图形自定义下载界面第二展示图。
具体实施方式
为使本发明的上述目的、特征和优点能够更加明显易懂，下面将结合附图和具体的实施例对本发明的技术方案进行详细说明。需要指出的是，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
如图1所示，本发明提供一种基因大数据前端可视化交互分析方法，包括如下步骤：
S1、JavaScript脚本加载：前端交互技术使用JavaScript。用户登陆某个页面网址后，浏览器向服务器发送请求。服务器接收请求后，向用户浏览器发送JavaScript脚本包，JavaScript脚本包中包含浏览器界面布局信息和后续所有的绘图脚本。
S2、数据加载：如果浏览器页面时涉及某个图形或者用户主动选择某个图形后，浏览器将通过云端向服务器发送数据请求。服务器接收请求后，将对应数据发送给用户浏览器。
S3、图形初步渲染：浏览器基于绘图数据和JavaScript脚本，使用Canvas绘图代码实现高效动态视图渲染；
S4、图形参数调整与重新渲染：用户选择浏览器界面的交互式菜单栏中的图形参数选项。菜单信息将以参数的形式直接反馈给前端浏览器，被读入JavaScript脚本，继续使用Canvas绘图代码重新完成图形渲染。
S5、图形导出：Canvas并非常用的图形格式。因此需要转码为普通用户熟悉和需要的格式。用户在交互界面，点击选择SVG或者PNG输出图形后，浏览器将基于JavaScript脚本包中的Canvas转码脚本，将Canvas图形代码转化为SVG或者PNG图形代码，并另存SVG或者PNG图形到电脑本地文件夹。
具体地，可视化交互分析的图型包括但不限于t-sne图、散点图、曼哈顿图和QQplot图。散点图为相关性系数散点图和火山图。
具体地，S4 中，参数调整（图形参数选项）包括图形中的字体大小、字体选择、图形标题、X轴和Y轴标题、透明度、图形边框、图例、点的大小和点的颜色等。
具体地，S5中，下载的SVG或PNG格式图形，可自定义设置图形高度和宽度。
下面从不同的图型分别具体介绍本发明的基因大数据前端可视化交互分析方法。
实施例1
t-SNE图
单细胞转录组学的广泛应用，在数据分析上，相比传统测序产生的数据量更为庞大复杂，包含多达数百万个细胞中数千个基因的RNA表达水平，使得单细胞研究的难题从实验转移到了数据分析上，对数据分析的需求与日俱增，如何对数据进行有效的处理得到理想的结果并可视化展示出来是生物信息的难点。
目前，已有的生信分析流程多数是对单细胞转录组测序的数据进行基础的分析，还无法数据挖掘等复杂的分析工作，多数单细胞转录组测序研究还停留在基础的数据堆砌阶段，制约单细胞领域的发展。且每项单细胞转录组测序的研究背景不一样，图形是需要调整的，数据需要深度挖掘和解析并可视化展示结果的，如常见的t分布随机邻居嵌入（t-SNE）数据分析降维，用于以二维方式可视化数据，就存在以上问题。t-SNE数据量大，每一个点代表一个细胞，目前有些公司以SVG结果图片的形式展示并在网页端进行简单调整，但是鉴于单细胞数据量太大，SVG结果图片的形式在网页端调整速度特别慢，且无法实现个性化分析，本发明提供如下解决方案：
S1、JavaScript脚本加载：前端交互技术使用JavaScript。用户登陆t-SNE图绘图页面网址后，浏览器向服务器发送请求。服务器接收请求后，向用户浏览器发送JavaScript脚本包，JavaScript脚本包中包含浏览器界面布局信息和后续所有t-SNE图的绘图脚本。
S2、数据加载：浏览器页面涉及t-SNE图形或者用户主动选择t-SNE图形后，浏览器将通过云端向服务器发送数据请求。服务器接收请求后，将对应数据发送给用户浏览器。
S3、图形初步渲染：浏览器基于t-SNE图绘图数据和JavaScript脚本，使用Canvas绘图代码实现高效动态t-SNE视图渲染；
S4、图形参数调整与重新渲染：用户选择浏览器界面的交互式菜单栏中的t-SNE图形参数选项。菜单信息将以参数的形式直接反馈给前端浏览器，被读入JavaScript脚本，继续使用Canvas绘图代码重新完成t-SNE图形渲染。
S5、图形导出：用户在交互界面，点击选择SVG或者PNG输出t-SNE图形后，浏览器将基于JavaScript脚本包中的Canvas转码脚本，将Canvas图形代码转化为SVG或者PNG图形代码，并另存SVG或者PNG图形到电脑本地文件夹。
具体地，S4 中，参数调整（图形参数选项）包括t-SNE图形中的字体大小、字体选择、图形标题、X轴和Y轴标题、透明度、图形边框、图例、点的大小和点的颜色等。
具体地，S5中，下载的SVG或PNG格式图形，可自定义设置图形高度和宽度。
图2为t-SNE图参数调整及图形自定义下载界面展示。
实施例优选案例，细胞数（万个，w），实现时间（秒，s），由测试数据可以看出不同数量的细胞数，本技术方案实现的快速渲染效果高于传统方法，更有利于基因大数据的实时快速参数选择和可视化分析。
| 细胞数(w) | 6 | 12 | 18 | 24 | 30 | 36 | 42 | 64 |
| Canvas (s) | 0.7 | 1.338 | 1.886 | 2.807 | 2.988 | 3.321 | 3.847 | 5.636 |
| Svg(s) | 2.3 | 4.575 | 5.331 | 7.565 | 9.004 | 12.188 | 16.566 | 19.829 |
对于单细胞t-SNE可视化，本发明的优点如下：
（1）前端采用JavaScript，加上canvas渲染，使得实现数秒内处理多达10万个细胞的数据挖掘功能；
（2）图片可下载时，可将canvas转化为svg，使得实现图片无损导出，用于文章发表，学术展示等用途；
（3）把svg和canvas的优点综合利用，应用到生物领域，特别是单细胞转录组测序的实验结果分析（可视化展示和数据深入挖掘）。
实施例2
散点图
在组学测序数据中大数据需要通过可视化图形来展示其意义，如散点图，每一个点代表一个基因数据信息。基因组学数据分析中，散点图常用的两种为：样本间基因表达量相关性散点图和火山图，本方法也适用于散点图的快速动态交互分析，可视化展示。
其中，样本间基因表达量相关性散点图实现方法如下：
S1、JavaScript脚本加载：前端交互技术使用JavaScript。用户登陆散点图绘图页面网址后，浏览器向服务器发送请求。服务器接收请求后，向用户浏览器发送JavaScript脚本包，JavaScript脚本包中包含浏览器界面布局信息和后续所有散点图的绘图脚本。
S2、数据加载：浏览器页面涉及散点图形或者用户主动选择散点图形后，浏览器将通过云端向服务器发送数据请求。服务器接收请求后，将对应数据发送给用户浏览器。
S3、图形初步渲染：浏览器基于散点图绘图数据和JavaScript脚本，使用Canvas绘图代码实现高效动态散点图视图渲染；
S4、图形参数调整与重新渲染：用户选择浏览器界面的交互式菜单栏中的散点图形参数选项。菜单信息将以参数的形式直接反馈给前端浏览器，被读入JavaScript脚本，继续使用Canvas绘图代码重新完成散点图形渲染。
S5、图形导出：用户在交互界面，点击选择SVG或者PNG输出散点图形后，浏览器将基于JavaScript脚本包中的Canvas转码脚本，将Canvas图形代码转化为SVG或者PNG图形代码，并另存SVG或者PNG图形到电脑本地文件夹。
具体地，S4 中，参数调整（图形参数选项）包括散点图形中的字体大小、字体选择、图形标题、X轴和Y轴标题、透明度、图形边框、图例、点的大小和点的颜色等。
具体地，S5中，下载的SVG或PNG格式图形，可自定义设置图形高度和宽度。
其中，火山图本质上也属于散点图的一种，主要是用来展示组间差异表达基因的图形，本发明技术实现自定义设置参数，个性化筛选出差异基因，并可视化图示展示，实现具体步骤如下：
S1、JavaScript脚本加载：前端交互技术使用JavaScript。用户登陆火山图绘图页面网址后，浏览器向服务器发送请求。服务器接收请求后，向用户浏览器发送JavaScript脚本包，JavaScript脚本包中包含浏览器界面布局信息和后续所有火山图的绘图脚本。
S2、数据加载：浏览器页面涉及火山图形或者用户主动选择火山图形后，浏览器将通过云端向服务器发送数据请求。服务器接收请求后，将对应数据发送给用户浏览器。
S3、图形初步渲染：浏览器基于火山图绘图数据和JavaScript脚本，使用Canvas绘图代码实现高效动态火山图视图渲染；
S4、图形参数调整与重新渲染：用户选择浏览器界面的交互式菜单栏中的火山图形参数选项。菜单信息将以参数的形式直接反馈给前端浏览器，被读入JavaScript脚本，继续使用Canvas绘图代码重新完成火山图形渲染。
S5、图形导出：用户在交互界面，点击选择SVG或者PNG输出火山图形后，浏览器将基于JavaScript脚本包中的Canvas转码脚本，将Canvas图形代码转化为SVG或者PNG图形代码，并另存SVG或者PNG图形到电脑本地文件夹。
具体地，S4 中，参数调整（图形参数选项）包括火山图形中的字体大小、字体选择、图形标题、X轴和Y轴标题、透明度、图形边框、图例、点的大小和点的颜色等。
具体地，S5中，下载的SVG或PNG格式图形，可自定义设置图形高度和宽度。
图3和图4为火山图参数调整及图形自定义下载界面展示。
实施例3
GWAS分析中的曼哈顿图和 QQ plot图
在全基因组关联研究（Genome-Wide Association Studies，GWAS）中，曼哈顿图和QQplot图（quantile-quantile plot，分位数-分位数图）可以把研究的形状显著相关的基因位点展示出来，其中曼哈顿图每个点代表一个SNP位点，可以将所有SNP位点数据展示出来；更进一步的，QQ plot图绘制所用数据与曼哈顿图一样，但所表达的信息更丰富，是GWAS分析中更加重要的质控图。但几百万个基因位点的数据挖掘和可视化展示受限于现有技术和业务模式，本发明可实现基因位点数据个性化挖掘和可视化展示，技术方案如下：
S1、JavaScript脚本加载：前端交互技术使用JavaScript。用户登陆曼哈顿图或QQplot图绘图页面网址后，浏览器向服务器发送请求。服务器接收请求后，向用户浏览器发送JavaScript脚本包，JavaScript脚本包中包含浏览器界面布局信息和后续所有曼哈顿图或QQ plot图的绘图脚本。
S2、数据加载：浏览器页面涉及曼哈顿图或QQ plot图形或者用户主动选择曼哈顿图或QQ plot图形后，浏览器将通过云端向服务器发送数据请求。服务器接收请求后，将对应数据发送给用户浏览器。
S3、图形初步渲染：浏览器基于曼哈顿图或QQ plot图绘图数据和JavaScript脚本，使用Canvas绘图代码实现高效动态曼哈顿图或QQ plot图视图渲染；
S4、图形参数调整与重新渲染：用户选择浏览器界面的交互式菜单栏中的曼哈顿图或QQ plot图形参数选项。菜单信息将以参数的形式直接反馈给前端浏览器，被读入JavaScript脚本，继续使用Canvas绘图代码重新完成曼哈顿图或QQ plot图形渲染。
S5、图形导出：用户在交互界面，点击选择SVG或者PNG输出曼哈顿图或QQ plot图形后，浏览器将基于JavaScript脚本包中的Canvas转码脚本，将Canvas图形代码转化为SVG或者PNG图形代码，并另存SVG或者PNG图形到电脑本地文件夹。
具体地，S4 中，参数调整（图形参数选项）包括曼哈顿图或QQ plot图形中的字体大小、字体选择、图形标题、X轴和Y轴标题、透明度、图形边框、图例、点的大小和点的颜色等。
具体地，S5中，下载的SVG或PNG格式图形，可自定义设置图形高度和宽度。
本发明前端交互使用JavaScript的技术，实现生物大数据的前端交互可视化，和图形的快速渲染；市面上此类图都是一张静态的图，本发明根据需要选择参数，快速筛选数据，同步生成图形，实现图结果动态化展示，能够有更多个性化的分析功能，呈现结果具有多样性；操作简单，用户友好，一键式实现参数选择和结果可视化展示，实现组学测序数据个性化分析。
以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。
Claims (5)
1.一种基因大数据前端可视化交互分析方法，其特征在于，包括如下步骤：
S1、JavaScript脚本加载：前端交互技术使用JavaScript；用户登陆某个页面网址后，浏览器向服务器发送请求；服务器接收请求后，向用户浏览器发送JavaScript脚本包，JavaScript脚本包中包含浏览器界面布局信息和后续所有的绘图脚本；
S2、数据加载：如果浏览器页面时涉及某个图形或者用户主动选择某个图形后，浏览器将通过云端向服务器发送数据请求；服务器接收请求后，将对应数据发送给用户浏览器；
S3、图形初步渲染：浏览器基于绘图数据和JavaScript脚本，使用Canvas绘图代码实现高效动态视图渲染；
S4、图形参数调整与重新渲染：用户选择浏览器界面的交互式菜单栏中的图形参数选项；菜单信息将以参数的形式直接反馈给前端浏览器，被读入JavaScript脚本，继续使用Canvas绘图代码重新完成图形渲染；
S5、图形导出：用户在交互界面，点击选择SVG或者PNG输出图形后，浏览器将基于JavaScript脚本包中的Canvas转码脚本，将Canvas图形代码转化为SVG或者PNG图形代码，并另存SVG或者PNG图形到电脑本地文件夹。
2.根据权利要求1所述的基因大数据前端可视化交互分析方法，其特征在于，可视化交互分析的图型包括t-sne图、散点图、曼哈顿图和QQ plot图。
3.根据权利要求2所述的基因大数据前端可视化交互分析方法，其特征在于，散点图为相关性系数散点图和火山图。
4.根据权利要求1所述的基因大数据前端可视化交互分析方法，其特征在于，S4 中，参数调整包括图形中的字体大小、字体选择、图形标题、X轴和Y轴标题、透明度、图形边框、图例、点的大小和点的颜色。
5.根据权利要求1所述的基因大数据前端可视化交互分析方法，其特征在于，S5中，下载的SVG或PNG格式图形，可自定义设置图形高度和宽度。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011154123.2A CN112015513B (zh) | 2020-10-26 | 一种基因大数据前端可视化交互分析方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011154123.2A CN112015513B (zh) | 2020-10-26 | 一种基因大数据前端可视化交互分析方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112015513A true CN112015513A (zh) | 2020-12-01 |
| CN112015513B CN112015513B (zh) | 2024-08-02 |
Family
ID=
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112883304A (zh) * | 2021-01-26 | 2021-06-01 | 北京高因科技有限公司 | 一种楼盘测评得分的可视化方法、装置、设备及介质 |
| CN115691681A (zh) * | 2022-10-26 | 2023-02-03 | 广州基迪奥生物科技有限公司 | 单细胞t-SNE图前端可视化方法、装置、设备及介质 |
| CN116643683A (zh) * | 2023-05-08 | 2023-08-25 | 深圳泌码科技有限公司 | 一种数据可视化的交互*** |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030009488A1 (en) * | 2001-05-22 | 2003-01-09 | Reuters America, Inc | System and method of accelerating delivery of dynamic web pages over a network |
| CN102012906A (zh) * | 2010-10-27 | 2011-04-13 | 南京聚社数字科技有限公司 | 基于SaaS架构的三维场景管理平台及编辑浏览方法 |
| US20170139404A1 (en) * | 2015-11-16 | 2017-05-18 | Rockwell Automation Technologies, Inc. | User interface widget modeling and placement |
| CN107465513A (zh) * | 2017-08-09 | 2017-12-12 | 西南大学 | 一种基于人脸识别的文件加密方法和*** |
| CN111596909A (zh) * | 2020-04-02 | 2020-08-28 | 珠海沙盒网络科技有限公司 | 一种可视化编辑树结构游戏逻辑的方法及介质 |
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030009488A1 (en) * | 2001-05-22 | 2003-01-09 | Reuters America, Inc | System and method of accelerating delivery of dynamic web pages over a network |
| CN102012906A (zh) * | 2010-10-27 | 2011-04-13 | 南京聚社数字科技有限公司 | 基于SaaS架构的三维场景管理平台及编辑浏览方法 |
| US20170139404A1 (en) * | 2015-11-16 | 2017-05-18 | Rockwell Automation Technologies, Inc. | User interface widget modeling and placement |
| CN107465513A (zh) * | 2017-08-09 | 2017-12-12 | 西南大学 | 一种基于人脸识别的文件加密方法和*** |
| CN111596909A (zh) * | 2020-04-02 | 2020-08-28 | 珠海沙盒网络科技有限公司 | 一种可视化编辑树结构游戏逻辑的方法及介质 |
Non-Patent Citations (3)
| Title |
|---|
| 温志超: "基于canvas的轨道交通可视化图形组件的设计与实现", 《电脑知识与技术》 * |
| 温志超: "基于canvas的轨道交通可视化图形组件的设计与实现", 《电脑知识与技术》, vol. 9, no. 31, 30 November 2013 (2013-11-30), pages 7019 - 7024 * |
| 鹿方凯 等: "基于HTML5技术的煤矿WebGIS移动智能终端设计", 《软件导刊》, vol. 17, no. 8, 30 June 2018 (2018-06-30), pages 216 - 222 * |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112883304A (zh) * | 2021-01-26 | 2021-06-01 | 北京高因科技有限公司 | 一种楼盘测评得分的可视化方法、装置、设备及介质 |
| CN115691681A (zh) * | 2022-10-26 | 2023-02-03 | 广州基迪奥生物科技有限公司 | 单细胞t-SNE图前端可视化方法、装置、设备及介质 |
| CN116643683A (zh) * | 2023-05-08 | 2023-08-25 | 深圳泌码科技有限公司 | 一种数据可视化的交互*** |
| CN116643683B (zh) * | 2023-05-08 | 2024-04-19 | 上海泌码生命科学有限公司 | 一种数据可视化的交互*** |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20080320386A1 (en) | Methods for optimizing the layout and printing of pages of Digital publications. | |
| US8539342B1 (en) | Read-order inference via content sorting | |
| US9620084B2 (en) | Method and apparatus of graphical object selection in a web browser | |
| US10534569B2 (en) | Systems and methods for providing variable data printing (VDP) using dynamic font downgrading | |
| CN101446938B (zh) | 生成表格的方法和处理装置 | |
| US9600447B2 (en) | Methods and systems for page layout using a virtual art director | |
| US6956574B1 (en) | Methods and apparatus for supporting and implementing computer based animation | |
| US20110055722A1 (en) | Data Visualization Environment with DataFlow Processing, Web, Collaboration, Advanced User Interfaces, and Spreadsheet Visualization | |
| US20100275161A1 (en) | Font Selector And Method For The Same | |
| US9262038B2 (en) | Method and system for referenced region manipulation | |
| US8922582B2 (en) | Text rendering and display using composite bitmap images | |
| CN111915705B (zh) | 图片可视化编辑方法、装置、设备和介质 | |
| US20020156813A1 (en) | Developing documents | |
| Pielawski et al. | TissUUmaps 3: Improvements in interactive visualization, exploration, and quality assessment of large-scale spatial omics data | |
| CN102460427A (zh) | 图像处理设备、图像处理方法和存储介质 | |
| US9159147B2 (en) | Method and apparatus for personalized handwriting avatar | |
| CN107967344B (zh) | 网页动画效果的实现方法、***、设备及存储介质 | |
| CN112015513A (zh) | 一种基因大数据前端可视化交互分析方法 | |
| CN112015513B (zh) | 一种基因大数据前端可视化交互分析方法 | |
| US8887073B2 (en) | Reshaping interfaces using content-preserving warps | |
| Joyce | Web based data visualisation applied to creative decision making in parametric structural design | |
| CN112001157B (zh) | 一种网页数据表格在线设计方法及装置 | |
| JP7490472B2 (ja) | 情報処理装置、情報処理方法およびプログラム | |
| CN111291302B (zh) | 一种快速创建活动页面的方法 | |
| JP6895698B1 (ja) | 作成支援装置およびプログラム |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant |