# 数据可视化笔记
# 好看的图表库
# 手绘风
https://github.com/timqian/chart.xkcd
https://github.com/jwilber/roughViz
# cube
与数据库相关 ?
https://github.com/cube-js/cube.js
# Canvas
https://github.com/niklasvh/html2canvas https://github.com/fabricjs/fabric.js
# 学习材料
mozilla 文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial 廖雪峰 canvas: https://www.liaoxuefeng.com/wiki/1022910821149312/1023022423592576
https://segmentfault.com/a/1190000013747292 https://www.cnblogs.com/fly_dragon/p/10416034.html
# 基础
Canvas 是 HTML5 新增的组件,它就像一块幕布,可以用 JavaScript 在上面绘制各种图表、动画等。
一个 Canvas 定义了一个指定尺寸的矩形框,在这个范围内我们可以随意绘制:
<canvas id="test-canvas" width="300" height="200"></canvas>
# D3
D3 的全称是 Data-Driven Document 直译为“数据驱动的文档”, 文档指的就是 DOM, 即文档对象模型。D3 允许用户绑定任意数据到 DOM, 然后根据数据来操作文档,创建可交互式的图表。
# D3 的优势
- 数据能够与 DOM 绑定在一起。 D3 能够将数据与 DOM 绑定在一起,使得数据与图形成为一个整体,即图形中有数据、数据中有图形。
使用 D3 之前,首先需要了解“数据驱动”的概念。
数据比程序逻辑更用户容易驾驭,所以应该尽可能把设计的复杂度从程序代码转移到数据。D3 的关注点不在于表现,而在于数据转化(Transformation, not Representation),D3 将重心放在了数据与图形之间的绑定上。
# SVG
# 为什么使用 SVG 可以提升网页性能和体验
# 前端的数据可视化类库
echart vue-echart echarts-gl webgl antv d3.js Highcharts iDataCharts
https://github.com/antvis
# 平台
- DataHunter
- DataV
# for react
- echarts-for-react https://github.com/hustcc/echarts-for-react
- Recharts https://github.com/recharts
- React-vis (uber) https://uber.github.io/react-vis/
# for all
- ApexCharts https://github.com/apexcharts
- Chart.js https://github.com/chartjs/Chart.js
HighCharts+DataTables
ailibaba: DataV,AntV、360、帆软
D3、AntV、Precessing、Google Chart
Kibana
# 2. 可视化分析的步骤
- 找出问题。 当前问题,通过观察当前产品状况,我们会提出若干问题,思考分析问题的思路
- 数据收集。 数据来源,数据获取 & 清洗 & 整理
- 可视化展现。 可视化展现 & 数据分析。 根因树梳理,合适的图表 + 辅助属性展示, 重点突出便于审视数据, 进一步深入分析数据得出结论。
- 解决问题。 根据分析结论得出解决问题的策略,再次埋点准备下一轮的分析。
# 3. 可视化分析应用思路
数据类型分类&应用效果分类 在日常的数据分析中,我们会遇到以下 3 种分类的数据,不同的数据类型,可以用来强调和区分的效果,参考如下:
分类数据 比如:付费用户,非付费用户 此类数据可以用:位置,颜色,形状进行区分
次序数据 比如:优秀,良好,差 此类数据可以用:位置,大小,颜色,颜色深度,形状进行区分
量化数据 付费额度:1-10 元,10 元-50 元。。。。。。 此类数据可以用:位置,长度,大小,颜色,颜色深度,方向进行区分 在进行不同的数据对比时,我们需要思考如何更好用到上述的应用效果,进行更明晰的视觉展示
可视化图表&图形选择 我们常用的基本统计图包括:条形,饼图,折线
其他统计图:
堆积,面积(简单的数量比较和变化趋势) 两个维度的散点分布 树型关系
延伸的散点图(简单的点,扩展成图形,分布在散点中),图形或者气泡 堆积图,面积图(用百分比更明晰对比) 复杂的多环饼图
# 可视化的机遇和挑战
基于市场需求和竞品分析,我们从以下三个方面分别分析了产品的机会和突破点:
- 可视化:数据和场景 3D 化,满足更多维度的数据呈现,支持云+本地实时大数据呈现能力;
- 产品化:场景、组件、数据、图表全部实现可云端动态更新和配置的模块化,降低维护成本、提高服用率、缩短项目周期,无缝打包接入业务数据,提供丰富可自定义的可扩展接口;
- 大数据+AI:基于公司多领域多业务线的大数据融合以及 AI 能力提供丰富的基于时间、空间、数据的预测预警、统计表达能力。
# 文章
https://segmentfault.com/a/1190000018646425
# 数据可视化过程
可以分为下面几个步骤:
定义要解决问题
确定要展示的数据和数据结构
确定要展示的数据的维度(字段)
确定使用的图表类型 5.确定图表的交互
定义问题首先明确数据可视化是要让用户看懂数据,理解数据。所以开始数据可视化前一定要定义通要解决的问题。例如:我想看过去两周销售额的变化,是增长了还是下跌了,什么原因导致的?你可以从 趋势、对比、分布、流程、时序、空间、关联性等角度来定义自己要解决的问题。
确定要展示的数据进行数据可视化首先要有数据,由于画布大小的限制,过量的数据不能够在直接显示出来,所以要确定展示的数据:
- 我要展示的数据是否已经加工好,是否存在空值?
- 是列表数据还是树形数据?
- 数据的规模有多大?
- 是否要对数据进行聚合,是否要分层展示数据?
- 如何加载到页面,是否需要在前端对数据处理?
确定要显示的数据维度进行可视化时要对字段进行选择,选择不同的字段在后面环节中选择适合的图表类型也不同。
确定使用的图表类型 有非常多的图表类型可以使用,但是要根据要解决的问题、数据的结构、选择的数据维度来确定要显示的图表类型
# 技术选型
说到数据可视化,可谓是百花齐放,一时之间前端界出现了琳琅满目的第三方库: Highcharts , Echarts , Chart.js , D3.js 等。但是,万变不离其宗。
总的来说,所有的第三方库都是基于这两种浏览器图形渲染技术实现的: Canvas 和 SVG 。
SVG | Canvas |
---|---|
不依赖分辨率 | 依赖分辨率 |
支持事件处理器 | 不支持事件处理器 |
最适合带有大型渲染区域的应用程序(如地图) | 弱的文本渲染能力 |
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) | 能够以 .png 或 .jpg 格式保存结果图像 |
不适合游戏应用 | 最适合图像密集型的游戏 |
可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。 | 一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景都需要重新绘制。 |
# 开源平台
- kibana
- grafana