数据可视化定义
- 数据可视化是将复杂数据转换为图形或视觉表示的过程，涉及数据的收集、处理、分析和呈现。
- 它通过视觉元素如颜色、形状和动画，增强了数据的表现力，使得数据分析更加直观和易于理解。
为什么数据可视化重要
在信息爆炸的时代，数据可视化帮助我们从海量数据中提取有价值的信息，支持决策制定，提高沟通效率，并增强数据的吸引力和说服力。
使用场景
- 大数据和实时分析的挑战
- 增强现实和虚拟现实的融合（AR 和 VR）
- 人工智能和机器学习的应用
- 广泛应用于教育、科研、医疗和政府决策等多个领域
常见的数据类型及特点:
定量数据（Quantitative Data）
- 连续数据（Continuous Data）：可以在某个范围内取任意值的数据，如温度、价格等。
- 特点：可以进行加减乘除等数学运算，适合用折线图、曲线图等展示趋势。
- 离散数据（Discrete Data）：只能在指定的离散点上取值的数据，如人数、商品数量等。
- 特点：通常为计数数据，适合用条形图、饼图等展示比较。
定性数据（Qualitative Data）
- 序数数据（Ordinal Data）：数据有固定的顺序或等级，但相邻数据之间的具体“距离”未知，如教育程度（小学、中学、大学）。
- 特点：可以表示等级或顺序，适合用条形图（带有顺序的条形）展示等级差异。
- 名义数据（Nominal Data）：数据仅代表分类，没有固定的顺序，如性别、国籍等。
- 特点：用于分类，适合用饼图、条形图等展示各类别的分布情况。
时间序列数据（Time Series Data）
- 时间序列数据：是在连续时间点上收集的数据，如股票价格、气温记录等。
- 特点：展示随时间变化的趋势，适合用折线图、面积图等。
地理空间数据（Geospatial Data）
- 地理空间数据：与地理位置相关的数据，如地图上的点、线、面等。
- 特点：需要在地理空间上展示，适合用地图、热力图等。
文本数据（Textual Data）
- 文本数据：是以文字形式存在的数据，如用户评论、新闻文章等。
- 特点：包含丰富的语义信息，适合用词云、文本流等可视化手段展示关键词或主题。
图像数据（Image Data）
- 图像数据：是以图像形式存在的数据，如卫星图像、医学影像等。
- 特点：包含丰富的视觉信息，适合用图像热图、多图像比较等可视化手段展示。
网络数据（Network Data）
- 网络数据：表示实体间关系的图数据，如社交网络、交通网络等。
- 特点：展示实体间的连接和交互，适合用网络图、树状图等。
层次数据（Hierarchical Data）
- 层次数据：具有层级或嵌套关系的数据，如组织结构图、文件系统等。
- 特点：展示数据的层级结构，适合用树状图、旭日图等。
常用的可视化库和框架：
Canvas
- 位图：Canvas 创建的是
位图，这意味着它在画布上绘制的图形是像素级的，可以进行复杂的像素操作。 - 性能：
适合处理大量的图形和动画，特别是在游戏开发和实时图形处理中。 - 灵活性：提供了一个低级的 API，开发者有更大的控制自由度，但需要手动处理图形变换和压缩。
- 不保留 DOM：
Canvas 元素不保留绘制图形的 DOM 表示，因此不利于搜索引擎优化（SEO）和辅助技术。
SVG
- 矢量图：SVG 使用
XML 格式定义图形，它们是矢量的，可以无限放大而不失真。 - 交互性：
SVG 图形是 DOM 的一部分，可以很容易地添加事件监听器，适合创建交互式图形和动画。 - 样式和脚本：可以很容易地使用 CSS 和 JavaScript 来操作样式和行为。
- 适合文本和图标：由于其矢量特性，
SVG 非常适合渲染文本、图标和复杂的路径。
WebGL
- 3D 图形：WebGL 允许在网页上
渲染交互式的 3D 图形。 - 硬件加速：利用 GPU
硬件加速，提供高性能的图形渲染。 - 复杂场景：适合创建复杂的 3D 场景和实时动画。
- 学习曲线：相对于 Canvas 和 SVG，WebGL 有更高的学习难度，因为它需要一定的图形编程知识。
D3.js
数据驱动：D3 是一个基于数据的可视化库，它允许将数据绑定到 DOM 元素并使用数据来驱动可视化。- 灵活性：D3 提供了大量的工具和方法，可以创建几乎任何类型的可视化。
- 集成：可以与 SVG、Canvas 甚至 HTML 表格一起使用来创建图形和可视化。
- 社区和生态系统：拥有庞大的社区和丰富的插件生态系统。
ZRender
- 轻量级：ZRender 是一个轻量级的
Canvas 渲染库，专注于 2D 图形的高性能渲染。 - 专为 ECharts 设计：虽然可以独立使用，但主要是为 ECharts 提供渲染支持。
- 易于集成：提供了简单的 API，易于与其他库或框架集成。
Three.js
- 简化 3D：Three.js 提供了一个
简化的 API，使得在网页上创建和展示 3D 内容变得更加容易。 - 广泛的功能：
支持常见的 3D 图形需求，如光照、纹理、动画等。 - 社区和资源：拥有活跃的社区和大量的在线资源，包括模型库、教程和插件。
- 与 WebGL 解耦：Three.js 抽象了 WebGL 的复杂性，使得开发者不需要深入了解 WebGL 也能创建 3D 应用。
ECharts
丰富的图表类型：提供了常见的图表类型，如折线图、柱状图、饼图、散点图、雷达图、地图、K 线图、热力图、仪表盘等。- 交互性：支持图表的交互操作，如工具提示、数据缩放、拖拽、点击等。
- 3D 图表：支持 3D 柱状图、3D 散点图、3D 地图等 3D 效果。
- 主题定制：允许用户定制图表的主题，包括颜色、字体、标题等。
- 数据驱动：强调数据驱动的设计理念，易于数据绑定和更新。
- 集成：可以与各种前端框架和库集成，如 React、Vue、Angular 等。
AntV
G2：AntV 的一个核心组件，是一个基于可视化编码的图形语法的 2D 图表库。G6：AntV 提供的图可视化引擎，专注于图相关的数据可视化，如流程图、网络图等。F2：是一个专注于移动图表的小型化库，适用于移动应用开发。L7：AntV 的地理空间数据可视化库，用于创建地图和地理数据分析。X6：是一个图编辑和图绘制领域的前端解决方案，支持图的编辑、布局和交互。- 可扩展性：AntV 提供了一套可扩展的图表和可视化解决方案，可以根据需要选择不同的组件。
