人们常说,数据是新世界的货币,而 Web 则是新世界交易的外汇局。作为消费者,我们正在在数据中漫游;处处都是数据,从食品标签,到世界卫生组织组织的报告。其结果是,信息设计师在从数据流中呈现数据时愈发凸现窘境。
获得信息的最佳方式之一是,通过视觉化方式,快速抓住要点信息。另外,通过视觉化呈现数据,也揭示了令人惊奇的模式和观察结果,是不可能通过简单统计就能显而易见看到的模式和结论。
讲故事有很多种方式,但万事都源于构思。俗话说,一图胜千言。不过制作一张超酷的信息图,又是一件费时又费力的事。本文就整理了 20 个相应工具,应该能帮助您简化工作。
1
iCharts
iCharts can have interactive elements, and you can pull in data from Google Docs
iCharts 提供了一个用于创建并呈现引人注目图表的托管解决方案。有许多不同种类的图表可供选择,每种类型都完全可定制,以适合网站的颜色主题。iCharts 有交互元素,可以从 Google Doc、Excel 表单和其他来源中获取数据。iCharts 的免费版只允许你用基本的图表类型,如果基本图表类型无法满足需求,升级到付费用户吧。
2
Flot
Create animated visualisations with this jQuery plugin
Flot 是一个用于jQuery 的专业绘图库,有很多便捷的特性,最关键的是,跨浏览器。可把数据做成动画,因为它是一个jQuery插件,所以你完全可以控制动画、演示和用户交互的方方面面。
3
Raphaël
Raphaël是一个能够在网页上创建和操作矢量图形的JavaScript 库。它使用SVG&VML来创建图形。因为每个生成的图形都是一个DOM对象,所以可以通过JavaScript操作这些图形。
4
Modest Maps
Integrate and develop interactive maps within your site with this cool tool
Modest Maps是一个轻量级、简单、免费的地图工具(JS库),网页设计师和开发人员可轻松地把它整合到网站中。
5
Leaflet
Use OpenStreetMap data and integrate data visualisation in an HTML5/CSS3 wrapper
另外一个地图工具,支持 HTML5 和 CSS3 ,Leaflet 可以轻松使用 OpenStreetMap的数据,并且完全把交互可视化数据集成在一起。Leaflet的内核库很小,但是有很多插件能扩展其功能,比如:动态标记、masks 和热图,非常适用于需要显示地理位置的项目。麻雀虽小,五脏俱全。
6
Timeline
Timeline 是一个奇妙的小工具,坑绘制漂亮的交互式时间轴,用户滚动鼠标,时间轴会响应变化。点击时间轴上的元素,可显示更多信息。(MIT 开发)
7
Exhibit
和 Timeline 一样,Exhibit 也是 MIT 开发的,完全开源。借助 Exhibit ,用户可轻松做出交互地图,还有其他基于数据的可视化内容,比如国旗,名人的出生地。
8
Wolfram Alpha
Wolfram Alpha 是由Wolfram Research公司推出的一款在线自动问答系统。Wolfram Alpha这一款自动问答系统的特色是可以直接向用户返回答案,而不是像其它搜索引擎一样提供一系列可能含有用户所需答案的相关网页。
如果输入公开数据,比如一个函数,可以生成函数曲线(见上图)。另外,Wolfram Alpha 提供一个小挂件(Widget),可嵌入在你的网站上。
9
Visual.ly 是一个结合 gallery 和 信息图的生成器。它有一个简单的工具箱,用来展示数据信息,它也是一个分享作品的平台。
10
Visualize Free
Visualize Free 是一个托管工具,它允许你使用公用数据,或上传自己是数据,来做交互式的图片,以展示数据。可视化远超过了简单的图表,并且这个工具完全免费,不过它是用 Flash 输出结果,所以有些场景下用不了这个工具了。
11
Better World Flux
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 Visualize 是一个开源的图表插件,使用HTML Canvas 绘制多种不同类型的图表。这个插件有个重要的特性是支持ARIA。
13
jqPlot
如果你已经在使用jQuery,不想为HighCharts付费,而且情况很简单,不需要D3那样复杂的库,那么jqPlot是很好的选择。
14
Dipity
Dipity 可用来创建丰富的交互式时间线,并嵌入到网站中。
15
Many Eyes
Many Eyes是由IBM研究的视觉通讯实验室和IBM Cognos 软件集团于2007年所创建的一个在线可视化社区。通过这个社区,用户可以创建可视化作品,上传数据集,对其他用户所创建的可视化进行评论,或者分享,并可以对可视化作品加以评分。
Many Eyes允许用户快速从公开可用或已上次的数据集中完成可视化,并且有广泛的分析特性,比如:扫描文本,分析关键词的密度和饱和度。
16
D3.js
D3.js 是最流行的可视化库之一,它被很多其他的表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HMTL表格,或是利用它的流体过度和交互,用相似的数据创建惊人的SVG条形图。
17
JavaScript InfoVis Toolkit
JavaScript InfoVis Toolkit 是一个在 Web 上创建可交互式的数据图表 JS 库,同样包括了多种图表类型,并有漂亮的动画效果。虽然是免费工具,但建议有条件的童鞋捐赠作者。
18
jpGraph
如果需要在服务器端生成图表或图片,jpGraph 提供了一个基于 PHP 的解决方案,只需从数据库中取出相关数据,定义标题,图表类型,剩下的事就交给 jpGraph 了。它很多种图表类型(见上图)。非商业使用是免费。
19
Highcharts
Highcharts 是一个用纯JavaScript编写的一个图表库。能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,也有商业授权。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
20
Google Chart Tools
Google Chart Tools给网站数据可视化提供了一种完美方式。从简单的线图,Geo图、gauges(测量仪),到复杂的树图,Google Chart Tools提供了大量设计优良的图表工具。
评论区