网页设计中的数据可视化：12个令人惊叹的例子

对于如今的我们来说，数据是无处不在的。 但是你应该怎么处理他们，又要以什么样的形式更轻松的获取或者读懂他们呢？ 今天，我们收集了12个令人惊叹的，用于网站设计中的数据可视化示例，希望可以帮助你开启如何处理数据的思考。

我们生活在一个以新的和有趣的方式展示数据并可以成为设计师的一项巨大资产的数据时代。

无论你是已经拥有大量数据还是只想展示相关的数据信息，这种设计风格都可以成为你的绝佳工具。

1.History of the NFL

数十年，跨越32支球队的庞大数据，汇集关于NFL比赛的几乎所有的信息，FiveThirtyEight将它全部归结为一系列交互式图表，你可以通过团队的检索形式查看这些图表以了解足球历史的起伏。

这种数据可视化的好处在于它非常简单。 线条显示输赢信息，但是随着点击和改变，数据会变得更加生动：你可以在整个联盟的平均值的地图上了解每一场赛事的得分，日期和记录。 

2.Selfiecity

Selfiecity不仅仅只是一组有趣的照片。 Selfiecity使用富媒体可视化来汇集数千张照片，以查找有关拍摄人物的统计信息。

这个数据表现形式的酷炫之处在于它虽然全部是视觉效果 - 数千张照片，但你会发现他们是遵照一定的模式设计的，例如人们在不同地方拍摄的自拍风格，女性或男性，是否拍摄更多照片以及自拍的年龄等等。 虽然这里有一些统计数据和数字，但这些数据是使用巨大网格中的照片绘制的。

3.Largest Vocabulary in Hip Hop

ThePudding这个项目表明数据并不总是必须编号的。 它分析嘻哈歌词中使用的独特单词的数量，并根据艺术家图像的单词数量绘制最大的词汇。

以下是它的工作原理：“它比较了嘻哈中一些著名的艺术家使用的独特单词的数量（也就是Tahir Hemphill曾经提出的抒情定量观的一个例子）。 统计使用了每个艺术家前35,000首歌的歌词。 通过这种方式，像Jay-Z这样的多产艺术家可以与Drake这样的新艺术家进行比较。“

绘制图采用的是简单的黑白设计，在视觉上很有趣，可以很容易地看出哪些艺术家领先于其他人（或者你可以使用更具互动性的工具并搜索特定的艺术家），你也可以按时代排序。

4.Shopify Year in Review

将一组年度数据添加到一个网站中，其重要的根源在于使其全部可视化。 Shopify的2016年度评论的展示设计中，使用了一个易于阅读的年度报告数据集。

该网站在页面中滚动的包含事件和信息。 时间轴样式使可视化可以更深入引导用户滚动到带有图形和其他数字图表的链接。 这个网站表明，即使有很多数字，你也可以创造出令人惊艳和时尚的东西。

5.Daily Routines of Famous Creative People

不要认为对于数据表达折线图或者其他类型的线形图很无聊。 这组惊人的线条展示了很酷的数据。

使这种数据可视化工作的原因在于颜色的使用。 每一行意味着什么，每种颜色都与周围的颜色形成鲜明对比，因此每一点信息都易于查看和理解。

6.Falling Through the Gap

BBC的这种交互式数据可视化处理的非常棒。 滚动动作上的一组动画一目了然，比起直接展示复杂的信息，这种形式更加生动并可以是用户更有兴趣去了解其中的内容。

这个交互式信息图背后的动画和想法都经过精心策划和执行。

7.Every Total Solar Eclipse Happening

这种数据可视化混合了一些很酷的效果，动画和科学数据，以更加有趣的形式提供你可能会想要了解的一些数据信息。

改信息展示了从你的出生年份开始，所经历的全球日食事件。 如果你出生在1980年，你今年（或将来）将是37岁。 如果你活到100岁，那么你的一生中将经历43次日食。 

数据可以进一步扩展到日食的现象原理以及每次的活动路径的说明。

8.Wind Map

风从哪里吹来？

该地图实时显示了美国的风速和平均值。 天气数据被移植到一张简单的黑白地图中，显示全国各地的风格的移动（我不得不承认，仅仅只是观看动画就很令人上瘾......而且舒缓）。

9.How Every Member Got to Congress

数据映射是一种详尽且信息丰富的表现形式。 这张交互式数据地图显示了美国每位国会议员和女议员的参政信息。

你可以跟踪教育，工作和其他政治经验（其中你会发现有一些相似的路径，这点令人惊讶），通过观察政治家的个人参政信息来深入了解数据。

10.World’s Biggest Data Breaches and Hacks

如果你正在寻找看起来很棒的数据，那么Information is Beautiful是一个很好的起点。 该圆圈图描绘了从2008年到现在的30,000条或更多条记录的关于数据泄露。

圆圈大小表示发生事件的违规行为的影响程度，并且很容易看到你的信息可能在数据黑客中的位置。 将鼠标悬停在任意圈子上以获取更多信息。 时间轴风格设计也展示了其他一些东西 - 每年违规行为的绝对增加信息。

11.Why Your Smartphone is Causing You ‘Text Neck’ Syndrome

一些数据可视化将事实和故事编织在一起，以提供更完整的信息图像。 这就是 “text neck”所表达的。

小数据图使用了事实和数据，与显示姿势变化的动画数据配合，以显示这种现象发生的事件，这些事件始于“文本颈部”案例的数量。 这是解释视觉效果的一种很好的方法，否则可能没有多大意义。

12.Illustrated Guide to 2,339 Deaths in ‘Game of Thrones’

使用插图也可以设计引人入胜的数据可视化。 华盛顿邮报记录了热门节目“权力的游戏”中的每一个死亡，并附有插图指南。

插图和图标编码通过点击操作你可以更加详情的了解相关的死亡事件。 此外，一切都按季（如果您感兴趣的话，还有位置和角色类型）进行组织。 为了证明这不仅仅是有趣的，它有一个完整的方法说明它是如何工作的。

总结

数据可视化随着科技及用户视觉要求的提升变得越来越生动，并且几乎无处不在。 我们生活在一个数据驱动的时代，人们被信息和知识所吸引。

能够将大量数据融入设计是一项宝贵的技能，可以帮助你完成更多的项目。 如果你还没有被要求这样做，相信你很快就会遇到。

图文来自：design shack 

由深圳网站建设公司-Clh翻译编辑整理