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

2023/12/20

数据,数据,无处不在。但你用它做什么呢?今天,我们收集了 12 个网站设计中数据可视化的精彩示例,以帮助您开始思考如何使用数据。在我们生活的时代,以新颖有趣的方式展示数据的能力对于设计师来说是一笔巨大的财富。

无论您拥有大量数字还是只想展示信息,这种设计风格都可以成为您工具包中的绝佳工具。

1. NFL 的历史

数据可视化

凭借 32 支球队数十年的数据,可以获得大量有关 NFL 比赛的信息。FiveThirtyEight 将其全部归结为一系列交互式图表,您可以按球队查看这些图表,了解足球历史的潮起潮落。

这种数据可视化最好的一点是它非常简单。线条显示胜利和失败。但通过点击和悬停,数据就会变得栩栩如生:您可以获得每场比赛的得分、日期和记录,叠加在整个联盟的平均得分地图上。(这样您就可以了解您的团队是领先还是落后。)

2. 自拍

数据可视化

自拍照不仅仅是一组有趣的照片。Selfiecity 使用富媒体可视化来组合数千张照片,以查找拍摄这些照片的人的人口统计信息。

这个数据集的酷之处在于,虽然它都是视觉的——数千张照片——但你可以开始看到模式,例如人们在不同地方拍摄的自拍照的风格,是女性还是男性拍摄更多照片以及自拍的年龄——接受者。虽然这里有一些统计数据和数字,但这些数据是使用巨大网格中的照片绘制的。

3. 嘻哈音乐中最大的词汇量

数据可视化

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

它的工作原理如下:“它比较了一些最著名的嘻哈艺术家使用的独特单词的数量(即抒情定量观点的一个例子,曾由塔希尔·亨普希尔提出)。我使用了每位艺术家的前 35,000 首歌词。这样,多产的艺术家(例如 Jay-Z)就可以与较新的艺术家(例如 Drake)进行比较。”

绘制图表的简单黑白设计在视觉上很有趣,并且可以轻松看出哪些艺术家处于领先地位。(或者您可以使用更具互动性的工具并搜索特定艺术家。)您还可以按时代排序,其中 2000 年代的抒情性最强。

4. Shopify 年度回顾

数据可视化

通过一个以可视化为基础的网站,为一组年度数据增添趣味。Shopify 的 2016 年回顾是年度报告数据的集合,易于阅读。

该网站以类似页面的块滚动,其中包含事实和信息。时间线风格的可视化可以更深入地滚动到与图形和其他数字图表的链接。该网站表明,即使有很多数字,您也可以创造出令人惊叹和时尚的东西。

5. 著名创意人士的日常

数据可视化

不要误以为条形图或折线图很无聊。这组令人惊叹的线条显示了很酷的数据,显示了一些相当著名的创意人员如何度过他们的日子。(那里有充足的食物和休闲时间。)

使数据可视化发挥作用的是颜色。每行都有意义。每种颜色与其周围的颜色形成鲜明对比,因此每一点信息都易于查看和理解。

6. 跌入鸿沟

数据可视化

BBC 的交互式数据可视化非常精彩。滚动动作时一组动画点的变化显示复杂信息一目了然。

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

7. 每一次日全食的发生

数据可视化

此数据可视化混合了一些很酷的魔法、动画和科学数据,以提供有关何时(以及是否)您可能会看到日食的定制信息。

自定义报告从您的出生年份开始。这是我的(注意数据来自 2017 年):“如果你出生于 1980 年,那么你今年(或将会)37 岁。如果你活到 100 岁,在你的一生中,全球还会发生 43 次日全食。许多人将飞越南美洲。一个人只会在水面上失色。”

这些数据进一步解释了日食如何发生以及 2017 年事件的路径。

8. 风图

数据可视化

风往哪儿吹?

该地图实时显示美国的风速和平均值。天气数据被移植到一张简单的黑白地图中,显示全国范围内移动的风型。(我不得不承认,光看动画就很让人上瘾……并且令人舒缓。)

9. 每个议员如何进入国会

数据可视化

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

您可以追踪教育、工作和其他政治经历。(令人惊讶的是,有这么多相似的路径。)通过查看政客的个人路径来更深入地了解数据。

10.世界上最大的数据泄露和黑客攻击

数据可视化

如果您正在寻找看起来很棒的数据,《Information is Beautiful》是一个不错的起点。此圆形图绘制了 2008 年至今 30,000 条或更多记录的数据泄露情况。

圆圈大小代表发生的泄露有多大,并且很容易看出您的信息可能在哪里陷入数据黑客攻击。将鼠标悬停在任意圆圈上可了解有关违规的更多信息。时间线风格设计还显示了其他一些东西——每年违规事件的急剧增加。

11. 为什么你的智能手机会导致你“短信颈”综合症

数据可视化

一些最好的数据可视化将事实和故事编织在一起,以提供更完整的信息图片。这本“短信脖子”指南就是这种情况。

使用事实和数字的小数据图与显示姿势变化的动画数据混合,以准确地显示(而不是告诉)这种始于大量“文字脖子”案例的现象正在发生什么。这是一种以视觉方式解释某些事物的好方法,否则这些事物可能没有多大意义。

12. 《权力的游戏》中 2,339 人死亡的图解指南

数据可视化

还可以使用插图来制作引人入胜的数据可视化。《华盛顿邮报》记录了热门电视剧《权力的游戏》中的每一起死亡事件,并附有插图指南。

插图和图标编码让死亡一目了然,点击操作可以显示更多细节。另外,一切都是按季节组织的(如果您感兴趣的话,还有地点和角色类型)。为了证明这不仅仅是有趣,还有一套完整的方法论来说明它的工作原理以及什么“算作”死亡。

结论

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

能够将大量数据转化为可用的设计是一项宝贵的技能,可以在许多项目中为您提供帮助。如果您还没有被要求这样做,那么您很可能很快就会被要求这样做。


更多新闻

网站设计如何融入智能交互,增强用户体验
人工智能给网站设计带来的好处
2024年科技行业网站设计风格趋势
高端网站设计的注重点有哪些?