解读千万级关系网络下的数据探寻可视化技术

1. 第十六届 D 2 前端技术论坛千万级节点网络下的可视分析技术阿里云智能-计算平台事业部-DataWorks-刘东奇

2. DataWorks中的图分析场景 • 阿里云飞天大数据平台是阿里巴巴10年大数据建设最佳实践的结晶，每天有数万名数据和算法工程师正在使用飞天大数据平台，承载了阿里巴巴99%的数据业务构建。同时广泛应用于城市大脑、数字政府、电力、金融、新零售、智能制造、智慧农业等各个领域的大数据建设。 DataWorks. 作为整个飞天大数据的重要组成部分，它基于 MaxCompute/EMR/MC-Hologres等大数据计算引擎，为客户提供专业高效、安全可靠的一站式大数据开发与治理平台。 - 业务编排 - 流程调度 - 关系分析执行计划算子血缘表血缘 • - 数据血缘血缘算子编排维度建模指标编排关系建模数据源编排模型编排字段映射服务编排集群调度节点调度关系分析

3. 业务数据业务系统1 系统日志业务系统2 … 业务系统n 用户访问点击日志 … 通用大数据加工流程下游节点T10数据无产出，如何快速定位到是T6节点执行失败造成的？ T1: 数据同步 T3: 数据抽取 T5: 数据转换 T2: 实时同步 T6: 数据清洗 T7: 数据过滤 T8: 数据装载 T9: 数据开发 T4: 数据抽取根据调度节点依赖关系反向查找, 定位问题节点使用DAGRE布局 + 视觉通道映射（颜色）技术绘制节点依赖关系 T10: 数据分析

4. 2 糟糕的布局策略 1.a 1.b 数据失真 3 视觉通道映射\有限的信息密度\循环依赖…… 1.a 画布节点依赖关系 1.b 真实数据无节点无任何依赖; 2. 下游节点过多，无法一屏展示; 3. 节点区分度不高、节点数过多、关系复杂溯源难度高真实场景：使用DAGRE布局 + 视觉通道映射（颜色）技术绘制节点依赖关系

5. 看不见的 • 数据庞大：节点数超过千万 • 同层宽度：同层节点数多，目前最多十万+ • 关系复杂：依赖复杂，跨周期、小时依赖等真实场景：使用DAGRE布局 + 视觉通道映射（颜色）技术绘制节点依赖关系

6. 离线渲染技术局部渲染技术双引擎切换能力服务端渲染（PlanUml) Neo4J Bloom的双引擎机制：追求极致性能的@antv/G6引擎： • 全局视角采用GPU Powered Rendering能力，展示更多数据 • 局部视角采用Canvas Rendering能力，展现更丰富的细节 1. 支持局部渲染技术，只渲染可视窗口内信息 2. 使用脏矩阵渲染，在每一帧中进行最小区域的重绘 3. 使用 R-tree 空间索引加速区域查询 Offline Canvas 从渲染技术出发，提升节点渲染数量万级渲染、千级交互

7. 图简化技术点聚合（Node Aggregation）的目的是提取出大规模数据不同“粒度” 的图，前端首先展示最粗粒度的图，终端用户通过放大、下钻的方式查看更细粒度的图/子图边剪枝（edge bundling）通过反向删除算法、Prim算法构建最小生成树，通过只保留关键路径减少视觉混乱 “毛团”现象导致关系网络可读性下降过渡追求渲染能力，导致的“毛团”现象边绑定（Edge Bundling）边缘捆绑技术被设计为在视觉上将相似的边缘捆绑在一起，以减少图中的视觉杂乱。这种捆绑可以帮助突出重要的边缘模式，并且常常使人更容易发现有趣的连接或重要的数据

8. 可视分析组成数据可视化流程 • 传统的可视化：大多立足于先验知识，解决一些具体且可预期的任务时有一定的优势。 • 可视分析：将「人」这个独特因素融入进了数据分析的流程中。通过人机交互技术，将更多的重点放在了人的意会与推理上，让人在分析任务中参与了主要的分析与决策过程。有了可视分析的支持，我们就能够在很多单纯依赖算法分析无法解决问题的场景中，进行可视知识发现，获取有价值的信息。可视化 vs 可视分析

9. • • • • • • • • • 查看节点的上下游依赖定位上游的阻塞节点查看上游节点的产出判断节点对下游的影响查看业务团队的节点影响范围暂停节点运行重新运行节点问题节点重新执行 … 加载节点查找关联节点布局节点定位节点聚合可视分析技术从用户需求看产品交互执行操作交互流程用户诉求视觉映射定位目标节点过滤视角切换视图关联节点框选

10. 数据可视化数据计算数据建模数据加载业务系统查找视觉映射数据查询过滤转换数据渲染分层网络图数据库图数据库提供百亿级节点存储/查询/计算聚合匹配操作执行多视图视图交互节点定位下游展开上游展开节点高亮视图关联节点框选平移缩放节点聚合节点拆分业务响应暂停重试内容推理下线通知恢复可视分析技术架构洞察基于G6引擎能够实现千级节点渲染/交互用户视图解读

11. 有限的视觉通道，以及表现力排序位置色调空间分割可视分析 – 视觉映射视觉多通技术实现多可视化信息堆叠亮度/饱和度包含多通道整合关联

12. 可视分析 – 视觉映射

13. 分层布局策略型方程优化力导布局图可视化常见布局策略可视分析– 通用布局策略局限性业务场景分析目的技术方案套现网络/闭环网络看清楚是否存在环 •圆形布局 circle •力导布局 force 分层网络/流程网络看清楚层次 •有向分层 dagre •树形力导 force-tree 无序网络数据看清楚点和边，不要点线交叉 •力导布局 force •fruchterman 暴涨网络 / 坍缩网络关注中心位置的情况 •同心圆布局 cencentric •迳向布局 radial 团伙聚集网络关系聚集，分类现象 •同心圆布局 cencentric •聚类布局 node combo •Circle packing 多边有向网络看清楚边的方向 •弦图布局 arc 常见布局策略应用场景

14. 布局核心 • 清晰展示节点信息 • 清晰表示依赖关系 • 帮助用户快速分析问题基于Sankey布局构建的分层网络 • 图宽特征下造成布局浪费 • Sankey布局缺陷，布局中不考虑边交叉问题。 • 线的路由算法，合并线后丢失方向信息。可视分析– 通用布局策略局限性

15. 子图嵌入布局叠加 DAGRE + GRID 前置布局 + 力导布局 + 节点压实 + 网格对齐 + 网格扩容子图融合智能布局可视分析 – 布局融合技术渐进布局

16. 分组设计 • 同层节点置于一个分组中，支持换行翻页。 • 提供聚合工具，帮助用户快速分析。 • 通过辅助视图，展示全量节点。可视分析– 通过分组设计解决位宽问题

17. 分层网络 + 分组设计 1. 节点分层：根据依赖关系进行分层，采用紧致树分层算法。 2. 虚拟分组：判断每层节点数量是否大于MAX_LEVEL，是则生成虚拟分组节点。 3. 节点布局：虚拟节点以及正常节点，进行Dagre布局。 4. 分组内嵌：根据虚拟节点的坐标，转换层内节点的相对坐标。可视分析 – 增加分组策略后的布局算法

18. 节点分层可视分析 – 增加分组策略后的布局算法

19. 虚拟分组 W"#$ℎ = '(#)*"#$ℎ + '(#),-. × 0(1234 + 2 × ,6(2.7-##"48 9)"8ℎ$ = '(#)9)"8ℎ$ + '(#),-. × '(#)'23 ÷ 0(1234 + 2 × ,6(2.7-##"48 可视分析 – 增加分组策略后的布局算法

20. Dagre布局可视分析 – 增加分组策略后的布局算法

21. 节点内嵌 !"#$% = '(($)% + +)",-% !"#$. = '(($). + +)",-. 可视分析 – 增加分组策略后的布局算法

22. 布线策略优化 • 替换为Dagre布局，尽量避免边交叉 • 线的路由算法，拐点路由计算 • 直角改为圆角，增加方向性区分可视分析–布线策略优化

23. 布线策略优化 1. 层级分割：根据所有外部节点（去除内部节点）的y坐标，进行分组，划分层级。 2. 边界计算：根据该层级所有节点的y坐标已经高度，计算出层级区域的界限。 3. 拐点确认：根据层级界限，以及设置的 gap，计算出层级之间拐点的Y坐标。 4. 绘制曲线：所有曲线的拐点，按照曲线所处层级的拐点Y坐标绘制。如果是跨多个层级的边，按照最后一个层级的拐点绘制（原因：拐点离终点越近，越容易跟踪线的来源）。可视分析 – 布线策略优化

24. 可视分析– 布局效果对比原始布局 Dagre + Grid布局融合内容聚合节点翻页

25. 分组分析可视分析– 分析方法地理空间分析时序分析算法分析

26. • 背景： • 用户在什么情况下会点击dag的展开上下游，对应用户想要解决的问题是什么？ • 业务猜想验证： • 展开下游。用户会针对（自己owner）进行展开下游操作，以判断节点对下游的影响 • 展开上游。用户会针对（错误/未运行）节点进行展开上游操作，去定位上游的阻塞节点查看上游可视分析– 场景化分析能力查看下游

27. • 上游链路分析。针对未运行实例展示阻塞链路 • 下游影响分析。查看节点的下游影响面，提供责任人、项目等多维度视角。可视分析– 场景化分析能力

28. 可视分析– 完整分析链路

29. 可视分析– 图分析解决方案白皮书

30. Thanks