# 数据可视化笔记

# 好看的图表库

# 手绘风

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 的优势

  1. 数据能够与 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. 可视化分析的步骤

  1. 找出问题。 当前问题,通过观察当前产品状况,我们会提出若干问题,思考分析问题的思路
  2. 数据收集。 数据来源,数据获取 & 清洗 & 整理
  3. 可视化展现。 可视化展现 & 数据分析。 根因树梳理,合适的图表 + 辅助属性展示, 重点突出便于审视数据, 进一步深入分析数据得出结论。
  4. 解决问题。 根据分析结论得出解决问题的策略,再次埋点准备下一轮的分析。

# 3. 可视化分析应用思路

数据类型分类&应用效果分类 在日常的数据分析中,我们会遇到以下 3 种分类的数据,不同的数据类型,可以用来强调和区分的效果,参考如下:

  1. 分类数据 比如:付费用户,非付费用户 此类数据可以用:位置,颜色,形状进行区分

  2. 次序数据 比如:优秀,良好,差 此类数据可以用:位置,大小,颜色,颜色深度,形状进行区分

  3. 量化数据 付费额度:1-10 元,10 元-50 元。。。。。。 此类数据可以用:位置,长度,大小,颜色,颜色深度,方向进行区分 在进行不同的数据对比时,我们需要思考如何更好用到上述的应用效果,进行更明晰的视觉展示

可视化图表&图形选择 我们常用的基本统计图包括:条形,饼图,折线

其他统计图:

堆积,面积(简单的数量比较和变化趋势) 两个维度的散点分布 树型关系

延伸的散点图(简单的点,扩展成图形,分布在散点中),图形或者气泡 堆积图,面积图(用百分比更明晰对比) 复杂的多环饼图

# 可视化的机遇和挑战

基于市场需求和竞品分析,我们从以下三个方面分别分析了产品的机会和突破点:

  1. 可视化:数据和场景 3D 化,满足更多维度的数据呈现,支持云+本地实时大数据呈现能力;
  2. 产品化:场景、组件、数据、图表全部实现可云端动态更新和配置的模块化,降低维护成本、提高服用率、缩短项目周期,无缝打包接入业务数据,提供丰富可自定义的可扩展接口;
  3. 大数据+AI:基于公司多领域多业务线的大数据融合以及 AI 能力提供丰富的基于时间、空间、数据的预测预警、统计表达能力。

# 文章

https://segmentfault.com/a/1190000018646425

# 数据可视化过程

可以分为下面几个步骤:

  1. 定义要解决问题

  2. 确定要展示的数据和数据结构

  3. 确定要展示的数据的维度(字段)

  4. 确定使用的图表类型 5.确定图表的交互

  5. 定义问题首先明确数据可视化是要让用户看懂数据,理解数据。所以开始数据可视化前一定要定义通要解决的问题。例如:我想看过去两周销售额的变化,是增长了还是下跌了,什么原因导致的?你可以从 趋势、对比、分布、流程、时序、空间、关联性等角度来定义自己要解决的问题。

  6. 确定要展示的数据进行数据可视化首先要有数据,由于画布大小的限制,过量的数据不能够在直接显示出来,所以要确定展示的数据:

    1. 我要展示的数据是否已经加工好,是否存在空值?
    2. 是列表数据还是树形数据?
    3. 数据的规模有多大?
    4. 是否要对数据进行聚合,是否要分层展示数据?
    5. 如何加载到页面,是否需要在前端对数据处理?
  7. 确定要显示的数据维度进行可视化时要对字段进行选择,选择不同的字段在后面环节中选择适合的图表类型也不同。

  8. 确定使用的图表类型 有非常多的图表类型可以使用,但是要根据要解决的问题、数据的结构、选择的数据维度来确定要显示的图表类型

# 技术选型

说到数据可视化,可谓是百花齐放,一时之间前端界出现了琳琅满目的第三方库: Highcharts , Echarts , Chart.js , D3.js 等。但是,万变不离其宗。

总的来说,所有的第三方库都是基于这两种浏览器图形渲染技术实现的: Canvas 和 SVG 。

SVG Canvas
不依赖分辨率 依赖分辨率
支持事件处理器 不支持事件处理器
最适合带有大型渲染区域的应用程序(如地图) 弱的文本渲染能力
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 能够以 .png 或 .jpg 格式保存结果图像
不适合游戏应用 最适合图像密集型的游戏
可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。 一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景都需要重新绘制。

# 开源平台

  • kibana
  • grafana