# 数据可视化笔记

# 好看的图表库

# 手绘风

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