介绍
大概说说这个事情的前因后果吧。
去年下半年,我有机会参加了一个大型项目,在里面参与了前端可视化组建的开发,用的library是D3.js [2]。虽然3个月后我就结束了在这个项目里的工作,但后面断断续续也用D3做了一些别的实现。
而从几年前开始,我一直在做和healthcare相关的项目,主要就是做医疗数据的信息化,从而优化医疗领域的信息管理、决策支持。从项目的角度出发,我们的着眼点一般都是某个具体的问题,比如如何优化病人诊疗的流程。但从宏观上出发,如果能了解某个地区乃至全国的医疗服务情况是怎么样的,也是 非常有意义的 。
结合这两者,我就想做一件事情,将一些宏观的医疗服务数据通过可视化技术,更直观地表达出来。
原则
对于做这个事情,个人认为也有一些原则要遵守。首先,最基本的,医疗数据的来源要公开、权威。其次,最重要的,这样的可视化要体现医疗服务的特点,使得其在医疗领域能体现价值。当然,这不是一蹴而就的,而需要不断地在探索和实践中摸索。实践本身也是一个学习的过程。除了D3.js官网的API文档,主要的参考书就是Nick Qi Zhu的《D3.js数据可视化实战手册》[3]。由于本人较懒,后面很多实践也是在Nick的源码基础上直接修改所得。
数据来源
本着公开、权威的原则,找到了国家卫生和计划生育委员会统计信息中心[1]的统计数据。由于在这个阶段我的目标是验证医疗数据可视化的一个实现的流程,因此并没有花太多时间在数据的抓取上。通过简单的调研,发现其中全国医疗服务情况的数据还比较全面。而由于精力所限,最终选择了以下几类医疗卫生机构医疗服务量中的诊疗人次数,输出的是JSON格式文档。
- 机构合计
- 医院
- 三级医院
- 二级医院
- 一级医院
- 未定级医院
- 基层医疗卫生机构
- 医院
{
"医疗卫生机构合计": [
{
"date": "2013-05",
"value": 60005.2
},{
"date": "2013-06",
"value": 58861.9
},{
"date": "2013-07",
"value": 60264.2
},{
"date": "2013-08",
"value": 59519.3
},...
], ...
}
可视化选型
通过对数据的解读并结合之前的原则,我一开始的想法是想用D3图表表现全国不同医疗机构月均诊疗人次数随着时间的变化。也就是说,图表的横轴是时间,纵轴是诊疗人次数,而不同的医疗机构的数据能够出现在同一个图表中以便做对比。因此,我自然而然将线图(linechart)作为了第一选择。
D3实现
对于基本线图的实现,《D3.js数据可视化实战手册》中有很好的例子,也提供了源码,因此在整个coding过程中,比较多的时间花在了数据的处理上。本人使用的D3版本是3.5.5。源码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全国医疗卫生机构医疗服务量</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<script type="text/javascript" src="js/d3.min.js"></script>
</head>
<body>
<script type="text/javascript">
function lineChart() {
var _chart = {};
var _width = screen.width * 0.9, _height = 350,
_margins = {top: 30, left: 50, right: 30, bottom: 30},
_x, _y,
_data