企业官网建设流程全解析

Data Science for Beginners 第十三课：用 D3.js 与 vue-d3-network 打造有意义、不误导的数据可视化

【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners

数据科学家最核心的基本功之一，是能把数据"讲清楚"——即创建一份**有意义（meaningful）**的可视化，帮助自己与他人回答业务问题。在 Data-Science-For-Beginners 项目的第十三课中，课程围绕六个主题展开：如何选择正确的图表类型、如何避免误导性图表、如何驾驭颜色、如何为可读性做样式化、如何构建动画或 3D 可视化，以及最终如何亲手用 Vue.js + D3 完成一个"社交网络关系图"实战项目。读完本文，你将掌握一套"选型 → 避坑 → 上色 → 排版 → 进阶动效 → 落地工程"的完整可视化方法论，并能在本地跑通 危险关系（Les Liaisons Dangereuses）网络可视化应用。

本课程所在仓库为 Data-Science-For-Beginners（10 周、20 课的数据科学入门课程）。本课同时提供 Python（Matplotlib/Seaborn）与 R 两个教学变体，本文所依据的文档为保加利亚语翻译的 R 课程版 13-meaningful-vizualizations/README.md，英文原版见 13-meaningful-visualizations/README.md。可视化前的数据清洗与准备在之前的课程中已经完成，本文假设你拿到的是干净、可直接使用的数据。

选择正确的图表类型：先问问题，再选图

在之前的多节课中，你已经用 Matplotlib、Seaborn（Python 版）或 R 的绘图工具做过大量实验。但"画得漂亮"不等于"画得对"。选图的第一原则是：先明确你想回答什么问题，再据此选择图表类型。本课给出了一张通用的选型速查表：

✅ 提示：根据数据的构成，你可能需要先把文本类型的数据转换为数值型，才能被某些图表类型支持。例如饼图需要的是"类目 → 数值"的聚合结果，而非原始文本。

选错类型的代价往往被低估：例如用饼图展示过多类别，即使作者意图良好，也会因扇区过碎而难以解读，本质上构成一种误导。因此，选型表是整节课的地基。

避免误导：眼睛很容易被骗

即使数据科学家小心地为数据选择了"正确"的图表，仍然有大量手段可以让数据"证明某个论点"——而这常常是以牺牲数据本身为代价的。本课收集了多个经典的反面教材，并强调一个原则：图表的诚实性比"好看"更重要。

反向 X 轴：把事实颠倒

第一类陷阱是翻转坐标轴。下图把 X 轴（日期）反向排列，使趋势呈现与事实相反的走向——这是最简单也最恶劣的操纵手段之一：

本课还引用了一场著名的行业演讲（Alberto Cairo 的 "How Charts Lie"），系统讲述图表如何"说谎"。Cairo 的核心观点与本课一致：视觉欺骗不在于工具，而在于操纵者的选择——坐标轴范围、坐标轴方向、基线是否从零开始，都可能是说谎的入口。

重排日期：用"顺序"制造假趋势

另一种更隐蔽的欺骗是重新排列时间顺序。有一张图表让观者的视线自然向右下方移动，从而得出"随时间推移，各郡县的新冠病例在下降"的结论；但仔细观察日期就会发现，日期被刻意打乱重排，只为制造那条虚假的下降趋势。眼睛对"从左到右下降"的感知惯性，在这里成了欺骗工具。

颜色 + 反向 Y 轴：组合拳

还有一个广为人知的案例，同时使用颜色和反向 Y 轴来误导：本应得出"枪支友好立法通过后枪击死亡人数激增"的结论，观者的眼睛却被设计成得出完全相反的结论。颜色在这里不只是装饰，而是被用作引导注意力的"重音符号"。

操纵比例：用面积骗人

比例（proportion）同样可以被操纵到近乎荒诞的程度：通过不等比缩放扇区或图形面积，可以让占比关系面目全非，甚至产生喜剧效果。

比较不可比之物：虚假相关

除坐标轴与比例外，"拿不可比的东西做比较"也是常见伎俩。业界有一个著名的 "spurious correlations（虚假相关）"网站，专门展示诸如"缅因州离婚率"与"人造黄油消费量"这类毫无因果联系却高度相关的"事实"；Reddit 的 r/dataisugly 社区也持续收集各种丑陋的数据用法。

结论：请务必理解人眼是多么容易被这类图表欺骗。即便意图良好，选错图表类型（如塞进过多类目的饼图）本身也可能构成误导。

颜色：语义、可访问性与色盲友好

在"佛罗里达枪支暴力"那张反面教材中，你能看到颜色如何为图表增加一层额外的语义——尤其是当图表没有借助 Matplotlib/Seaborn（Python 版）或 ggplot2、RColorBrewer（R 版）这类自带经过校验的配色库与调色板的库时，手工配色更容易失控。如果必须手绘图表，建议先系统学习一下基础色彩理论。

✅ 可访问性提醒：设计图表时必须意识到，可访问性是可视化的一个重要维度。你的部分用户可能是色盲——请检查图表对视觉障碍用户是否依然清晰可读。可考虑色盲友好配色、形状+颜色双重编码（如同时用形状和颜色区分类别）等策略。

颜色还携带你未必想表达的文化含义。本课举了一个生动例子：某张"身高"图表用"粉红色女士"来标记数据，粉红被赋予了鲜明的"女性化"刻板印象，反而放大了图表的怪异感。虽然颜色的含义会随地域和色相深浅变化，但一般而言：

如果被要求使用自定义颜色绘制图表，请同时确保两点：图表可访问，且所选颜色与你试图传达的含义一致。

为可读性做样式化：清晰比花哨更重要

图表如果不清晰，就没有意义。本课给出了具体的排版建议：

• 尺寸与比例：认真考虑图表的宽高，使其与数据的规模匹配。例如要展示"全部 50 个州"这种单一变量时，尽量把类目放在 Y 轴垂直排列，避免生成需要水平滚动才能看全的图表。
• 标注与辅助信息：给坐标轴加标签；必要时提供图例（legend）；为数据点提供 tooltip（悬停提示），帮助读者理解具体数值。
• 文本旋转：如果 X 轴上的文本类目冗长，可以旋转文字角度以提升可读性。

在 3D 方面：R 课程变体推荐 CRAN 上的plot3D包；Python 变体则推荐 Matplotlib 的mpl_toolkits.mplot3d。只要数据支持，两者都能产出相当复杂的 3D 可视化：

3D 图表在表达三维关系时有独特优势，但也容易引入透视变形与遮挡问题，使用时需谨慎权衡。

动画与 3D 可视化：向顶尖作品取经

当今最出色的数据可视化中有相当一部分是动画的。课程提到了两个经典范例：

1. Shirley Wu 的 "film flowers"（基于 D3.js）：每个"花朵"都是一部电影的映射，用花形/花瓣编码电影的多维属性，是动画 + 数据叙事的代表作。
2. The Guardian 的 "Bussed Out"：一个交互式叙事体验，将可视化与 Greensock、D3 以及"滚动讲故事（scrollytelling）"的文章格式结合，揭示纽约如何通过把无家可归者送往城外的方式应对流浪问题。可视化作者为 Nadieh Bremer 与 Shirley Wu。

课程坦承，一节课的篇幅不足以深入这些强大的可视化库，但它给出了一个可落地的进阶方向：在 Vue.js 应用中借助基于 D3 的网络可视化库，把《危险关系》这封书信体小说可视化成一张"动画社交网络"。

《危险关系》由 Choderlos de Laclos 于 1782 年创作，是一部由系列书信构成的小说：18 世纪末法国贵族社会中的两位主角——瓦尔蒙子爵（Vicomte de Valmont）与梅尔特伊侯爵夫人（Marquise de Merteuil）——互相设局、报复、制造混乱，最终两败俱伤。小说以写信人、收信人构成的复杂网络展开。把每封信映射为"发信人 → 收信人"的一条连线，即可用可视化揭示叙事中的核心人物（kingpins）——这正是接下来实战项目要做的事。

实战项目：用 D3.js 构建"危险关系"社交网络可视化

本课最终项目是一个完整的 Vue.js 应用：它展示一张可拖拽、可动画的社交网络图——节点是小说角色，连线是信件往来。项目使用基于 Vue.js 与 D3 的vue-d3-network库实现，当应用运行时，你可以拖动屏幕上的节点重新排布数据。

课程文件夹中同时包含 starter 起始工程（需要你补全代码）与 solution 参考答案（可直接运行对照）。工程结构为 Vue CLI 标准布局，核心代码集中在src/components/Nodes.vue。

1. 环境准备与安装依赖

项目对运行环境有明确要求：需要Node.js >= 20.0.0与 NPM。这一约束记录在 starter/package.json 的engines字段中：

"engines": { "node": ">=20.0.0" }

按 starter 工程 README 的说明执行即可：

# 安装项目依赖 npm install # 启动本地开发服务器（编译并热重载） npm run serve # 构建生产包（压缩混淆） npm run build # 代码检查与修复 npm run lint

从 package.json 可以看到核心依赖组合：vue（^3.5.16）、vue-d3-network（0.1.28）、core-js（^3.6.5）；开发依赖为 Vue CLI 5 系插件（@vue/cli-service、@vue/cli-plugin-babel、@vue/cli-plugin-eslint）。overrides字段还固定了qs、braces、webpack-dev-server/ws等传递依赖版本，用于规避已知安全问题——如果你的环境在npm install时报依赖冲突，这是正常的版本锁定策略。

2. 认识数据：letters.json

打开 starter/src/assets/letters.json，你会找到小说中全部信件的结构化数据：每封信都有编号，以及 'to'（收信人）与 'from'（发信人）标注。单条记录形如：

{ "letter_num": 2, "from": "Marquise de Merteuil", "to": "Vicomte de Valmont", "date": "8/4/17**", "location": "Paris" }

除from/to外，部分记录还包含date与location字段，后续如果你想把节点按地点或时间着色，这些字段就是现成的数据源。

3. 补全 createLinks()：把书信变成连线

核心任务在 starter/src/components/Nodes.vue 中：找到名为createLinks()的方法（起始工程中它被留空，注释写着//complete this code），补上嵌套循环：遍历 JSON 对象，捕获每封信的 'to' 与 'from'，构造出可视化库可消费的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，即可在浏览器中享受可拖拽的社交网络动画。完整实现见 solution/src/components/Nodes.vue，可作为对照参考。

从源码理解可视化原理

结合 Nodes.vue 的完整源码，可以看清整个可视化的数据流：

• 模板层：<d3-network :net-nodes="nodes" :net-links="links" :options="options" />是 vue-d3-network 提供的网络图组件，接收三个 prop：节点数组、连线数组、配置对象。
• 节点构建（created()生命周期）：硬编码了 15 个角色名（如Vicomte de Valmont、Marquise de Merteuil、Cécile Volanges等），随后调用createLinks(characters)生成连线；再遍历角色为每个节点设置id、name、_size（节点尺寸）与_color（随机颜色）。
• getCount(name)：统计某角色作为收信人（letters[i].to === name）收到的信件数，_size: this.getCount(characters[j]) + 20把"收信数量"编码为节点大小——信件往来越多的角色，节点越大，叙事核心人物一眼可辨。
• 交互配置（optionscomputed）：force: 3000控制力导向布局的斥力强度，size: { w: 600, h: 600 }设定画布尺寸，nodeLabels: true/linkLabels: true显示节点与连线标签，canvas: this.canvas决定用 SVG（默认canvas: false）还是 Canvas 渲染。
• 样式层：默认节点填充色#dcfaf3、连线色rgba(18, 120, 98, 0.3)；悬停（:hover）时连线和节点会高亮为琥珀色rgba(250, 197, 65, 0.6)并加粗到 5px——这本身就是"为可读性做样式化"的工程化示范。

小提示：随机生成的_color无法保证色盲友好，若要交付正式产品，可参考本课"颜色"一节的建议，改用经过校验的调色板。

挑战：当一回"可视化侦探"

本课留下一个开放性挑战：去互联网上搜集误导性可视化，分析作者用了什么手段欺骗用户（是否刻意为之），并尝试动手修正它们，展示"本该长什么样"。对照本文学到的四类手段——坐标轴翻转、顺序重排、颜色误导、比例操纵——你可以建立一张自己的"防欺骗检查清单"。

复习与延伸

围绕"误导性数据可视化"主题，课程推荐了若干延伸阅读方向：数据可视化如何"说谎"的经典文章、欺骗性可视化中的可用性研究、面向历史资产与文物的趣味可视化（如 PubPub Handbook）、以及"动画如何为可视化增效"的讨论。这些资源与本节选型表、反面案例互为补充。

课程的配套测验（课前测验与课后测验）可在对应章节的英文原版 README 中找到入口；逐章测验应用源码位于 quiz-app。

作业：构建你自己的定制可视化

课后作业要求你以本项目的社交网络代码为模板，模拟一份属于你自己的社交互动数据——例如映射你的社交媒体使用记录，或绘制一张家族成员关系图——并产出一个展示独特社交网络视图的趣味 Web 应用。评价标准见 assignment.md：

把"选择正确的图 → 避免误导 → 善用颜色 → 保证可读 → 尝试动效"这条方法论链条走完，你就能从"会画图"进阶到"画出有意义的图"。

【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners