数据可视化信息可视化

,紫色代表黄色代表数据集群（下拉菜单）…………。于是每个网 站页面的特性就以这样一种奇特的图像方式呈现出来了，从不同的结果图像中可以看出每个 网站的不同性格，比如门户网站会生成非常庞大的树状图；某些 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 文章和资源 Visualcomplexity.com 该项目介绍了数据可视化最美丽的方法和进一步的参考资料。拥有超过 450辑的图片。在他 的文章《 Infosthetics: 数据可视化之美》中，Andrew Vande Moere 通过他的知名 blog 《Infosthetics》探讨了数据可视化的审美及领域中的前沿应用。创意设计意图的组合形式、 内涵以及迷人的案例。这是下一代的新艺术领域？ 这篇文章介绍了 13种新的数据可视化技术的实例以及深入的参考。 16 Awesome Data Visualization Tools16种令人敬畏的数据可视化工具 。Mashable.com概述了： “我们找到了下面 16个观赏和实用性兼具的应用。数字可视化工具改变了我们观察事物的途 径：观察 twitter信息来源在全球的分布的全新方法。 ” Dataesthetics（数据美学）Eric Blue 介绍了一些数字可视化的非常见形式。 infosthetics – information aesthetics（infosthetics——信息审美）Andrew Vande Moer关于数字 可视化的最新观点和创意想法。 Delicious聚合的可视化讨论了如何将 Del.icio.us上收藏的标签可视化 Periodic Table（周期元素表）.周期元素表的可视化方法。 7. Tools and Services 工具和服务 你可以使用 Xtimeline和 Circavie创建你自己的时间线 IBM Many Eyes（IBM之眼） 这是一个基于 JAVA 的可视化数据在线服务。帮助注册用户创建饼图、框图、树型图、柱状 图和直方图。这有一些比较惊人的案例。 prefuse | the prefuse visualization toolkit （prefuse可视化工具包） 集成了数据可视化方法的工具包，基于 JAVA的测试版本。 Swivel （旋转） 可制作飞行中的饼图、见图和直方图的服务。同时还提供可用于优化现行的可视化方式的 API插件。 你可以在文章《Charts and Diagrams Tools 饼图和直方图工具》里找到更多工具来设计你要 的图表。 九 25 （二）数据可视化和信息可视化可视化 数据可视化和信息可视化的主要目的是借助图形化手段，更高效和清晰地交流信息。但这并 不意味着数据图表会因实用而枯燥，因华美而繁复。为了让思想能有效地传递，良好的外观 和内在功能性都缺一不可。虽然设计师们还是不能很好地把握设计与功能之间的平衡，而创 造出华而不实的数据可视化形式，无法实现其传播信息的主要目的。 在印刷品和 web上，被可视化的信息、数据或知识——数据图表，经常用于依靠设计师的创 造力，在刺激和感性的背景下支持和强化信息， 下列的网站列举了一些令人瞩目的的数据图表, 它们以极富视觉吸引力的方式有效地表现 了信息。 Country Codes of the World（国家代码世界） 国家代码世界地图映射了 245个国家顶级域名代码，包括所有国家、联合国、众多岛屿及地 区。每个两位代码对应到所指国家的地理位置及区域，并使用了便于快速检索的分色图例。 Flags as Infographics（国旗图表） 这些招贴是为著名的政治杂志“Reportagem”所设计的，主要设计思想是通过添加图例把每个 国家的国旗变成了一张图表。比如：美国。红色部分：支持伊拉克战争。白色部分：反对伊 拉克战争。蓝色部分：不知道伊拉克在哪。 Independent: Infographic （独立：信息图形） 中东：谁支持立即停火？ 下列这张图表在 2007七月的中东危机问题时期发表于“独立”杂志 头版。 Virtual countries（虚拟国度） 这个看台以国家和巨头公司的“国民”生产总值为依据，列出世界上这些“虚拟国度”的排名。 Net Neutrality（网络中立） 这张图表期望于强调网络中立的重要性。这并不是一张真正意义上的数据图表，但传递了这 些信息：这些就是我们可能遭遇的未来。 译注：（这是 07年的图，由此可见，对互联网发表预测是一件多哇哈哈哈哈的事。） Corporate connections:（企业关系） 一个非常紧凑和实用的信息来源 译注：3个名人，35个企业，40多家子公司和 300多个品牌的之间的千丝万缕。 DIZZIA, Gregory M. 这张图表里描述了 Gregory Dizzia所泡过的所有MM及其关系。时间轴持续 23年。 译注：（有兴趣的同学可以下载这张图看一下.pdf。作者真的很猛。垂直的是时间轴，每一 列代表一个MM，长度代表交往时间。每个图表表示事件或特性。绿色图标代表认识的途径： 聚会、网络等。蓝色图标 MM 吸引他的地方：身材、头脑等。黄色图表代表关系深入度： kiss或者 XXOO。橙色代表重大事件：订婚、心碎、来路不明的孩子……。红色代表分手的导 火线。每一列底部的蓝色从浅到深代表了关系亲密程度。） Amadana Infographics Amadana是一家日本公司，这可以解释为什么他们会分不清 scapegoat替罪羊和 acuarium水 族缸（见第一行的第二个图示）。第一行的电器是土司机，第二和第三行是空气净化器，最 后一行的是电磁炉。 The Japanese Wii Safety Manual（日本WII游戏机的安全指南） 这份日本WII游戏机的安全指南，基本上能解释日本人普遍的精神错乱。 译注：（作者貌似不太喜欢日本人。。。不过点击下图有更多变态的安全指南图片供君欣赏） Virtual Water虚拟水 简洁、优雅、有效。这份双面印刷海报表现了产品和国家中水的使用足迹。 译注：（点击图片可以查看这项环保海报的更多信息，设计非常专业。海报有两面，一面是 重要国家地区中虚拟水的进出口统计，另一面是一些商品和食品在生产链各个步骤中使用的 淡水量总和的统计。） Apple’s Tipping Point: Macs For The Masses（苹果的引爆点:大众的苹果） 设计很淡定，配色柔和，背景鲜明。设计者是 Paul Nixon AT&T/Bell System Pre- & Post-Divestiture Chart （AT&T/贝尔系统前后分离图） Peter Ross.1985年创作。 Flickr User Model（Flickr的用户模型） 一个数据有点复杂的信息图形，但仍然保持了清晰和良好的展示性。 Journey into the Universe (宇宙之旅) 信息设计， 创作于 1985. Megan Jaegerman（人名） Megan Jaegerman和 Edward Tufte一起工作时的一些回顾。留意这些图表中所体现出的简洁 之美和高度的可读性。 译注：（她的网站里有不少非常优秀的插图，值得点击一看 Edward Tufte ：信息设计的先驱者。耶鲁大学统计学和政治学的退休教授。奠定了视觉化定 量信息的基础。出版了包括“视觉解释”，“构想信息”，“定量信息的视觉展示”，和“数据分析 的政治和政策”，“美丽的证据”在内的一系列书籍，最新的“美丽的证据”获商业周刊 2006年 最革新的设计书籍赞誉。） Good Magazine Infographics（好杂志中的信息图形） 在Good magazine的每一个议题里，都会提供杰出的，关系到我们生活方方面面的信息图形。 下面有一些优秀的范例。 译注：告诉我更多：那里即将发生什么？（关于达富尔的社会政治现状） 译注：女性的力量。女性在世界人口中的 50%，政治领袖中女性却只占 5%。 译注：冷酷的时间：自从美国在 1976 年恢复死刑，有 118 名死囚被证明无罪。 这 118 人 共被监禁 1125年。图像的力量啊 译注：零售业房地产：世界上最大的零售商的占地总面积比曼哈顿还大。 译注：美国膨胀的学生债务。达到 4920亿。 Who Participates and what people are doing online（人们在互联网上做什么） 一个比较别出心裁的表现形式会赋予图表独特性和吸引力。。 译注：各个年龄段和性别的人在不同类型的在线应用上花费的时间 The Cost of Living on the Bleeding Edge of Gadgetry（电子产品深度患者的开销） 价格和便携式电子产品在过去 50年的价格和市场占有率。由 Arno Ghelfi设计。从一个完全 不同的视角表现。 译注：每种颜色代表一种电子产品类型。柱状图的高度代表价格。宽度代表市场占有率。 A year in Iraq（在伊拉克的一年) 一份不同寻常的数据图表，展现了 2592起记录在案的致死原因的类型和分布地点。 Cubism and Abstract Art（立体主义和抽象艺术） 简洁、丰富和优雅。Alfred Barr的设计，在 Edward Tufte的书里可以找到。 译注：连接线和因果箭头 巴尔艺术图 费曼图 进化树状图 隆巴迪 MyMap（我的地图） 一个数据可视化的应用程序：基于 60000封电子邮件存档数据，用不同颜色深度的线条呈现 了地址簿中用户和个体之间的关系，比如回复、发送、抄送。“My Map”允许在不同的关系 组和时间段里挖掘信息，体现不同关系中短暂衰退和流向。“My Map”从而成为名副其实的 自画像、个人关系及社交的可视化反映。 译注：外围的每个圈代表一个人，他们之间的线条代表联系，越高亮的颜色代表交流的频率 越高。 When Bots Attack（机器人来袭） 借助僵尸网络，你可以针对某个目标启动几十万甚至上百位次轰炸。在这种假设的情况下， 由中国发起的针对美国的单个攻击可能只持续几个小时，但持续数天或数周的全面攻击会导 致整个现代信息经济的瘫痪。下图用于说明这件事。 译注：绿色点：攻击。蓝色点：黑客。白色点：肉鸡。红色点：目标。 美国拟提高中国进口商品关税的条款引发了危机。北京下令对美国国会的计算机系统和支持 该法案的公司进行限制性攻击。中国的安全部门官员雇用非法的 黑客联盟发动 ddos攻击。 通过像 PayPal这样的匿名服务（通常使用在拉美地区的帐户）支付报酬。目标 IP地址和邮 件帐户（在更早就完成了搜集工作） 通过非法黑客的私人聊天室进行分发。一旦攻击进行， 中国的媒体和外交部门将此次攻击描述为是黑客们的自发行为。 Mapping the Blogosphere （博客世界的映射） 这就是博客世界看起来的样子。。。 Globalization（全球化） 怎样的全球化? 译注：（每种颜色的扇形区域代表一个洲的国家。中间的连线描述了这些国家之间的贸易经 济往来） George W. Bush Speech Infographics (乔治.布什的演讲） 一种交互式的信息图形，比较了不同演讲中某些词汇出现的频率。这种设计方式能提供读者 用更多方式去评估和理解特定的词汇或数据元。很简单，但直观明了。 译注：黑体字是特定词汇。蓝色圆圈的体积和里面的数字代表该词的出现频率。 BookScape和 Query Bursts是 Yahoo！创新团队 yHaus的实验性项目。 Query Bursts 描绘了 来自独立 IP 的一次很常见的搜索请求的爆发状况。每个微粒代表一次从世界不同角落里发 出的请求。BookSscape 表现的开发图书馆工程中的少儿图书里采集到出的 25万张插图。实 验性的精美实用动态图片数据采样技术在可缩放的空间里放置所有图片。 （三）数据可视化及信息可视化的设计资源可视化 数据可视化及信息可视化可以让复杂的数据集变得明了易懂。通过将数据和统计结果图形化， 复杂的概念和信息可以在更短时间内呈现更多含义。 大部分数据可视化处理的对象是具体的数据或统计结果。另一些则致力于表现无形的话题， 为抽象概念提供可视化的展现。一般来说，前者的表现形式多为图示或图表，而后者则往往 更富创造与想象力。 许多可视化与信息可视化应用得很拙劣：有些不恰当地放置了过多繁冗信息（或不足的信息）、 有些使用了不规范的格式、还有一些其他的常见错误。 下文中提供了信息可视化及数据可视化的 25种实用资源。其中大部分展示了令人印象深刻 的图表，还包括一些关于该怎样去设计的话题。 提供作者以前的文章作为参考 （二）数据可视化和信息可视化 ——列举了类型及案例 Data Visualizations and Infographics （一）数据可视化：现代方法——当下正热的案例 Data Visualization: Modern Approaches 1. Data Visualization Sites 数据可视化网站 以下是一些能给信息设计师带来巨大帮助的 blog及网站，提供了 创建方法、案例、类型以 及其他资源。有些还甚至提供了工具来帮助您创建自己的可视化数据。 Strange Maps Strange Maps 上有许多基于图表的地图，涵盖古今。地图里所带的标注，其中最有趣的是 那些历史地图。 Wall Stats Wall Stats 用海报招贴的形式制作了“美国个人可自由支配收入的统计”图表。它们还提供了 其他关于政治及经济议题的图表。 Visual Complexity Visual Complexity 陈列了来源广泛，涉及近 700个工程项目的图表。他们都进行了分类并提 供缩略图，以便于对海量信息进行检索。 Cool Infographics Cool Infographics 是一个令人敬畏的 blog——信息可视化的编年史及大量搜集来的可视化数 据。只要你所能想得到的话题，这儿都有。基于 tag的架构便于你查找特定类别的图表。 Data Mining Data Mining 涉及的领域为数据可视化、社会化媒体和数据挖掘。这个 Blog从包括《美国国 家地理》及《经济学人》在内的其它媒体上聚合了大量的信息可视化图形，。 Edward Tufte 该网站 介绍了来源广泛的信息可视化图表。每张图表都有独立评注，其中有一些令人难以 置信的有趣图片。 Infographics News Infographics News主要提供新闻类信息可视化图像，也发布了一些和新闻相关的不同寻常的 图表 Information Aesthetics Information Aesthetics 上转载了许多细节精致的图表和可视化数据，涉及政治、经济、金融 及其他类型。最早可追溯倒 2004年 12月。 Chart Porn Chart Porn t提供来至全国各地的图示和图表，设计精美，涉及广泛。按话题分类，易于检 索。 Behance Network 网站 Behance Network 基于 Tag 机制，内容涉及信息架构及其他一些特定类型。可以按作 者进行检索。 Good Magazine Good Magazine 推荐了一些极有趣的原创图表，从“水危机”到“食品券的增长”到“奥巴马对投 票率的影响”。 Matthew Ericson 这个 BLOG 展示了图表设计师Matthew Ericson及其他人的创作作品。新近比较有特色的图 表是纽约市的谋杀案地图和工业产值的可视化数据。 NiXLOG Infographics NiXLOG 上从互联网上聚合了大量信息可视化的内容，还包括一份原创图表：关于苹果电脑 及其消费观如何普及的演变历程。 Virtual Water Virtual Water是一个专业 blog，主题是用水量的统计。他们用招贴的形式展现信息并（全部 或部分地）出版发行。 History Shots History Shots是一个商业网站，出售各种主题的数据图表及可视化产品（招贴、明信片等）。 他们的主要提供历史事件、时代及包括政治、军事、体育或其它有趣科目在内的数据图表。 这是一个相当有趣的网站，你可以在屏幕赏缩放图片进行浏览。 Flowing Data Flowing Data提供了一些令人震惊图表，除了他们所专注的分类，还包括了一些比如美国最 好的啤酒，葡萄酒的个性化形象，肯尼迪的族谱，美国宗教地理学以及不少其他类型的猛料 图片。 Many Eyes Many Eyes提供了工具让你创建自己的可视化数据，同时还可浏览别人的作品。他们也拥有 一个很大的图库。 The New York Times 纽约时报 在 The New York Times的网站上花一点力气找到最好的图表绝对是值得的。它们拥有商业领 域最好的信息图形，保证平均水平的读者能轻易理解那些实际上非常复杂的数据。 Nicolasrapp.com nicolasrapp.com 是一个信息设计 blog，其作者为美联社进行创作。 DataViz DataViz 搜集了许多漂亮的数据化设计。尽管没有标注，但是那些图片已经完全足够说明自 己了。 iGraphics Explained iGraphics Explained –对于图表和数据可视化的有效性和制作方式，这个 blog希望能阐明一些 启示。他们展示了一些来至互联网的精美图表，这是一个启发创意的好去处，你还可以在这 里认识到哪些图表形式是有效，而哪些不是的。 Simple Complexity Simple Complexity 这个网站展示了一些简化复杂信息的可视化数据，用一种易于理解的方式 来体现他们的真实意图。也包括一些关于如何图表优化的教程。 Well-formed Data Well-formed Data 这个 blog的题材：交互界面设计、信息图形、数据及统计可视化等。所附 评注非常有趣，就某些话题进入了深入的探讨。 Information is Beautiful Information Is Beautiful 这个 blog颂扬了精美的数据设计。话题多元，有原创和来至他人的 设计。 2. Flickr Pools for Infographics 信息图形的 Flickr群组 Flickr 群组可以成为信息和灵感的源泉。下面案例中的图表，大部分来至世界各地的不同时 期。这是一个获取想法和感知全球图表设计趋势的好地方。 Infografia | Infographics拥有 700多张图表的群组，由 120多位成员上传。 Infografistas.com / Infographics News 拥有 350个类目的发布，来源的种类繁多。 Visual Information 包含 650类目的群组。从餐馆到图书馆地图都有。 The Info Graphics Pool这个可能是 Flickr里这一类群组中规模最大的了，拥有超过 700名成员 和 1800个类目。 About the author 关于作者 Cameron Chapman 是一名专业的WEB和图像设计师。拥有超过 6年的从业经验。她为很多 blog写作，包括她个人的 Cameron Chapman On Writing。同时也是《 Internet Famous》一 书的作者。