[转] 20个数据可视化工具

英文原文：creativebloq
编译：伯乐在线——黄利民
译文链接：http://blog.jobbole.com/36507/

人们常说，数据是新世界的货币，而 Web 则是新世界交易的外汇局。作为消费者，我们正在在数据中漫游；处处都是数据，从食品标签，到世界卫生组织组织的报告。其结果是，信息设计师在从数据流中呈现数据时愈发凸现窘境。

获得信息的最佳方式之一是，通过视觉化方式，快速抓住要点信息。另外，通过视觉化呈现数据，也揭示了令人惊奇的模式和观察结果，是不可能通过简单统计就能显而易见看到的模式和结论。正如作家、记者和信息设计师 David McCandless 在 TED 上说道：“通过视觉化，我们把信息变成了一道可用眼睛来探索的风景线，一种信息地图。当你在迷失在信息中时，信息地图非常实用。”

（伯乐在线补配视频：视觉化数据 David McCandless）

讲故事有很多种方式，但万事都源于构思。俗话说，一图胜千言。不过制作一张超酷的信息图，又是一件费时又费力的事。本文就整理了 20 个相应工具，应该能简化你的工作。

01. iCharts

iCharts can have interactive elements, and you can pull in data from Google Docs

iCharts 提供了一个用于创建并呈现引人注目图表的托管解决方案。有许多不同种类的图表可供选择，每种类型都完全可定制，以适合网站的颜色主题。iCharts 有交互元素，可以从 Google Doc、Excel 表单和其他来源中获取数据。iCharts 的免费版只允许你用基本的图表类型，如果基本图表类型无法满足需求，升级到付费用户吧。

02. Flot

Create animated visualisations with this jQuery plugin

Flot 是一个用于 jQuery 的专业绘图库，有很多便捷的特性，最关键的是，跨浏览器（包括 IE6 ）。可把数据做成动画，因为它是一个jQuery插件，所以你完全可以控制动画、演示和用户交互的方方面面。

03. Raphaël

This handy JavaScript library offers a range of data visualisation options

Raphaël 是一个能够在网页上创建和操作矢量图形的JavaScript 库。它使用SVG&VML来创建图形。因为每个生成的图形都是一个DOM对象，所以可以通过JavaScript操作这些图形。可千万 Raphaël 官网查看 Demo，

04. Modest Maps

Integrate and develop interactive maps within your site with this cool tool

Modest Maps 是一个轻量级、简单、免费的地图工具（ JS 库），网页设计师和开发人员可轻松地把它整合到网站中。

05. Leaflet

Use OpenStreetMap data and integrate data visualisation in an HTML5/CSS3 wrapper

另外一个地图工具，支持 HTML5 和 CSS3 ，Leaflet 可以轻松使用 OpenStreetMap 的数据，并且完全把交互可视化数据集成在一起。

Leaflet 的内核库很小，但是有很多插件能扩展其功能，比如：动态标记、masks 和热图，非常适用于需要显示地理位置的项目。麻雀虽小，五脏俱全。

06. Timeline

Timeline 是一个奇妙的小工具，坑绘制漂亮的交互式时间轴，用户滚动鼠标，时间轴会响应变化。点击时间轴上的元素，可显示更多信息。（MIT 开发）

07. Exhibit

和 Timeline 一样，Exhibit 也是 MIT 开发的，完全开源。借助 Exhibit ，用户可轻松做出交互地图，还有其他基于数据的可视化内容，比如国旗，名人的出生地。

08. WolframAlpha

Wolfram Alpha 是由Wolfram Research公司推出的一款在线自动问答系统。Wolfram Alpha这一款自动问答系统的特色是可以直接向用户返回答案，而不是像其它搜索引擎一样提供一系列可能含有用户所需答案的相关网页。

如果输入公开数据，比如一个函数，可以生成函数曲线（见上图）。另外，Wolfram Alpha 提供一个小挂件（Widget），可嵌入在你的网站上。

09. Visual.ly

Visual.ly 是一个结合 gallery 和信息图的生成器。它有一个简单的工具箱，用来展示数据信息，它也是一个分享作品的平台。这个网页有制作过程示例。

10. Visualize Free

Visualize Free 是一个托管工具，它允许你使用公用数据，或上传自己是数据，来做交互式的图片，以展示数据。可视化远超过了简单的图表，并且这个工具完全免费，不过它是用 Flash 输出结果，所以有些场景下用不了这个工具了。

Orientated towards making positive change to the world, Better World Flux has some lovely visualisations of some pretty depressing data. It would be very useful, for example, if you were writing an article about world poverty, child undernourishment or access to clean water. This tool doesn’t allow you to upload your own data, but does offer a rich interactive output.

（这个工具，在其官网试了多次，都测试不成功……）

12. jQuery Visualize

这个工具由 jQuery 的 ThemeRoller 和 jQuery UI 幕后团队开发制作。jQuery Visualize 是一个开源的图表插件，使用 HTML Canvas 绘制多种不同类型的图表。这个插件有个重要的特性是支持 ARIA。可从 Github 下载该插件。

13. jqPlot

如果你已经在使用jQuery，不想为HighCharts付费，而且情况很简单，不需要D3那样复杂的库，那么jqPlot是很好的选择。

14. Dipity

Dipity 可用来创建丰富的交互式时间线，并嵌入到网站中。有免费版和商用版。不多介绍，请访问 Dipity 官网（提示：请自备*）实际查看。

15. Many Eyes

Many Eyes是由IBM研究的视觉通讯实验室（�0�2Visual Communication Lab）和IBM Cognos 软件集团于2007年所创建的一个在线可视化社区。通过这个社区，用户可以创建可视化作品，上传数据集，对其他用户所创建的可视化进行评论，或者分享，并可以对可视化作品加以评分。

Many Eyes允许用户快速从公开可用或已上次的数据集中完成可视化，并且有广泛的分析特性，比如：扫描文本，分析关键词的密度和饱和度。

《视频：如何使用Many Eyes》

16. D3.js

D3.js 是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到DOM，然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HMTL表格，或是利用它的流体过度和交互，用相似的数据创建惊人的SVG条形图。

PS：《D3.js 应用代码案例集合》http://t.cn/zjIrNMp，比如这个案例 World Tour，按首字母顺序在地球仪上展现各个国家与地区：http://t.cn/zjfM10z。D3 用到了 SVG 技术，所以国内开发者在使用时要好好在 IE 下调试哦。

17. JavaScript InfoVis Toolkit

JavaScript InfoVis Toolkit 是一个在 Web 上创建可交互式的数据图表 JS 库，同样包括了多种图表类型，并有漂亮的动画效果。虽然是免费工具，但建议有条件的童鞋捐赠作者。

JIT 的作者是 Nicolas Belmonte，目前是 Twitter 的 Data Visualization Scientist，除了这个项目，他还写了PhiloGL 和 V8-GL。

18. jpGraph

如果需要在服务器端生成图表或图片，jpGraph 提供了一个基于 PHP 的解决方案，只需从数据库中取出相关数据，定义标题，图表类型，剩下的事就交给 jpGraph 了。它很多种图表类型（见上图）。非商业使用是免费。

19. Highcharts

Highcharts 是一个用纯JavaScript编写的一个图表库。能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用，也有商业授权。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

Highcharts 在现代浏览器中支持输出 SVG 格式，也支持在 IE 浏览器中 VML。

20. Google Charts

Google Chart Tools 给网站数据可视化提供了一种完美方式。从简单的线图， Geo 图、 gauges （测量仪），到复杂的树图，Google Chart Tools提供了大量设计优良的图表工具。

【非特殊说明，转载必须在正文中标注并保留原文链接、译文链接和译者等信息，谢谢合作！】

秒客网