制作有意义的可视化图表

有意义的可视化图表 - 草图笔记由@nitya绘制

“如果你对数据施加足够的折磨，它会承认任何事情。” -- 罗纳德·科斯

数据科学家的一项基本技能是能够创建有意义的数据可视化图表，以帮助回答你可能有的问题。在可视化数据之前，你需要确保已经对数据进行了清洗和准备，就像在之前的课程中所做的一样。之后，你可以开始决定如何最好地展示数据。

在本课中，您将回顾：

1. 如何选择正确的图表类型
2. 如何避免欺骗性的图表
3. 如何处理颜色
4. 如何使图表易于阅读
5. 如何构建动画或三维图表解决方案
6. 如何构建创意可视化

课前测验

选择正确的图表类型

在之前的课程中，你使用Matplotlib和Seaborn尝试构建了各种有趣的可视化图表。一般来说，你可以根据需要使用以下表格中的图表类型：

✅ 根据数据的构成，你可能需要将数据从文本转换为数值，以便特定类型的图表能够支持它。

避免欺骗

即使数据科学家仔细选择合适的图表来表示合适的数据，也有许多方式可以以牺牲数据本身为代价来显示数据，以证明一个观点。有许多关于欺骗性图表和信息图的例子！

点击上面的图片观看关于欺骗性图表的会议演讲

这个图表反转了X轴以显示与事实相反的内容，基于日期：

这张图表 更具欺骗性，因为眼睛会被吸引到右边，得出结论认为随着时间推移，COVID病例在各个县下降。事实上，如果你仔细查看日期，你会发现它们被重新排列以给出这种欺骗性的下降趋势。

这个臭名昭著的例子使用颜色和反转Y轴来欺骗：与其得出结论枪支死亡率在通过有利于枪支的立法后飙升，实际上眼睛被误导以为相反的情况是真的：

这个奇怪的图表展示了如何操纵比例，以搞笑的效果：

比较不可比的东西是另一种阴暗的技巧。有一个关于“虚假相关”的精彩网站，它展示了诸如缅因州离婚率与人造黄油消费量之间的“事实”相关性。Reddit的一个小组也收集了丑陋的数据用法。

了解眼睛如何容易被欺骗性的图表愚弄是非常重要的。即使数据科学家的意图是好的，选择不恰当的图表类型（例如，包含过多类别的饼图）也会具有欺骗性。

颜色

在上面的“佛罗里达枪支暴力”图表中，你看到了颜色如何为图表提供额外的意义，尤其是在未使用经过验证的颜色库和调色板的库（如Matplotlib和Seaborn）设计的图表中。如果你手动制作图表，请研究一下色彩理论

✅ 设计图表时要注意，可访问性是可视化的重要方面。一些用户可能是色盲——你的图表对于视力障碍的用户来说是否显示良好？

在为图表选择颜色时要小心，因为颜色可以传达你无意中的含义。在“身高”图表中的“粉红女士”传达了一种明显的“女性化”赋予的意义，这增加了图表本身的怪异感。

虽然色彩含义在世界各地可能不同，并且根据其色调变化，但一般来说，色彩含义包括：

如果你的任务是构建带有自定义颜色的图表，请确保你的图表既易于访问，并且你选择的颜色与你想传达的意义相吻合。

使图表易于阅读

如果图表无法阅读，就没有任何意义！花点时间考虑调整图表的宽度和高度，使其与数据很好地匹配。如果需要显示一个变量（如所有50个州），尽可能将它们垂直显示在Y轴上，以避免水平滚动的图表。

给轴添加标签，如有必要提供图例，并提供工具提示以更好地理解数据。

如果X轴上的数据是文字且冗长，可以倾斜文本以提高可读性。Matplotlib 提供3D绘图功能，如果数据支持的话。使用mpl_toolkits.mplot3d可以生成复杂的可视化图表。

动画和3D图表显示

当今最好的数据可视化图表中有一些是动画的。Shirley Wu使用D3制作了一些惊人的图表，如“电影之花”（http://bl.ocks.org/sxywu/raw/d612c6c653fb8b4d7ff3d422be164a5d/），其中每一朵花都是对一部电影的可视化。另一个例子是《卫报》的“被遣散的人”，这是一个结合可视化和Greensock以及D3的交互式体验，加上滚动叙事文章格式，展示了纽约市如何通过将人遣出城市来解决无家可归问题。

“被遣散：美国如何转移其无家可归者” - 《卫报》。可视化由Nadieh Bremer和Shirley Wu制作

虽然本课程不足以深入教授这些强大的可视化库，但请尝试在Vue.js应用程序中使用D3库来显示小说《危险关系》的动画社交网络。

“危险关系”是一部书信体小说，即以一系列书信形式呈现的小说。由Choderlos de Laclos于1782年撰写，讲述了两位法国贵族（维孔特·德·瓦尔蒙和马奎斯·德·默特伊）在18世纪末期的道德沦丧的社会斗争的故事。两人最终都落得悲惨下场，但在过程中造成了巨大的社会破坏。这部小说以写给其圈子中不同人物的书信形式展开，策划复仇或只是制造麻烦。创建这些书信的可视化，以发现叙述的主要关键人物，视觉上。

你将完成一个Web应用程序，该程序将显示此社交网络的动画视图。它使用了一个旨在使用Vue.js和D3创建网络可视化的库。当应用程序运行时，你可以拖动屏幕上的节点来重新排列数据。

项目：使用D3.js构建一个展示网络的图表

本课文件夹包含一个solution文件夹，其中包含已完成的项目，供你参考。

1. 遵循starter文件夹根目录中的README.md文件中的说明。确保在安装项目的依赖项之前，你的机器上已安装NPM和Node.js。

2. 打开starter/src文件夹。你将发现一个assets文件夹，其中包含一本小说中所有带编号的书信的.json文件，以及“收件人”和“发件人”的注释。

3. 完成components/Nodes.vue中的代码以启用可视化。查找名为createLinks()的方法并添加以下嵌套循环。

遍历.json对象以捕获书信的“收件人”和“发件人”数据，并构建links对象，以便可视化库可以使用它：

//loop through letters
      let f = 0;
      let t = 0;
      for (var i = 0; i < letters.length; i++) {
          for (var j = 0; j < characters.length; j++) {
              
            if (characters[j] == letters[i].from) {
              f = j;
            }
            if (characters[j] == letters[i].to) {
              t = j;
            }
        }
        this.links.push({ sid: f, tid: t });
      }
​

从终端运行你的应用程序（npm run serve）并享受可视化吧！

挑战

浏览互联网，寻找欺骗性的可视化图表。作者是如何愚弄用户的，这是有意为之吗？试着纠正这些可视化图表，使之正确显示。

课后测验

复习与自学

阅读以下有关欺骗性数据可视化的文章：

https://gizmodo.com/how-to-lie-with-data-visualization-1563576606

http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/

看看这些历史资产和文物的有趣可视化：

https://handbook.pubpub.org/

浏览这篇文章，了解动画如何增强你的可视化：

https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4

作业

构建你自己的自定义可视化

    **声明**: 
    本文件灏天文库团队进行了翻译。尽管我们力求准确，但请注意，翻译可能包含错误或不准确之处。原文档以其原始语言为准。我们不对因使用此翻译而产生的任何误解或误译负责。
​