你是会员吗?RegisterLogin

打开菜单

Web设计中的数据可视化:12个惊人的例子

数据,数据,到处都是。但是你怎么处理它呢?今天,we've collected 12 stunning examples of data visualizations in website design to jump-start your thinking about how to work with data.

我们生活在这样一个时代,能够以新的、有趣的方式展示数据,对于一个设计师来说是一项巨大的财富。

无论你收集了大量的数字还是仅仅是你想展示的信息,这种设计风格在你的工具包中是一个很好的工具。

1.NFL的历史

数据可视化

数十年的数据跨越32个团队,NFL中有很多关于游戏的信息。第五季第八集将其分解为一系列交互式图表,您可以通过团队查看这些图表来了解足球历史的起伏。

这种数据可视化最好的一点是它非常简单。线条显示输赢。但是随着点击和悬停,the data springs to life: You can get scores,日期,每一场比赛的记录都覆盖在整个联盟的平均地图上。(这样你就可以看到你的团队是领先还是落后。)

2。Selfiecity

数据可视化

自拍不仅仅是一组有趣的照片。“自私”使用丰富的媒体可视化技术来收集数千张照片,以找出拍摄这些照片的人的人口统计信息。

What's cool about this data set is that while it is all visual – thousands of photos – you can start to see patterns,比如人们在不同地方的自拍风格,无论是女人还是男人,都要拍更多的照片,以及自拍者的年龄。虽然这里有一些统计数据和数字,这些数据是用巨型网格中的照片绘制的。

三.嘻哈最大的词汇

数据可视化

这个项目显示数据并不总是需要编号的。It analyzes the number of unique words used in hip hop lyrics and plots the biggest vocabularies by the number of words with images of the artist.

它的工作原理如下:“它比较了嘻哈音乐中一些最著名的艺术家使用的独特词汇的数量(即,一个关于抒情的定量观点的例子,曾被塔希尔·亨普希尔提议)。I used each artist's first 35,000 lyrics.This way,多产的艺术家,such as Jay-Z,可以和新艺术家相比,比如德雷克。”

绘制图表的简单黑白设计在视觉上很有意思,可以很容易地看出哪些艺术家领先。(或者你可以使用更具互动性的工具,搜索特定的艺术家。)你也可以按时代分类,2000年代是最有活力的。

4。回顾购物年

数据可视化

通过一个根植于使所有数据可视化的网站,增加一组年度数据的趣味性。Shopify的2016年回顾是一个易于阅读的年度报告数据包。

The site scrolls in page-like blocks with facts and information throughout.时间线样式的可视化可以更深入地滚动到与图形和其他数字图表的链接中。这个网站显示即使有很多数字,你可以创造出令人惊叹和时尚的东西。

5。Daily Routines of Famous Creative People

数据可视化

不要被愚弄到认为条形图或折线图很无聊。This amazing set of lines shows cool data that shows how some pretty famous creative spent their days.(那里有充足的食物和休闲时间。)

使这个数据可视化工作的是颜色。每一行都有意义。每种颜色都与周围的颜色形成鲜明的对比,因此每一点信息都很容易被看到和理解。

6.从缝隙中掉下来

数据可视化

BBC提供的这种交互式数据可视化非常出色。A set of animated dots changes on scroll action show complex information at a glance.

这个交互式信息图背后的动画和思想是经过精心规划和执行的。

7。每次日全食都会发生

数据可视化

这种数据可视化混合了一些很酷的向导,动画,and scientific data to provide customized information about when (and if) you might see a solar eclipse.

It starts with your birth year for a custom report.Here's mine (note the data pull is from 2017): "If you were born in 1980,你今年(或将)37岁。如果你活到100岁,在你的有生之年,全世界将有43次日全食。许多人将在南美上空。一个人只能在水面上日食。”

这些数据进一步解释了Eclipse如何工作以及2017年事件的路径。

8.Wind Map

数据可视化

哪里有风?

这张地图实时显示了美国的风速和平均风速。天气数据被导入一张简单的黑白地图,这显示了全国范围内的移动风模式。(我不得不承认,只是看动画很让人上瘾……很让人安心。)

9。每一位议员如何进入国会

数据可视化

数据映射是一种详尽且信息丰富的经验。这张交互式数据地图显示了美国国会议员和女议员的路径。

你可以追踪教育,工作和其他政治经验。(令人惊讶的是,有这么多类似的途径。)通过观察政治家的个人途径,深入研究数据。

10。World's Biggest Data Breaches and Hacks

数据可视化

如果你在寻找看起来很棒的数据,信息是美好的开始。此圆图绘制了2008年至今超过30000条记录的数据泄露情况。

圆圈大小表示发生了多大的破坏,很容易看到您的信息可能在哪里被数据黑客捕获。悬停在任何一个圆圈上,以了解更多关于漏洞的信息。时间线风格的设计还显示了一些其他的东西——每年都会出现严重的违规事件。

11。为什么你的智能手机会导致你的“文本脖子”综合症

数据可视化

一些最好的数据可视化将事实和故事编织在一起,以提供更完整的信息画面。这就是“文本颈部”指南的情况。

小数据图-使用事实和数字-与显示姿势变化的动画数据混合,以显示(而不是告诉)在这种现象中发生了什么,这种现象从数字“文本颈”开始。病例。It's a great way to explain something visually that might not make a lot of sense otherwise.

12.《权力游戏》2339例死亡的图解指南

数据可视化

使用插图也可以实现引人入胜的数据可视化。《华盛顿邮报》在受欢迎的节目中记录了每一次死亡,“权力的游戏”带插图的指南。

插图和图标编码显示死亡一瞥与点击行动,进入更详细的。Plus,每件事都是按季节组织的(如果你感兴趣的话,还包括地点和人物类型)。为了证明这不仅仅是乐趣,有一个完整的方法论来解释它是如何工作的以及什么是“重要的”作为死亡。

结论

数据可视化的使用几乎无处不在。我们生活在一个数据驱动的时代,人们被信息和知识所吸引。

能够将大量数据转化为可用的设计是一项有价值的技能,可以帮助您完成许多项目。如果你还没有被要求这么做,很可能你很快就会来。