数据可视化“实践”案例集萃

发布于 作者:

前两篇文章我介绍了商业案例集萃和学术案例集萃，这些案例虽好，但在编程实践层面，恐怕一时无法下手。故而本文介绍一些“实践”案例，主要跟实际编程、设计有关，这些demo相对较为简单，易于模仿，可以学习和借鉴。

1. D3.js 案例集合

D3js这个基于SVG的数据驱动绘图类库如今已经成为数据可视化领域的jquery一般通用的类库。关于d3js的学习可以参考本博客的D3js系列文章。通常，我们使用D3js的过程是，先到案例网站上找类似的demo，然后对着API文档修改成自己设计的样子。偶尔也会自己创作一些，但也少不了看几十个别人的例子。那么本文就讲讲到哪里去找demo:

  • github上的D3项目gallery,  这个gallery与d3项目本身放在一起，里面demo有很多，并且进行了分类，易于参看。此外，请特别注意一下该页面最下面的Collection, Useful snippets、Tools、Products和Libraries, 里面包含很多有D3的扩展等有意思的内容。
  • http://bl.ocks.org/mbostock，在线案例集合，比github上的gallery案例还要多得多。不过由于案例太多，每次打开都需要等一段时间才能显示足够多的案例。另外，由于案例没有分类，所以检索起来比较麻烦。通常我们用ctrl +F 使用英文关键词进行搜索。
  • http://bost.ocks.org/mike/，D3.js的发明者Mike Mobstock博士的个人站点。从上面你也可以看到大量的案例。与很多其他类库不同，D3js一开始就带有学术性质，为了更好地实现可视化设计而开发。在这个网站上我们可可以看到D3.js发表时在IEEE infoVis 2011上的论文D3: Data-Driven Documents。
  • 超过2000个D3js例子索引，这个网站的优点是你可以按照demo的名字进行搜索，缺点是没有配图。

2. Visual Complexity

这个网站收集了1000个可视化案例。如网站的名称所示，它这里的例子大都是比较复杂的案例，而且实现方法各异。但在设计案例的时候，该网站按解决问题的领域的分类方式和稳定的链接让我们有了更多可以参考的案例。

3.百度开源可视化插件echart

说实话，百度EFE前端团队的echart名气已经大到我懒得介绍了。该项目的主要技术负责人林峰和祖明我也略知一二。可以说现在echart是国内最好的快速生成统计图套件，甚至应该说是国际一流的。与之类似的国外软件如highchart等，在很多功能上都不如echart了。而且echart的野心不止于此，它基于webGL的Xchart计划echart 3.0计划要将其打造成最强商业级数据图表。和且不说百度内部大量使用echart，很多其他公司也在拿echart做二次开发。对此我表示我不能跟别人撞脸了，想看看还有什么其他类库的童鞋请看这里。

4. DATAVISUALIZATION.CH

该网站的运营者是瑞士的 Interactive Things工设计和技术工作室，同时他们还在Twitter上注册了@datavis的帐号。这个网站既然名字敢起data visualization，那必然是有两把刷子的。

该网站集中了大量数据可视化案例(cases)，业界新闻(events)，工具(tools)和数据集(datasets)。比如我截图中的这个Riots in England案例介绍文章，被收录在Datavisulization.ch网站的cases目录下，是the guardian网站非常成功的数据新闻案例之一。这个用flash做的时序新闻数据可视化模版interactive timeline，还做过阿拉伯之春、摇滚音乐的发展史等等案例，代表了数据新闻领域的国际先进水平。（不过要查看原案例需要翻墙）。

又比如这个selected tools, 该文章收录在Datavisulization.ch网站的tools目录下，集合了市面上各种可视化库和工具包，分为Maps\charts\data\color四大类，包含了procssing.js, gephi, polymaps,  protovis, timeline.js, leaflet等知名可视化工具的介绍和链接。想找工具的童鞋来这里一定没错。

5. coolinfographics.com

这个网站在信息可视化领域该网站可以说是顶级的blog。其作者Randy Krum本身就是一线的设计师，开办了infoNewt公司，主打商业智能可视化（visualizing Business Intellgence）。他经营这个博客的目标是网罗报纸、杂志和网络上最好的可视化案例到这个网站上来。

坦白说这个网站跟datavisualization.ch非常类似。该博客上工作推荐（主要面向信息可视化领域设计师）、工具推荐（包含各种在线可视化工具链接、软件链接、编程用类库链接、数据源连接等等）栏目都是很收欢迎的内容。

6. UEDfan

UED，是User Enterface Design，跟可视化有千丝万缕的联系。可视化领域的权威，本施耐德曼教授就是搞人机交互的，写了好几本界面设计专著。所以搞可视化设计，多少还是要那么一点点设计的灵感才能做得更好。而这个UEDfan，可以说是国内最好的UED综合类网站，包含酷站索引、体验研究、数据研究、前段开发、团队推荐、书籍推荐。不论是搞可视化研究还是前端开发还是界面设计，都可以看一下。

不过坦白说，UI设计相关的资源是非常丰富的很容易看昏了头，而设计功底的锻炼又是个长功夫，所以这里就不深入了。