基于d3.js的数据可视化网站软件需求说明书¶
SRS of data visualization website based on d3.js¶
| Auther: | 袁世家 |
|---|---|
| StudentNumber: | 201739230123 |
| Email: | yuanshij@qq.com |
目录¶
更新日志
Note
2019年5月1日更新：
- 如果g1.json或g2.json中没有对应的info.json，那么相应的点以浅灰色绘制；
- 在缺少文件info.json的情况下，绘制浅灰色的点，而不是什么都不显示；
- 计算点的相关性系数和显著性检验（p-value）；
- 显示原点（0，0）。
引言¶
目的¶
本篇文档是关于分析json数据文件网页的软件需求说明书，描述了网站功能、环境，用户特征，功能需求等，为相关生物科研人员提供了便捷的可视化工具。
范围¶
该网站是一个用于分析给定json文件并进行可视化展示的应用。更具体地说，是用于展示两组基因（g1.json, g2.json）及其基因信息（info.json）的可视化网站，将三个文件的数据信息直观地提供给用户，以帮助他们进行相关的分析，方便完成科研任务。
1 概述¶
1.1 网站概述¶
1.1.1 项目介绍¶
该网站系统能够帮助科研人员进行直观的数据可视化。网页具体的内容包括：
- 可以正常打开的网页
- 用于上传文件的三个按钮入口
- 用于提交数据文件的提交按钮
- 进行数据可视化的脚本程序
- 给出最终结果页面的跳转网页
用户界面
- 一个上传g1.json 的按钮
- 用于上传g1.json
- 一个上传g2.json 的按钮
- 用于上传g2.json
- 一个上传info.json 的按钮
- 用于上传info.json
- 一个提交全部文件的按钮
- 用于提交文件
- 一个展示图表的结果页面
- 用于展示结果
1.1.2 项目环境介绍¶
- 本网站在内测阶段将在本地服务器运行，后期可申请域名网站，开放使用。本网站需要的计算机运行配置需求有：
- 至少 500mb 的运行内存
- 至少 1g hz 的处理器
- 至少 100 mb 的储存空间
- 可以链接互联网的计算机
- 支持较新javascript的浏览器
- 本网站将会使用开源项目d3.js，这是一个基于JavaScript 的函数库。
1.2 网站功能¶
本网站是一个为生物科研人员设计的，用于分析两组基因（g1, g2）相关系数的网页系统。用户将实验获得的三个json数据文件导入网站，经过网站后台处理，给出一张关于两组基因的二维散点图。该散点图将直观地展示两组不同颜色的基因在坐标轴上的分布。科研人员可以根据网页给出的散点图结果确定基因的相关系数，并进行下一步的研究。
网页样例
Note
具体效果以成品为准。
1.3 用户特征¶
网页使用者
网页的使用者主要是从事相关生物研究的科研人员，他们希望将自己得到的两组数据整理为直观的图表，以便快速得到结论，从而进行下一步的研究。
网页使用者应熟练掌握基本的计算机操作能力。
1.4 假设和依赖¶
- 本产品依赖于若干第三方软件、硬件，操作系统和开发环境。
- 第三方软件：
- d3.js : d3是在github上开源的JavaScript库，它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准，因而可以让程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时，它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作DOM。
- 第三方硬件：
- 终端：网络服务商提供的网站服务器，用于接受来自世界各地用户的浏览与访问，上传文件的储存空间，和用于处理数据的处理器。
- 客户端：用户自己的个人设备，用于访问网站，上传信息等。
- 操作系统：
- 终端：服务器操作系统，需要足够稳定且性能优良的环境。
- 客户端：个人操作系统。
- 开发环境：
- 操作系统：macOS
- 开发平台：node.js
- 集成开发环境：webstorm
1.5 待定¶
2 具体需求¶
2.1 功能需求¶
2.1.1 根据网址打开本网站主页面¶
- 需求[rq1]:
- 需要存在一个可供用户操作的网页，该页面应包含全部功能内容，是用户使用本产品的首要交互界面。
- 原因[ra1]:
- 一个基本的图形界面可以帮助科研人员更加专注于自己的研究，而无需花费更多成本学习命令行等其他内容。
- 测试样例[t1]:
- 申请一个域名，创建一个网址，将网站内容放在服务器。尝试打开该网址。
- 重要性：
- 高
2.1.2 上传按钮和提交按钮¶
- 需求[rq2]:
- 页面上放置三个上传按钮，用于加载本地json数据文件；一个提交按钮，用于将文件上传至服务器。
- 原因[ra2]:
- 用户需要一个入口，可以将自己的json数据文件加载并上传至服务器。
- 测试样例[t2]:
- 依次点击三个上传按钮，分别将对应的数据文件上传，查看是否上传成功。
- 重要性：
- 高
2.1.3 图表展示页面¶
- 需求[rq3]:
- 在一个新的页面上展示根据数据文件所得到的图表。
- 原因[ra3]:
- 用户在上传完成后，可以直接看到对应图表，这是本网站最主要的功能。
- 测试样例[t3]:
- 在确认文件上传成功后，点击提交按钮，看是否跳转至图片页面。
- 重要性：
- 高
2.1.4 用于返回主页面的按钮¶
- 需求[rq4]:
- 在图表页面的角落放置一个回到主页面的按钮。
- 原因[ra4]:
- 在得到一个图表后，用户可能需要再一次查看新的数据，重新回到上传文件页面。
- 测试样例[t4]:
- 在图表页面找到返回按钮，查看是否跳转到主页。
- 重要性：
- 低
2.1.5 数据文件格式不正确时报错¶
- 需求[rq5]:
- 在用户上传json数据文件后检查，发现格式或内容错误后报错，不跳转至新页面。
- 原因[ra5]:
- 对问题文件报错可以有效减少非必须工作量，同时帮助用户检查错误。
- 测试样例：
- 编辑若干个格式错误的json文件，尝试上传，查看是否报错。
- 重要性：
- 高
2.1.6 鼠标悬停显示信息¶
- 需求[rq]:
- 鼠标悬停时，某个点的具体信息可以显示出来。
- 原因[ra]:
- 用户希望在查看图表时，通过鼠标悬停查看散点图的具体信息。
- 测试样例：
- 在产生的图表中选择任意个点，将鼠标悬停点上，查看是否有信息显示。
- 重要性：
- 中
3 测试驱动(tdd)¶
本项目的开发过程采用了测试驱动的开发模式（test-driven development）。TDD的基本思路就是通过测试来推动整个开发的进行。在明确要开发某个功能后，首先思考如何对这个功能进行测试，并完成测试代码的编写，然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能，直到完全部功能的开发。
测试驱动开发的基本过程如下：
- 明确当前要完成的功能。可以记录成一个 TODO 列表。
- 快速完成针对此功能的测试用例编写。
- 测试代码编译不通过。
- 编写对应的功能代码。
- 测试通过。
- 对代码进行重构，并保证测试通过。
- 循环完成所有功能的开发。
4 设计约束¶
本项目在设计上有若干限制开发人员选择的内容。包括但不限于：标准符合性、硬件约束、技术限制。
- 硬件约束：
- 本项目提供的服务基于一系列的硬件设备，最主要的是云端服务器设备，该服务器决定了本网站的访问速度，上传速度和处理速度。服务器的优劣将直接决定网站的用户体验。因此，使用性能好的服务器，可以拥有更快的处理速度，更大的运行内存和储存内存。本网站适合选配选配计算密集型云服务器，例如，4核心的cpu,32g运行内存，2m宽带，40g存储内存。
- 技术限制：
- 处理用户上传的数据文件的速度将间接影响用户体验。因此，在以后的维护过程中，将视情况不断寻找并改进计算方法，提高处理速度。 此外，ui界面也将直接影响用户体验，在有余力的同时，设计优秀的ui界面将是首要任务。 在日后维护的过程中，对于接口、数据库、并行操作、通讯协议等方面的使用也将可能成为技术限制。
5 不可知事件以及处理方法¶
在实际的用户操作过程中，将会出现若干不符合操作规范的现象。
- 网络异常
- 当用户所在的网络环境较差时，将会给予提示：“网络环境差”，并停止上传操作，防止文件上传时损坏导致结果出错。
- 缺少数据文件：
- 当用户没有上传全部所需的数据文件时，网站将会提示“缺少文件”，而不会跳转至图表页面。
- 数据文件格式错误：
- 当用户上传文件结束后，后台将会检查数据文件是否格式正确，若错误，将会提示“格式错误”。
6 潜在的改进空间¶
- 一个优良的ui交互页面。
- 用户注册登录系统。
- 除去散点图外，可选择更丰富的图表类型。
- 对生成图表的操作，例如：放大、保存、分享等。
- 制作本地可执行文件，可以离线运行，适合没有网络连接用户的需求。
7 待确定问题¶
- 用户上传的数据文件是否有大小限制。