,紫色代表
黄色代表数据集群(下拉菜单)…………。于是每个网站页面的特性就以这样一种奇特的图像方式呈现出来了,从不同的结果图像中可以看出每个网站的不同性格,比如门户网站会生成非常庞大的树状图;某些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的测试版本。
可制作飞行中的饼图、见图和直方图的服务。同时还提供可用于优化现行的可视化方式的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》一书的作者。