财新: Empire Building 数据可视化开发总结

分享给朋友:

作者:任远,设计师,2013年10月入职财新,参与数据新闻与可视化实验室的工作,代表作品《三公消费龙虎榜》与《星空彩绘诺贝尔》。(原文地址:http://datanews.blog.caixin.com/?p=203

--

今天和大家分享一下《Empire Building》数据可视化项目的开发思路,整个过程如下:

一、分析新闻资料:

根据相关报道分析新闻事件中存在的信息和关系

1.人物有姓名、相关简介、分组三类信息
2.公司有名字、相关简介、类别三类信息
3.人物和人物之间有关系,关系分单向关系和双向关系两种,并且关系有种类之分
4.公司和公司之间有关系,关系分单向关系和双向关系两种,并且关系有种类之分
5.人物和公司之间有关系,只有单向关系一种,关系有种类之分

二、建立储存数据的方式:

经过对数据结构的研究和多种数据储存方式的尝试,最后使用了下面的方式来储存这种多重关系数据。

Empire-Building-01-700x466

这种储存方式比较直观、易于修改、方便扩展和程序读取。整个数据库共5个数据列表:人物数据、公司数据、人物和人物关系数据、公司和公司关系数据、人物和公司关系数据。关系中的方向用“>”和“=”来表示。“>”代表左父右子,“=”代表双向关系。

三、视觉编码:

给需要可视化的结构和关系进行视觉编码

1.人物分组 -》位置
2.公司类别 -》颜色
3.人物和人物关系种类 -》颜色
4.公司和公司关系种类 -》颜色
5.人物和公司关系种类 -》颜色
6.人物和人物关系方向 -》运动方向
7.公司和公司关系方向 -》运动方向

四、交互设计:

建立合理的元素布局和交互逻辑

1.鼠标滑过人物,显示人物的相关简介
2.鼠标滑过公司,显示公司的相关简介
3.鼠标点击人物,突出显示直接连接的其他人物和公司,并且显示公司的直接父级和所有的子级,和子级的子级…
4.鼠标点击公司,突出显示直接连接的人物和这些人物直接连接的其他人物,并且显示公司的直接父级和所有的子级,和子级的子级…
5.鼠标点击空白处,显示全部连接关系

五、程序开发:

整个项目是基于HTML5的Canvas技术开发的,没有用到其它第三方可视化库。基于原生Canvas开发许多功能都必须自己写代码实现,但是它带来的灵活性也非常让人享受。下面是开发前期做的UML图,在最终实现的时候有些差别:

Empire-Building-02-700x883

下面是几个技术点的具体实现思路:

1.在Canvas内绘制的元素不支持鼠标事件响应,所以需要自己写一个简单的鼠标事件框架来实现鼠标滑入、鼠标滑出、鼠标点击。具体思路是在交互对象类中定义一个可以监测鼠标是否在图形内部的方法,对于这个项目,没有涉及到特殊的图形结构,所以用矩形区域的方法来监测就可以满足需求。对于复杂的一些项目可以考虑用状态者模式实现鼠标事件框架。

2.大段英文文本在矩形区域内的自动换行,可以通过用空格来分割字符串,然后逐个绘制单词,并且计算每个单词的宽度,当累加宽度大于矩形边界时进行换行处理。

3.弧线上的动画,是通过把Beizer曲线用三次插值曲线的公式表示,再用坐标分量分别计算x、y在t时刻的值,从而计算出曲线上t时刻的对应坐标。如果在弧线上运动的不是原点而是方形,并且想让方形的角度沿着曲线改变,可以通过求曲线导数得出曲线t时刻切线的方向来实现。

另外,我觉得至少有一门底层语言和面向对象语言的开发经验,会对结构化和优化代码有很大的帮助。会了解更多的关于内存管理、数据结构、面向对象、设计模式等知识。从严禁的模式走过来才能很好的驾驭了松散、伪面向对象的javascript语言。尤其是对于图形编程来说。

中文版地址:http://datanews.caixin.com/2014/jindaoming/index.html

作者简介

数据新闻网

数据新闻网以引介全球范围内最顶尖的数据新闻实践为初衷,以推动数据开放及媒体革新为宗旨,面向中国的新闻从业者、媒体管理者、新传教育者以及对传媒感兴趣的设计师、程序员,提供线上信息平台与线下交流机会。