数据可视化设计理论与技术实现

1、数据可视化设计理论与技术实现可视化编码基础数据开发语言WEB开发语言可视化前端工具可视化方法和演练点、线、面数据的可视化可视化开发演练04可视化概述什么是数据可视化为什么要做数据可视化可视化案例展示01可视化设计方法可视化设计原则可视化设计流程合理的可视化0203目 录数据可视化概述一夜跑遍全球，圣诞老人的驯鹿要多快？如果圣诞老人希望用一晚时间跑遍全球每家每户的话，驯鹿的奔跑速度必须达到 1046 千米/秒全世界工作最高效率的人是谁？圣诞老人和他的驯鹿到底是多快？如果你对这个速度没什么概念，我们可以比较一下，人类步行速度 1米/秒数据可视化概述数据可视化概述数据可视化的目的就是直观地展现数据数

2、据可视化是为了更好的分析和理解信息数据可视化能帮助传播和验证观点，交互探索未知的信息数据可视化案例数据可视化案例展示数据可视化案例展示数据可视化案例人机交互理论视错觉、视觉疲劳 文字阅读、人的关注可视化设计原则减轻用户获取信息的成本数据可视化设计方法眼见不为实人们感觉到的视觉中心会比实际的中心稍微偏上一些。眼见不为实物体的组合方式将影响观察者的感知方式莱亚错觉：人们总会夸大水平线而缩短垂直线。人们怎么阅读文字1、页面上文字形状被人眼感知2、文字被编码成相关的内部语言3、语言在人脑中被解释醒目人类阅读文字时经历三个阶段：如何选择配色如果你负责粉刷一间婴儿室，你会选择大红色么？为什么核武器的警告标

3、志是黄底黑纹？温 暖告 警热 情错 误平 静 没有食欲我们离不开的电子设备使用标题让重点突出可视化设计方法一杯咖啡可提高工作效率分类显示的信息帮助捕捉到所需的信息可视化设计方法合理设计布局在做可视化设计时，整体布局非常重要。可以通过丰富的图表、酷炫的动效、颜色的对比、鲜明的层次来创造出整体富有科技感、空间感、紧张感的视觉感受。围绕式区块式叠加式合理设计布局区块式：多用于同一主题下不同子主题的展现，子主题之间没有主次之分式。合理设计布局围绕式：主要针对主题下某一维度的的重点展现，其余部分都是对其的补充说明。合理设计布局叠加式：主要对于业务场景的还原，往往通过GIS地图或者室内平面图进行表达。合理

4、选择图表图表类型适用数据柱状图适用二维数据，中小规模的数据集。可以用于表现数据之间的差异，辨识效果非常好。 分类数据也可以设置颜色增强分类的区分度，建议不超过 12 条数据。饼图适合二维数据，特别是需要展示某个部分占整体比重的时候，应该用饼图。折线图适用于较大的二维数据集，尤其是那些趋势比单个数据点更重要的数据集。散点图适用于较大数据量的二维或三维数据集，可用于反映数据集之间的关联关系。 对每个点加上颜色或文字标记来区分，可以扩展展示数据的第三维。气泡图适用于三维及三维以上数据集。气泡图是散点图的一种变体，通过每个点的面积大小，反映 第三维。如果为气泡加上不同颜色（或文字标签），气泡图就可用来

5、表达四维数据。雷达图适用于多维数据（四维以上），且每个维度可以排序，但适合数据量不多的情况， 建议最多展现6个数据点。合理选择图表图表类型适用数据漏斗图适用于业务流程比较规范、周期长、环节多的单流程单向分析，通过漏斗各环节业务数据的 比较能够直观地发现和说明问题所在的环节，进而做出决策。漏斗图用梯形面积表示某个环 节业务量与上一个环节之间的差异。仪表盘适合区间类数据，通常用于表示数据在某一个分类（时间点）上的最大值和最小值，能以直 观的表现出某个指标的进度或实际情况。矩形树图矩形树图适合展现具有层级关系的数据，能够直观体现同级之间的比较。一个Tree状结构转 化为平面空间矩形的状态，就像一张地

6、图，指引我们发现探索数据背后的故事。地图显示地理区域上的数据。 使用地图作为背景，通过图形的位置来表现数据的地理位置， 通 常来展示数据在不同地理区域上的分布情况。地图组合其他图表可以将上述图表与地图进行组合。地图常作为底图，与热力图，流向图等组合表现更多维度 的数据，是比较常用于大屏展示的图表类型。分析目标：出发点和目标数据：数据类型数据结构数据维度行业领域行业特点侧重点0102处理数据清洗和规范去除脏数据敏感信息统一数据结构数据分析数据统计数据挖掘展示设计选定适合的图表类型整体的设计方案03生成根据之前的分析和处理， 通过编码和开发，生成需 要展示的结果。可视化设计方法R语言R 经常被称为

7、是“统计人员为统计人员开发的一种语言”。如果你需要深奥的统计模型用于计算，都 可以用的到它。数据开发语言Python语言Python在学术界当中一直很流行，尤其是在自然语言处理（NLP）等领域。JAVA语言Java 是大数据项目中的“一等公民”，有广泛的程序员群众基础。开发语言Web应用被分类归为分布式应用，一般是客户端服务器结构，所以我们有一部分的代码运行在客户 端，另一部分代码运行在服务器。那些在客户端上的应用就是前端，通常指的就是我们的浏览器。最常用于前端开发的技术是HTML+CSS+JavaScript，前端开发人员通常使用这些技术的组合开发应用的前端。后端开发语言有更多的选择：PHP

8、、JAVA、JavaScript、Ruby、PythonWEB开发语言开发框架框架可以帮助你简化开发的工作，有很多现成的代码库，它提供给你Web应用的结构，让你的编程工 作更简单更快捷。如果你要成为职业的Web开发者，你就必须要精通至少一个框架，加速你的Web开发。框架有很多种类，有通用型的解决方案，也有针对具体问题的方案。可视化前端框架ECharts/一款免费开源的数据可视化产品，给用户提供直观、生动、可交互和可个性化定制的数据可视化图 表。Echarts 上手简单。其具有的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，帮助用 户在对数据挖掘、整合时大幅提高效率。同时，Echart

9、s 提供了丰富的图表类型，除了常见的折柱饼，还 支持地图、力导向图、treemap、热力图、树图等等。它还支持任意维度的堆积和多图表混合展现。可视化前端框架D3/目前 Web 端评价最高的 Javascript 可视化工具库。D3 能够向用户提供大量线性图和条形图之外的 复杂图表样式，例如树形图、圆形集群和单词云等等。它的优点是实例丰富，易于实现调试数据同时能够 通过扩展实现任何想到的数据可视化效果，缺点是学习门槛比较高。与 jQuery 类似，D3 直接对 DOM 进行操作，这是它与其它可视化工具的主要区别所在：它会设置 单独的对象以及功能集，并通过标准 API 进行 DOM 调用。可视化前端框架HighCharts/能够很便捷地在 Web 网站或是 Web 应用程序中添加可交互图表，并可免费用于个人学习、个人网站 和其他非商业用途，商业使用需要授权。Leaflet/能可以同时