现在的位置: 首页 > 综合 > 正文

信息可视化的例子 (visualization example)

2013年10月09日 ⁄ 综合 ⁄ 共 1947字 ⁄ 字号 评论关闭

最近在上信息可视化(Information Visualization) 这门课,对信息可视化有些自己的思考。

下面我写写个人的理解,及一些好的例子

什么是信息可视化?
个人大体感觉:就是画图,用一些图画去描述信息,把信息呈现在用户面前。我们多多少少都学过一点,中学数学教的直角坐标系,把一个个点A (3,2), B (5,6) 描在坐标系上,得出来的一幅画,那就是信息可视化的一种,而且是最基本的一种。
如果生活中的所有数据都像二维的点坐标,像A (3,2), B (5,6)那么简单,我们也不需要搞个“信息可视化”这样的故弄玄虚的术语出来了,直接把所有的数都描点得了。
可是,日常生活中的数据都是复杂的。举个例子,像一个网站,有很多的链接,光只会跟着链接走,你永远看不到一个整体的印象的。国外有人做了这个网站可视化,我觉得很不错:Website as Graphs

下面是一些作品摘抄,翻译和个人评价

以下是图标:

blue: for links (the A
tag) 蓝色表示链接

red: for tables (TABLE, TR and TD tags) 红色是表格
green: for the DIV tag  绿色是DIV标签
violet: for images (the IMG tag)  紫色是 图片
yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and
OPTION tags) 黄色是表单

orange: for linebreaks and blockquotes (BR, P, and
BLOCKQUOTE tags)  橙色是分行和引用

black: the HTML tag, the root node 黑色是HTML
的根结点

gray: all other tags 其他的标签

1. CNN门户网页的可视化

CNN has a complicated but typical tag structure of a portal: Lots of links, lots of images. Similar use of divs and tables for layouting purposes. (1316 tags)

cnn

图1: CNN.com的可视化

从上图中可以看到很多概览性的信息,像红色的表格,紫色的表单等。这个通过如此的可视化手段呈现出来,一目了然。

再来一个Apple 网站的例子:

apple.com

As always, simplicity rules at Apple's website. A few images and links, that's it. Note the large yellow cluster, representing a dropdown menu. (350 tags)

以简洁设计著称的苹果,连网站也不例外。从图上可以看出苹果网页的结点不多,很规整。中心结点一堆黄色的表单群,其实是一些下拉菜单。

apple

图2: apple.com的可视化

另外一个例子是MSN网站的可视化 (msn.com)

Surprisingly, at least to me, Microsoft's portal is very much div-driven. Also of note is it's very scarce use of images. (633 tags)

让人惊奇的是,MSN网站是用很多DIV标签作为驱动的,如图中大堆的绿点所示。而且这个网很少用图片(紫色的结点很少)。 这些信息不看概览图真的得不到直观的印象。

 msn

图3: msn.com的可视化

总结:

维基说:  Information visualization
focused on the creation of approaches for conveying abstract information in intuitive ways
信息可视化致力于把信息用直觉的方法表达出来。
visual data analysis, is the one that relies most on the cognitive skills of human analysts, and
allows the discovery of unstructured actionable i
nsights that are
limit
ed only by human imagination and creativity.

信息可视化本来是用作数据分析的一种手段,这种手段依赖于分析者的个人能力,在分析过程中信息可视化可能会让分析者有一些非结构化的发现,但这会受分析者的想象力和创造力所限。

PS. 更多的例子请看:

http://www.webdesignerdepot.com/2009/06/50-great-examples-of-data-visualization/

http://webdesignledger.com/inspiration/15-stunning-examples-of-data-visualization

抱歉!评论已关闭.