以用户为中心的设计 |
这是UCDChina提前预览网页留下的存档，不包括作者可能更新过的内容。 推荐您进入文章源地址阅读和发布评论：http://blog.xiqiao.info/2......009/09/25/480 |
||
|
原文Data Visualization: Modern Approaches 作者 Cameron Chapman 译者：西乔 深蓝色字体部分为译注 数据的表现形式可以是漂亮、优雅和描述性的。有许多种传统的表现数据的形式：比如表格、饼图柱状图等，在每个项目及可能的场合被频繁地使用。然而，为了更有效地向你的读者传达信息，有时你需要绝不仅仅是一张饼图。事实上，有更好的、深刻的、富于创造性以及绝对有趣的方法来可视化数据。它们中的许多将还在未来数年中变得应用普遍。 因此，我们期待的是什么？有哪些些革新性的想法已经在成熟使用？还有哪些创意地表现数据的方式是我们从未想过的？ 让我们看看最有趣和最现代的数据可视化方法，以及一些相关文章、资源和工具。 1. Mindmaps 概念图Trendmap 2007 （趋势地图 2007）Informationarchitects.jp 依据分类、相似性、成功度、知名度和前景，为现在互联网上最成功的200个网站制作了一张趋势地图。显然，这些网站以前从未以这种方式建立过联系。相当详尽。 （这是一个著名的数据可视化创意，作者通过改造东京地铁地图，将站点设计成地铁站，每种网站应用类型是一条地铁线。比如粉红色代表分享类网站，紫红色代表工具类，大红色代表技术网站，柠檬黄色代表知识类网站……当然如果你对东京的城市地理状况有所了解，看这张地图时会露出更多会心的微笑。设计师在图中安排了大量暗喻和巧合，比如google从涩谷移到了新宿的位置，而Youtube已经控制了涩谷地区。涩谷在通常理解中，代表年轻人出没的喧嚷的地方。而新宿代表黑社 会控制，很酷的地方。微软移到了池袋，雅虎移到了上野，维基百科在新桥（一个遍布头脑清醒上班族的地方）。日本的网站主要集中在金融路线附近，北部的站点 线（山口线）上的项目多数比较“无聊”。等等）
2. Displaying News 新闻展示Newsmap（新闻地图）是一个根据google新闻聚合器上实时的新闻反馈的可视化呈现。数据块的大小对应了新闻受欢迎的程度。 （Newsmap反 映的是google新闻聚合器实时更新的新闻。这种数据可视图基于treemap树状图的算法，适合表现大量信息的聚合。用颜色、颜色深度、标题字号、区 块面积来展现归并后的信息。打破空间限制，帮助用户快速识别、分类和认知新闻信息、平面而直观地展现不断变化的信息片段。）
Voyage是一个rss阅读器。它在中心区域现实的最新更新的新闻。新闻可以缩放和退出，导航有可能是一条时间轴。 （Voyage根据当前时间点形成一条坐标轴，使用了三维效果来分层次展现当前的资讯和新闻点，将信息的时间要素呈现地非常生动。可通过rss地址订制信息来源。）
Digg BigSpy 将最受欢迎的文章放在顶部，字号越大代表支持者越多。 （digglab用5种动态的数据可视化方式来表现信息的数据变化状态。Digg BigSpy是试验项目其中之一，最新被digg的新闻会向下滚动更新屏幕，标题的字号和digg数关联。在版面中使用字号变化是传统媒体的表现手段，在这里和实时滚动的效果结合，很有冲击力。）
Digg Stack:根据用户的digg数将文章排列成许多柱状条，digg数越高，柱型越高。 （Digg Stack同 样也是digg lab的实验性项目之一，将最新/最热/全部的100条digg文章排列成一行柱状图，水平线上的柱形高度代表digg数，水平线下的柱形高度代表评论 数。某篇文章digg数实时增加时，会从屏幕上方掉一个小方块下来，俄罗斯方块那样，溶进该新闻对应的柱形中。点击单个柱体可以分别查看每个时间区间内的 digg指数。这是一个非常有实时感和动感的视觉系统，极好地呈现了数据生成的实时性和聚合性。）
3. Displaying Data 展示数据Amaztype 图书搜索，根据从亚马逊上采集的数据，将搜索结果图书根据你所提供的关键字的字母形状进行排列。想知道一本书的更多信息，只需点击即可。
Flickrtime 也应用了相似的创意。这个工具利用Flickr API 将上传的图片根据当前时间排列成时钟数字的形状。
Time Magazine（时代周刊）使用峰值形状的分布来强调地图上美国人口的稠密程度。
CrazyEgg 使用热图来让您研究您的访客的新闻，通常被点击较多，较受欢迎的区域，使用的更 “温暖”的红色来高亮显示。 （CrazyEgg允许注册用户通过提交页面url，显示页面的热点图、获取每个元素的详情、查看原始数据的完整摘要信息。热图是用户行为分析的常见方法，这是一个著名的UE研究分析工具，给UE分析师提供观察用户行为，做出设计改进意见的数据基础。）
Hans Rosling TED Talk （汉斯。罗斯林的TED演讲）瑞典著名教授Hans Rosling发表了一次传统期的演讲，解释了他提出的表现统计数据的新方法。他的趋势分析软件（刚刚被google收购）将复杂的全球趋势、十几年的流行数据转化为生动的动画。用网格上的多彩的泡泡代表亚洲的各个国家，展现全民医疗和财富的状况。用动态的钟型曲线表现国民收入分配的涨伏。在 Rosling的手里，全球趋势——预期寿命、儿童死亡率、贫困率——都变得清晰、直观和有趣。
三视图展示了地球的3个视点： 每个国家使用一个圆形代表，用圆圈的大小来代表军费开支额度，颜色的深度来代表占财政收入的比例，数据的演示非常紧凑和美观。
We Feel Fine（我们感觉很好）根据来自大量blog的统计结果，表现了人类的感情。 （这是一个骇人的项目。。从2005年8月，该项目组从大量页面上记录人类的感情。每个几分钟，系统就会搜索世界上新近发布的blog里包含“我 觉得”或“我的感觉”这类短语的文章，记录包含这些短语的句子，并计算出里面所包含的情绪，是悲伤、快乐、沮丧。这些信息和作者的社会结构、年龄、性别、 地理位置以及当时当地的天气一起被保留下来。这个包含了数百万人感情的数据库，每天新增15000~2000条记录，并提供了一系列有趣的接口用于查询和做数据挖掘。上图中的粒子系统是通过接口生成的可视化形式之一，抽取了1500条数据，每条数据是一个粒子，代表每个人的一种情绪。颜色对应情绪类型，比如幸福是亮黄色，悲伤是深蓝色，愤怒是红色，平静的感情是浅绿色。每个粒子的大小和表达情绪的语句的长度关联。）
Visualizing the Power Struggle in Wikipedia（维基百科上：可视化的争议）在热力地图上展示了最受欢迎的文章和被搜索最频繁的请求。 （疑原文有误。heatmap：热力型地图，做用户体验分析的同学可能比较熟悉，是一种使用冷暖色来映射二维变量，以便于做出聚类分析的图像，擅长用于体现频率、密度等。但是下面这两张信息图形使用的是气泡型地图。反映的是wiki百科中争议性词条的修订次数。圆圈越大，修订次数越多。排名前几位的是：耶稣、阿道夫希特勒、2003年10月、任天堂革命、卡特里娜飓风……）
Websites as graphs 图表网站。一个HTML DOM的可视化应用程序，根据url、表格、div标签、图片、表单和其他标签，将网站可视化为信息图形。 （这是一个分析页面源码的项目，使用树状分支图。其中蓝色代表，红色代表类标签，绿色代 表
于是每个网站页面的特性就以这样一种奇特的图像方式呈 现出来了，从不同的结果图像中可以看出每个网站的不同性格比如门户网站会生成非常庞大的树状图；某些blog，主要是链接，会形成放射型图像。苹果网站 生成的图形就很简洁和规整。google.com就更不用说了，只有非常少的几簇。猜猜下图代表的是哪个网站？yahoo.com。你可以发现它的图里面没什么绿色，但有许多红色。。因为他们没有使用div布局，这在07年也是很罕见的了。）
Interactive History Timeline （互动历史年表）将英国的历史划分为可交互的块状数据，同时呈现了历史时间的密度。 （这个系统里每个颜色块代表一段历史时期，白点代表该时期中的历史大事件。每个色块可放大点击，背景图上有该历史时期的标志性图像，可点击每个白点查看事件信息。是一个不错的历史演示系统，设计雅致，操作感很强，形式和内容很匹配。）
Winning Lotto Numbers （乐透大奖号码）该图展示了每年的中奖号码中每个数字的出现频率。当然这张图并不算是一个很清晰的案例。 （这张图描绘了乐透奖号码在88~06年里出现的频率。每种颜色代表一个球，编号从1~49。作者认为所有的数字集群倾向于形成一个循环，会有12.24%的重复率。。。）
Elastic Lists （滑动菜单）使用滑动菜单（也叫手风琴菜单）的原理来展现多维的数据结构。每组菜单代表一种数据维度，每个菜单项代表一种属性。你可以通过点选多个菜单项，浏览数据在不同维度不同属性上的组合。每个菜单项的高度和宽度和该属性内数据总量的相对比例有关联。作者的blog 会更新一些关于数据可视化领域的实验性研究的文章，值得观赏，很有收藏价值。 （这个项目对于实现多维交叉的数据的平面化展现，是一个很好的范例。每个菜单实际上充当了一个过滤器，把他们想象成一组多选菜单就好了。但是形式比乏味的多选框要迷人多了。）
The JFK Assassination Timeline（肯尼迪遇刺事件的时间轴）使用ajax来可视化表现历史事件：约翰.肯尼迪的遇刺和时间轴上众多关联性条件。更新的案例的相关文章。 4. Displaying connections 显示关联Munterbund 使用信息图形展现了书中文字的相似性。“我们尝试创造一个能够按照某些定义好的规则来自动生成图像的系统。难度在于图像形式和文章的排版样式 这两者都是极富吸引力和信息量的。” （这个项目根据词频等信息要素关联到扇形区域的直径和弧度，以及控制气泡的面积。有一套非常复杂的筛选算法。在可以看到项目组尝试过的多种可视化算法，以及一批十分魅力的成品）
Burst Labs（突发实验室）使用泡泡图来表现你提出的搜索请求之间的相似和关联性。虽然不那么前卫但还是令人振奋。
Universe DayLife 将某一话题关联的事件、人物和新闻事件像星座那样陈列在它的周围。 （这也算一个令人惊异的项目，创作团队模拟了一个数字化星空，每个关键字都是一个星座。通过输入关键字将你请求查询的星座定位在屏幕中心，旁边围 绕着相关的关键字星座。内容包括图片、新闻、人物。每时每刻地球上都会发生各种事件，事件之间有关联，会互相作用。从这点上，使用宇宙星系来表现新闻事件 的特效是很适合的。这个项目除了极富想象力，界面上也极具特色。创作了一种星座字体，所有的ICON和边框都用星座的形象来表现。）
Musiclens 会根据你当前的心情和音乐喜好制作图表，给你推荐音乐。
你可以在Figd’t Visualizer（Figd’t展台）上和网络上的其它用户进行互动。你的用户界面是由Flickr和LastFM上的TAG构成的，使用任何Tag都可以创建一个磁极，在照片或音乐中和你共用这个tag的用户会被吸引到磁极的周围。兼容Mac OS X，Windows和Linux平台。测试版本。 （通过照片和音乐喜好，创作者希望动态、可视化地表现人与人之间的关系：倾向性，趋势，聚合，吸引力。除了直线条的连接线，作者还在另一张图中使用了优美的曲线，整体造型非常迷人。）
What have I been listening to?:（究竟我在听什么？）拜伦.李通过创建直方图描述了他的音乐之旅。 （每种颜色代表一个歌手，拜伦.李搜集了他在last.fm上18个月来的听歌记录。创作者选用这种可视化形式原因是它的失真最少，能生成高雅的非对称曲线。这种的图表形式被称为Stream Graph流图。）
Shape Of Song（音乐的形状）音乐看起来像什么？音乐的形状是一个看起来很怪诞的命题。这款定制软件使用半透明的拱形来描述了音乐的形状，让人们能看到存在于互联网上的任意音乐的真实形状。 （该项目用这种图像可视化了许多音乐类型和乐曲，直观地将节奏、韵律和起伏展现出来。每种音乐风格的个性与差异在这里表现地很明显。这类数据可视化方式真正实现了“通感”。）
Musicmap（音乐地图）:他们创建了一个页面，通过连接线表现音乐之间的关联。
Musicovery 展现了不同音乐喜好之间的关联性，让你在听一首音乐的时候发现相似风格的歌曲。 (和潘多拉或last.fm一样推荐试听网站，会根据你的喜好选择，为你推荐音乐。同时可视化音乐之间的关系。）
Lanuage Poster （语言海报）使用传统的时间轴方式来表现程序语言的发展史，证明简单的线条也够用啦。 (O’REILLY出版社制作的海报，每根箭头线代表一种语言的发展历程，同时反映了语言之间的继承或分支关系。）
5. Displaying web-sites 可看的网站Spacetime （时空)公司承诺，那些通过网页的小缩略图像挖矿一样查找信息的时代一去不返了。它提供的服务易读和优雅的三维特效来呈现你的搜索请求结果，支持google 、yahoo、Flickr 、eBay 、google图片搜索。
UBrowser 是一个使用开源的概念模型。Mozilla的渲染引擎Gecko的植入实例：使用OpenGL在几何面上动态渲染页面，。
6. Articles & Resources 文章和资源该项目介绍了数据可视化最美丽的方法和进一步的参考资料。拥有超过450项的图片。 在他的文章《Infosthetics: 数据可视化之美》中，Andrew Vande Moere通过他的知名blog《Infosthetics》探讨了数据可视化的审美及领域中的前沿应用。创意设计意图的组合形式、内涵以及迷人的案例。这是下一代的新艺术领域？
这篇文章介绍了13种新的数据可视化技术的实例以及深入的参考。
7. Tools and Services 工具和服务
这是一个基于JAVA的可视化数据在线服务。帮助注册用户创建饼图、框图、树型图、柱状图和直方图。这有一些比较惊人的案例。
|
