Data-Science-For-Beginners 第 13 课如何打造有意义且不欺骗读者的数据可视化【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners数据可视化的目标不是画得好看而是讲真话——正确选择图表类型、避开误导性表达、妥善运用颜色与样式并借助动画和 3D 等现代手段让数据自己说话。本篇基于 Data-Science-For-Beginners 课程第 13 课Meaningful Visualizations展开在梳理完整方法论之后深入解读仓库中配套的 Vue.js D3 网络可视化实战项目让你既能建立防骗的可视化思维也能动手把一本小说画成一张可交互的社交网络图。先选对图表一张表解决该用什么图在动手画图之前先回答一个问题你究竟想用数据证明什么前几课已经用 Matplotlib 和 Seaborn 练习过各种图表本课则把问题 → 图表类型的对应关系整理成了一张速查表这是本课的核心决策工具你的需求应选用的图表展示随时间变化的趋势折线图Line比较类别柱状图Bar、饼图Pie比较总量饼图Pie、堆叠柱状图Stacked Bar展示关系散点图Scatter、折线图Line、分面图Facet、双折线图Dual Line展示分布散点图Scatter、直方图Histogram、箱线图Box展示占比饼图Pie、环形图Donut、华夫饼图Waffle✅ 需要注意取决于数据的组成结构你可能需要先把文本格式转换为数值格式图表才能正确支持其显示。这是数据准备阶段见本课程第 08 课数据预处理与可视化阶段之间必不可少的衔接步骤。图表类型选错了即使数据本身完全真实呈现出来的结论也可能是错误的——这一点在下一节会反复出现。警惕欺骗性图表眼睛很容易被骗即使数据科学家谨慎地为正确的数据选择了正确的图表仍然存在大量让数据证明某个观点的手段而这些手段往往以牺牲数据真实性为代价。本课通过四个真实案例总结了最常见的欺骗套路反转 X 轴一张按日期绘制的图若将 X 轴反转会呈现与事实相反的结论——时间轴从左到右反而倒退了。重排日期制造假趋势有一张关于 COVID 病例数的图表把各郡县的数据按时间重排使人的视线被引向右侧从而得出病例随时间下降的结论仔细核对日期就会发现这个下降趋势是人为制造出来的。颜色 反转 Y 轴双重误导一个关于枪支立法的经典案例通过颠倒 Y 轴方向让立法通过后枪击死亡激增的事实看起来像是下降颜色又进一步强化了错误暗示。操纵比例通过扭曲饼图或柱状图的面积比例可以达到近乎荒诞的幽默效果但本质上仍是误导。此外拿不可比的东西做比较也是一种常见的可疑手法例如把缅因州的离婚率和人造黄油消费量放在一起证明它们的相关性——这类虚假相关spurious correlations在网络上比比皆是。理解这些把戏的意义在于即使数据科学家动机良好选错图表类型例如用包含过多类别的饼图本身就可能具有欺骗性。因此选对图表不仅是审美问题更是伦理问题。用颜色传递正确的含义在Florida gun violence一图中可以看到颜色能为图表增加额外一层语义——尤其是当你不借助自带经过验证的调色板的库来手工绘制图表时。手工选色前值得花一点时间学习色彩理论。同时必须记住可访问性accessibility是可视化的关键维度你的部分用户可能是色盲图表必须对视觉障碍用户也可读。颜色还会携带你可能没预料到的含义。例如身高图表中把一组数据标成粉色pink ladies便附带了明显的女性化暗示加重了图表本身的怪异感。颜色的象征意义在世界各地存在差异且会随色相变化而改变但一般意义上的颜色含义包括颜色含义红色力量蓝色信任、忠诚黄色快乐、谨慎绿色生态、幸运、嫉妒紫色快乐橙色活力如果你需要为图表自定义颜色务必同时满足两点图表对色盲用户可读且所选颜色与你想要传达的含义一致。提升图表的可读性样式即信息图表如果不可读就没有意义。本课给出几条可落地的样式规范调整宽高比例让画布尺寸与数据规模匹配如果某个变量需要展示 50 个取值比如 50 个州尽量把它们竖排在 Y 轴上避免生成需要横向滚动的图表。标注坐标轴、必要时给出图例、提供 tooltip三者共同帮助读者理解数据细节。文本轴内容过长时倾斜文字当 X 轴上的文本数据冗长时倾斜标签可以显著改善可读性。如果你的数据支持 3D 显示还可以借助 Matplotlib 的mpl_toolkits.mplot3d工具包制作精良的三维图。在 R 生态中plot3D 也提供 3D 绘图能力。仓库中3-Data-Visualization/R/13-meaningful-vizualizations/目录即为本课的 R 版本可对照参考。需要注意的是3D 本身也可能成为误导的来源使用前应确认数据确实需要第三个维度。动画与 3D让可视化动起来今天最优秀的数据可视化中有相当一部分是动画或交互式的。例如 Shirley Wu 用 D3 创作的 film flowers每朵花代表一部电影的视觉化以及 Guardian 的 Bussed Out——一个结合 Greensock 与 D3、采用 scrollytelling滚动叙事文章格式的交互式作品用来展示纽约如何把无家可归者运送出城。本课不要求深挖这些重量级库的细节而是给出了一个恰到好处的练习在一个 Vue.js 应用里使用 D3 网络可视化库把小说《危险关系》Les Liaisons Dangereuses的通信关系渲染成一张动画社交网络图。该书是 1782 年肖代洛·德·拉克洛创作的书信体小说epistolary novel故事以一系列信件展开记录了两位法国贵族主角——瓦尔蒙子爵与梅尔特伊侯爵夫人——充满恶意与道德沦丧的社交算计。通过可视化这些信件你可以在视觉上直接发现叙事中的核心人物主要话事人。实战用 Vue.js D3 把《危险关系》画成社交网络本课的项目部分配套了完整的 starter起始模板与 solution参考答案两份工程位于仓库的3-Data-Visualization/13-meaningful-visualizations/starter/与3-Data-Visualization/13-meaningful-visualizations/solution/目录。其技术栈与版本要求见 solution/package.json如下Vue 3^3.5.19配合 Vue CLI 5 构建vue-d3-network0.1.28专为 Vue D3 设计的网络图可视化库Node.js 20.0.0engines字段强制要求可用的脚本npm run serve开发热重载、npm run build生产构建、npm run lint代码检查。第一步安装依赖并启动项目参考 solution/README.md确保本机装有 NPM 与 Node.js版本不低于 20.0.0然后安装依赖并本地运行npm install npm run serve第二步认识数据——letters.json打开starter/src/assets/letters.json里面是小说中全部信件共 1261 行记录每条记录包含编号、发信人、收信人、日期与地点等字段例如{ letter_num: 1, from: Cécile de Volanges, to: Sophie Carnay, date: 8/3/17**, location: Ursulines }from与to正是构建社交网络边的关键数据一封从 A 写给 B 的信就是社交网络中的一条从节点 A 指向节点 B 的有向边。第三步核心逻辑——createLinks()可视化能否工作取决于是否把信件转换为网络库可消费的links对象。在components/Nodes.vue中找到名为createLinks()的方法补充如下嵌套循环//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 }); }这段代码做的事是遍历每封信把发信人from与收信人to的名字在预定义的characters角色列表中定位为索引f与t然后向this.links推入{ sid: f, tid: t }——sid是源节点source idtid是目标节点target id。完成之后刷新页面就能看到网络图随信件关系生长出来。第四步看懂节点与交互的完整实现solution/src/components/Nodes.vue中提供了可对照的完整实现值得逐段研读模板层d3-network :net-nodesnodes :net-linkslinks :optionsoptions /直接把节点与边数据交给vue-d3-network组件渲染数据层nodes与links初始为空数组canvas: false表示默认使用 SVG 渲染可切换为 CanvascreateLinks()如上负责把信件数据转换成边getCount(name)统计某角色收到的信件数量用于决定节点大小——_size: this.getCount(characters[j]) 20收到的信越多节点越大节点着色_color: # Math.floor(Math.random() * 16777215).toString(16)为每个节点随机生成十六进制颜色options 配置force: 3000控制力导向布局的引力强度size: { w: 600, h: 600 }定义画布尺寸nodeLabels: true与linkLabels: true显示节点与边的标签应用入口src/main.js挂载根组件src/App.vue只负责引入并渲染Nodes组件。运行应用后你可以用鼠标拖拽屏幕上的节点打乱并重新组织布局——这就是力导向网络图最直观的交互魅力。实践与延伸从看懂到会批判本课最后给出了一个值得长期坚持的练习到互联网上寻找欺骗性可视化作品分析作者是如何误导用户的、是有意还是无意并尝试动手修正这些图表让它们呈现出本应如此的样子。完成本项目后你还可以对照3-Data-Visualization/13-meaningful-visualizations/assignment.md中的自定义可视化作业把选对图表、守住诚实、用对颜色、做好样式这套方法论应用到自己的数据上——先确保数据被清理和准备妥当再让可视化成为回答问题的可信工具。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
