尧图网站建设 
Data-Science-For-Beginners 第 13 课实战用 Vue.js 与 D3 构建《危险关系》书信社交网络可视化【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners本篇文章围绕 Data-Science-For-Beginners 开源课程中「Making Meaningful Visualizations制作有意义的数据可视化」一课的可视化实战项目展开。该项目以 18 世纪法语书信体小说《Les Liaisons Dangereuses危险关系》为数据源指导读者使用 Vue.js 3 与 vue-d3-network 组件将 175 封信件中的写信人—收信人关系渲染为一个可拖拽、可交互的动画社交网络图直观发现小说叙事中的核心人物枢纽。读完本文你将掌握该 starter 工程的完整运行流程、网络可视化数据模型的构造方法并理解节点大小、颜色、力导向布局等配置项的底层作用。一、项目背景为什么用一部小说来做网络可视化在 课程正文 中作者强调制作有意义的数据可视化是数据科学家的基本技能之一在绘制图表前要完成数据清洗与准备随后再决定如何最恰当地呈现数据。本章先系统讲解了六类核心议题选择合适的图表类型、避免欺骗性图表、运用色彩、提升可读性的样式设计、构建动画或 3D 图表以及构建富有创意的可视化。其中动画与 3D 图表展示一节指出当前许多优秀的数据可视化都是动画化的例如 Shirley Wu 用 D3 创作的 film flowers 等作品。为了让你亲自动手实践 D3 技术课程提供了一个 Vue.js 应用模板把《危险关系》这部书信体小说中的信件往来可视化为一个动画社交网络。《危险关系》由 Choderlos de Laclos 于 1782 年写成全书以一系列信件展开讲述了法国贵族 Valmont 子爵与 Merteuil 侯爵夫人之间相互算计、最终双双覆灭的故事。每封信都有明确的写信人from与收信人to天然构成了一张有向社交网络——通过可视化这些信件你可以看出谁才是故事中的核心枢纽人物。二、工程结构starter 模板里有什么本项目的起始模板位于 3-Data-Visualization/13-meaningful-visualizations/starter其目录结构如下starter/ ├── public/ │ ├── favicon.ico # 站点图标 │ └── index.html # Vue 挂载入口页 ├── src/ │ ├── assets/ │ │ └── letters.json # 175 封小说的信件数据from/to/date/location │ ├── components/ │ │ └── Nodes.vue # 网络图核心组件需要你补全 createLinks │ ├── App.vue # 根组件仅挂载 Nodes / │ └── main.js # Vue 应用入口 ├── babel.config.js # Babel 配置 ├── package.json # 依赖与脚本定义 └── package-lock.json各文件的职责如下App.vue根组件只做一件事——渲染Nodes子组件main.js创建 Vue 实例并挂载到#appNodes.vue本项目的核心组件包含一个空实现的createLinks()方法等待你补全letters.json全部信件数据共 1261 行、175 条记录。课程同时提供了 solution 目录 作为完整参考答案结构上与 starter 完全一致仅在Nodes.vue中补全了createLinks()的实现供你对照调试。三、环境准备与依赖解析在开始前需要先确认本机环境满足要求。参考 starter 目录的 READMENode.js 20.0.0且NPM可用在 starter 目录下执行依赖安装与启动命令。这一点在 package.json 的engines字段中有明确声明engines: { node: 20.0.0 }依赖清单从 package.json 可以看到项目的三类依赖类别依赖说明运行时依赖vue^3.5.16Vue.js 3 框架运行时依赖vue-d3-network0.1.28基于 D3 的网络图渲染库是本项目的可视化引擎运行时依赖core-js^3.6.5标准库 polyfill开发依赖vue/cli-service/vue/cli-plugin-babel/vue/cli-plugin-eslint~5.0.8Vue CLI 5 构建与代码检查工具链开发依赖babel-eslint、eslint^9.34.0、eslint-plugin-vue静态检查与修复项目还通过overrides字段对传递依赖做了安全与兼容性收敛如将qs固定为 6.14.2、braces 3.0.3、webpack-dev-server的ws固定为 8.21.0 等安装时 NPM 会自动应用这些覆盖规则。四、项目启动与构建命令在 starter 目录下依次执行以下命令即可运行项目1. 安装依赖npm install该命令会依据 package-lock.json 安装全部依赖包括 vue-d3-network并将overrides中的版本约束一并落实。2. 开发模式运行热重载npm run serve该命令实际执行vue-cli-service serve见 package.json 的 scripts 字段会启动本地开发服务器并编译项目改动源码后浏览器自动热重载。启动成功后访问终端提示的本地地址默认 http://localhost:8080即可看到网络图界面。3. 生产构建npm run build执行vue-cli-service build将项目编译并压缩为生产环境的静态资源输出到 dist 目录。4. 代码检查npm run lint执行vue-cli-service lint基于 eslintConfigplugin:vue/essentialeslint:recommendedparser 为babel-eslint检查并尽可能自动修复代码风格问题。提示如需进一步自定义 Vue CLI 构建行为如端口、代理、输出路径可参考 Vue CLI 官方配置参考文档vue-cli-service的--help及vue.config.js机制本工程未内置vue.config.js采用默认配置。五、数据模型从 175 封信到网络图5.1 信件数据格式letters.json 是全部数据的来源每条记录形如{ letter_num: 1, from: Cécile de Volanges, to: Sophie Carnay, date: 8/3/17**, location: Ursulines }字段含义字段含义letter_num信件编号1175from写信人姓名to收信人姓名date信件日期年份被作者以**隐去location写信地点部分记录缺失该字段5.2 节点与连边的数据契约Nodes.vue 使用vue-d3-network组件渲染网络图其数据契约由模板绑定声明d3-network :net-nodesnodes :net-linkslinks :optionsoptions /nodes节点数组每个节点包含id、name、_size节点尺寸、_color节点颜色links连边数组每条连边由sidsource id与tidtarget id两个节点下标构成options布局与渲染选项。5.3 节点的构造逻辑已提供starter 的created()生命周期钩子已经完成了节点的构建它定义了一个包含 15 个小说角色姓名的characters数组随后遍历该数组为每个角色创建节点for (var j 0; j characters.length; j) { this.nodes.push({ id: j, name: characters[j], _size: this.getCount(characters[j]) 20, _color: # Math.floor(Math.random() * 16777215).toString(16), }); }其中getCount(name)统计某角色收到的信件数量getCount(name) { var count 0; for (var i 0; i letters.length; i) { if (letters[i].to name) { count; } } return count; }可以看到节点尺寸 收信数量 20收信越多节点越大从而在视觉上凸显社交枢纽节点颜色则是随机生成的十六进制色值。六、核心实现补全 createLinks() 生成连边这是本项目唯一需要你动手补全的代码。在 Nodes.vue 中createLinks(characters)目前是空实现createLinks(characters) { //complete this code },6.1 补全逻辑参照课程正文中的说明与 solution 目录 的参考答案补全后的实现为createLinks(characters) { //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 }); } }6.2 逐行解读外层循环遍历全部 175 封信件letters数组内层循环遍历 15 个角色姓名将信件中的from与to字符串逐一匹配到characters数组的下标分别存入f与t每次匹配完成后向this.links追加一条连边{ sid: f, tid: t }表示角色 f 给角色 t 写了一封信。由此links数组承载了整部小说的全部通信关系同一个人物反复给同一人写信时会产生多条平行连边连边密度直观反映了人物关系的亲疏与通信频率。6.3 保存并运行补全代码后保存文件开发服务器npm run serve会自动热重载。此时页面中会渲染出一幅可交互的动画网络图你可以用鼠标拖拽节点来重新排列网络布局所有连边会随之实时更新从拉拽散落的过程中更容易辨认哪些角色处于叙事网络的核心。七、网络图的渲染配置解析Nodes.vue 中的options计算属性定义了 vue-d3-network 的渲染与物理模拟参数options() { return { force: 3000, // 力导向布局的斥力强度 size: { w: 600, h: 600 }, // 画布尺寸像素 offset: { x: 0, y: 0 }, // 画布偏移 nodeLabels: true, // 显示节点名称标签 linkLabels: true, // 显示连边标签 canvas: this.canvas, // 是否使用 canvas 渲染默认 false即 SVG }; }配置项作用本工程取值force力导向布局中节点间的斥力强度数值越大节点越分散3000size画布宽高像素600 × 600offset画布原点偏移(0, 0)nodeLabels是否显示节点姓名标签truelinkLabels是否显示连边标签truecanvasfalse 用 SVG 渲染默认true 用 Canvas 渲染false配套的样式定义位于 Nodes.vue 的style块进一步增强了可读性与交互反馈默认节点填充色#dcfaf3选中节点描边#caa455悬停时节点与连边描边变为金色并加粗到 5px页面采用 PT Sans 字体、全屏布局并禁用了文本选择以贴近图形工具的使用体验。这些样式直接对应课程样式化图表以提升可读性的主题——标签、悬停高亮、颜色区分都是让图表可读的手段。八、可选的进阶改造方向在完成基础补全后你可以对照课程正文做进一步练习根据信件数量调整颜色当前节点颜色为随机值可改为按收信数量分级着色例如热力色阶让枢纽人物一目了然——这正是课程色彩会传达你不一定想表达的含义的实践体现切换 Canvas 渲染将canvas: this.canvas对应的 data 值改为true对比 SVG 与 Canvas 两种渲染模式在大节点量下的性能差异增加连边粗细根据两角色间的通信次数设置连边的stroke-width量化表达关系强度尝试其他数据集将letters.json替换为你自己的关系型数据如邮件往来、Git 提交者关系复用同一套createLinks思路即可快速生成新的网络可视化。九、小结通过本项目的完整演练你实践了课程「Making Meaningful Visualizations」一课的几项核心能力理解什么样的图表适合表达关系型数据课程中的选型表建议Show relationships → Scatter, Line, Facet, Dual Line而网络图是关系数据在交互可视化中的进阶形态、处理真实数据175 封信件完成从原始 JSON 到可视化数据模型nodes links的转换以及借助 Vue.js 组件化方式集成 D3 生态完成可交互的动画可视化。完成补全后的应用与课程 solution 目录 中的参考答案一致你还可以继续完成 assignment 中构建你自己的自定义可视化任务把本节学到的网络图技巧迁移到自己的数据上。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Data-Science-For-Beginners 第 13 课实战：用 Vue.js 与 D3 构建《危险关系》书信社交网络可视化
Data-Science-For-Beginners 第 13 课实战用 Vue.js 与 D3 构建《危险关系》书信社交网络可视化【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners本篇文章围绕 Data-Science-For-Beginners 开源课程中「Making Meaningful Visualizations制作有意义的数据可视化」一课的可视化实战项目展开。该项目以 18 世纪法语书信体小说《Les Liaisons Dangereuses危险关系》为数据源指导读者使用 Vue.js 3 与 vue-d3-network 组件将 175 封信件中的写信人—收信人关系渲染为一个可拖拽、可交互的动画社交网络图直观发现小说叙事中的核心人物枢纽。读完本文你将掌握该 starter 工程的完整运行流程、网络可视化数据模型的构造方法并理解节点大小、颜色、力导向布局等配置项的底层作用。一、项目背景为什么用一部小说来做网络可视化在 课程正文 中作者强调制作有意义的数据可视化是数据科学家的基本技能之一在绘制图表前要完成数据清洗与准备随后再决定如何最恰当地呈现数据。本章先系统讲解了六类核心议题选择合适的图表类型、避免欺骗性图表、运用色彩、提升可读性的样式设计、构建动画或 3D 图表以及构建富有创意的可视化。其中动画与 3D 图表展示一节指出当前许多优秀的数据可视化都是动画化的例如 Shirley Wu 用 D3 创作的 film flowers 等作品。为了让你亲自动手实践 D3 技术课程提供了一个 Vue.js 应用模板把《危险关系》这部书信体小说中的信件往来可视化为一个动画社交网络。《危险关系》由 Choderlos de Laclos 于 1782 年写成全书以一系列信件展开讲述了法国贵族 Valmont 子爵与 Merteuil 侯爵夫人之间相互算计、最终双双覆灭的故事。每封信都有明确的写信人from与收信人to天然构成了一张有向社交网络——通过可视化这些信件你可以看出谁才是故事中的核心枢纽人物。二、工程结构starter 模板里有什么本项目的起始模板位于 3-Data-Visualization/13-meaningful-visualizations/starter其目录结构如下starter/ ├── public/ │ ├── favicon.ico # 站点图标 │ └── index.html # Vue 挂载入口页 ├── src/ │ ├── assets/ │ │ └── letters.json # 175 封小说的信件数据from/to/date/location │ ├── components/ │ │ └── Nodes.vue # 网络图核心组件需要你补全 createLinks │ ├── App.vue # 根组件仅挂载 Nodes / │ └── main.js # Vue 应用入口 ├── babel.config.js # Babel 配置 ├── package.json # 依赖与脚本定义 └── package-lock.json各文件的职责如下App.vue根组件只做一件事——渲染Nodes子组件main.js创建 Vue 实例并挂载到#appNodes.vue本项目的核心组件包含一个空实现的createLinks()方法等待你补全letters.json全部信件数据共 1261 行、175 条记录。课程同时提供了 solution 目录 作为完整参考答案结构上与 starter 完全一致仅在Nodes.vue中补全了createLinks()的实现供你对照调试。三、环境准备与依赖解析在开始前需要先确认本机环境满足要求。参考 starter 目录的 READMENode.js 20.0.0且NPM可用在 starter 目录下执行依赖安装与启动命令。这一点在 package.json 的engines字段中有明确声明engines: { node: 20.0.0 }依赖清单从 package.json 可以看到项目的三类依赖类别依赖说明运行时依赖vue^3.5.16Vue.js 3 框架运行时依赖vue-d3-network0.1.28基于 D3 的网络图渲染库是本项目的可视化引擎运行时依赖core-js^3.6.5标准库 polyfill开发依赖vue/cli-service/vue/cli-plugin-babel/vue/cli-plugin-eslint~5.0.8Vue CLI 5 构建与代码检查工具链开发依赖babel-eslint、eslint^9.34.0、eslint-plugin-vue静态检查与修复项目还通过overrides字段对传递依赖做了安全与兼容性收敛如将qs固定为 6.14.2、braces 3.0.3、webpack-dev-server的ws固定为 8.21.0 等安装时 NPM 会自动应用这些覆盖规则。四、项目启动与构建命令在 starter 目录下依次执行以下命令即可运行项目1. 安装依赖npm install该命令会依据 package-lock.json 安装全部依赖包括 vue-d3-network并将overrides中的版本约束一并落实。2. 开发模式运行热重载npm run serve该命令实际执行vue-cli-service serve见 package.json 的 scripts 字段会启动本地开发服务器并编译项目改动源码后浏览器自动热重载。启动成功后访问终端提示的本地地址默认 http://localhost:8080即可看到网络图界面。3. 生产构建npm run build执行vue-cli-service build将项目编译并压缩为生产环境的静态资源输出到 dist 目录。4. 代码检查npm run lint执行vue-cli-service lint基于 eslintConfigplugin:vue/essentialeslint:recommendedparser 为babel-eslint检查并尽可能自动修复代码风格问题。提示如需进一步自定义 Vue CLI 构建行为如端口、代理、输出路径可参考 Vue CLI 官方配置参考文档vue-cli-service的--help及vue.config.js机制本工程未内置vue.config.js采用默认配置。五、数据模型从 175 封信到网络图5.1 信件数据格式letters.json 是全部数据的来源每条记录形如{ letter_num: 1, from: Cécile de Volanges, to: Sophie Carnay, date: 8/3/17**, location: Ursulines }字段含义字段含义letter_num信件编号1175from写信人姓名to收信人姓名date信件日期年份被作者以**隐去location写信地点部分记录缺失该字段5.2 节点与连边的数据契约Nodes.vue 使用vue-d3-network组件渲染网络图其数据契约由模板绑定声明d3-network :net-nodesnodes :net-linkslinks :optionsoptions /nodes节点数组每个节点包含id、name、_size节点尺寸、_color节点颜色links连边数组每条连边由sidsource id与tidtarget id两个节点下标构成options布局与渲染选项。5.3 节点的构造逻辑已提供starter 的created()生命周期钩子已经完成了节点的构建它定义了一个包含 15 个小说角色姓名的characters数组随后遍历该数组为每个角色创建节点for (var j 0; j characters.length; j) { this.nodes.push({ id: j, name: characters[j], _size: this.getCount(characters[j]) 20, _color: # Math.floor(Math.random() * 16777215).toString(16), }); }其中getCount(name)统计某角色收到的信件数量getCount(name) { var count 0; for (var i 0; i letters.length; i) { if (letters[i].to name) { count; } } return count; }可以看到节点尺寸 收信数量 20收信越多节点越大从而在视觉上凸显社交枢纽节点颜色则是随机生成的十六进制色值。六、核心实现补全 createLinks() 生成连边这是本项目唯一需要你动手补全的代码。在 Nodes.vue 中createLinks(characters)目前是空实现createLinks(characters) { //complete this code },6.1 补全逻辑参照课程正文中的说明与 solution 目录 的参考答案补全后的实现为createLinks(characters) { //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 }); } }6.2 逐行解读外层循环遍历全部 175 封信件letters数组内层循环遍历 15 个角色姓名将信件中的from与to字符串逐一匹配到characters数组的下标分别存入f与t每次匹配完成后向this.links追加一条连边{ sid: f, tid: t }表示角色 f 给角色 t 写了一封信。由此links数组承载了整部小说的全部通信关系同一个人物反复给同一人写信时会产生多条平行连边连边密度直观反映了人物关系的亲疏与通信频率。6.3 保存并运行补全代码后保存文件开发服务器npm run serve会自动热重载。此时页面中会渲染出一幅可交互的动画网络图你可以用鼠标拖拽节点来重新排列网络布局所有连边会随之实时更新从拉拽散落的过程中更容易辨认哪些角色处于叙事网络的核心。七、网络图的渲染配置解析Nodes.vue 中的options计算属性定义了 vue-d3-network 的渲染与物理模拟参数options() { return { force: 3000, // 力导向布局的斥力强度 size: { w: 600, h: 600 }, // 画布尺寸像素 offset: { x: 0, y: 0 }, // 画布偏移 nodeLabels: true, // 显示节点名称标签 linkLabels: true, // 显示连边标签 canvas: this.canvas, // 是否使用 canvas 渲染默认 false即 SVG }; }配置项作用本工程取值force力导向布局中节点间的斥力强度数值越大节点越分散3000size画布宽高像素600 × 600offset画布原点偏移(0, 0)nodeLabels是否显示节点姓名标签truelinkLabels是否显示连边标签truecanvasfalse 用 SVG 渲染默认true 用 Canvas 渲染false配套的样式定义位于 Nodes.vue 的style块进一步增强了可读性与交互反馈默认节点填充色#dcfaf3选中节点描边#caa455悬停时节点与连边描边变为金色并加粗到 5px页面采用 PT Sans 字体、全屏布局并禁用了文本选择以贴近图形工具的使用体验。这些样式直接对应课程样式化图表以提升可读性的主题——标签、悬停高亮、颜色区分都是让图表可读的手段。八、可选的进阶改造方向在完成基础补全后你可以对照课程正文做进一步练习根据信件数量调整颜色当前节点颜色为随机值可改为按收信数量分级着色例如热力色阶让枢纽人物一目了然——这正是课程色彩会传达你不一定想表达的含义的实践体现切换 Canvas 渲染将canvas: this.canvas对应的 data 值改为true对比 SVG 与 Canvas 两种渲染模式在大节点量下的性能差异增加连边粗细根据两角色间的通信次数设置连边的stroke-width量化表达关系强度尝试其他数据集将letters.json替换为你自己的关系型数据如邮件往来、Git 提交者关系复用同一套createLinks思路即可快速生成新的网络可视化。九、小结通过本项目的完整演练你实践了课程「Making Meaningful Visualizations」一课的几项核心能力理解什么样的图表适合表达关系型数据课程中的选型表建议Show relationships → Scatter, Line, Facet, Dual Line而网络图是关系数据在交互可视化中的进阶形态、处理真实数据175 封信件完成从原始 JSON 到可视化数据模型nodes links的转换以及借助 Vue.js 组件化方式集成 D3 生态完成可交互的动画可视化。完成补全后的应用与课程 solution 目录 中的参考答案一致你还可以继续完成 assignment 中构建你自己的自定义可视化任务把本节学到的网络图技巧迁移到自己的数据上。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考