数据可视化

403 阅读8分钟

imweb.io/topic/5ba07…

2050.itdks.com/Course/deta…

概念:

给出一组数据 [10,80,40,100,30,20,50],如果我们想要看出这组数据的大小关系,单看数据显然不够直观。那么我们可以将它转换为一种简单易懂的图表的形式。

所谓可视化分析,就是将大量的数据用图表形式展现出来,并分析其中的规律,得到一些分析结果,这就是所谓的可视分析。

这样我们就可以更加直观的获取数据所传递给我们的信息。这个过程就叫做数据可视化。

d3和eCharts区别:

  • D3.js的全称是Data-Driven Documents
  • D3是一种偏函数式编程的方式,这也是他比较复杂的地方,正因为他比较灵活,所以它所涉及的东西比较底层,学习成本就比较大。
  • echarts其实也是一个数据可视化的工具,它和D3的作用很类似。echarts是封装好的,所以我们使用起来很方便,只用填写他的配置项就可以使用,但也恰恰因为它被封装好的缘故,所以灵活性较差,我们只能修改它所存在的配置项。
  • 他们之间最大的不同之处就在于echarts它是使用canvas来绘制图形的,而D3是通过Svg来绘制图形的。
  • svg和canvas:这两者的不同之处在于,svg可以操作dom支持事件处理器,想要实现某个操作,直接调用相关的方法实现效果就行,他那个里面存在链式语法,这个和jQuery的链式调用差不多,简单易读。canvas不支持事件处理器所以只能展示数据,而不能修改。
  1. D3使用svg绘制图形,echarts使用canvas绘制图形

  2. D3兼容IE9及以上主流浏览器,echarts兼容IE6及以上主流浏览器

  3. D3使用灵活,学习成本大,echarts封装好的,使用简单,不够灵活

  4. 适用场景不同:

    因为D3支持事件处理器可以操作dom,所以如果在项目开发中如果有较多用户交互的场景,可以使用D3。如果项目中一般没有用户交互的场景,我们只需要将图表展示给用户看,而不需要更改,可以使用echarts。因为D3它展示的每一个数据都是一个标签,所以当数据发生改变的时候图表会重新渲染,会不停的操作dom,这对性能的消耗是非常大的。

选择 Canvas 还是 SVG

HTML5 提供了 Canvas 和 SVG 两种绘图技术,也是多数 Web 图表库使用的渲染技术。Canvas 是基于脚本的,通过 JavaScript 指令来动态绘图。而 SVG 则是使用 XML 文档来描述矢量图。两者有不同的适用场景。

Canvas 提供的绘图能力更底层,适合做到像素级的图形处理,能动态渲染和绘制大数据量的图形。

而 SVG 抽象层次更高,声明描述式的接口功能更丰富,内置了大量的图形、滤镜和动画等,方便进行文档元素的维护,也能导出为文件脱离浏览器环境使用。

从底层来看,Canvas 的性能受画布尺寸影响更大,而 SVG 的性能受图形元素个数影响更大。

如果单就图表库的视角来看,选择 Canvas 和 SVG 各有千秋。小画布、大数据量的场景适合用 Canvas,譬如热力图、大数据量的散点图等。如果画布非常大,有缩放、平移等高频的交互,或者移动端对内存占用量非常敏感等场景,可以使用 SVG 的方案。

Canvas提供的功能更原始,适合像素处理,动态渲染和大数据量绘制。

SVG功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景。

D3 layouts

: help you create more advanced visualisations such as treemaps:

D3 layouts帮助您创造更加高级复杂的可视化图表,比如treemaps,packed circles,network graphs。

一句话: layout就是一个接收你的data作为输入,而经过变换增加类似位置,大小等可视化变量到这个data上去的函数

(广度优先布局)

布局算法

1,广度优先搜索算法

(英语:Breadth-First Search,缩写为BFS),又译作宽度优先搜索,或横向优先搜索,是一种图形搜索算法。简单的说,BFS是从根节点开始,沿着树的宽度遍历树的节点。如果所有节点均被访问,则算法中止。

2,几何布局

3,力导向布局

力导向绘图 (Force-directed graph drawing)可以用于描述关系图的结点之间的关系,把结点分布到画布上合理的位置,比如描述企业之间的关系,社交网络中的人际关系等。

Echarts-ZRender

ZRender是Echarts的底层图形绘制引擎,它是一个独立发布的基于Canvas/SVG/VML的2D图形绘制引擎,提供功能:

  • 图形绘制及管理(CRUD、打组)
  • 图形(包含文字)动画管理
  • 图形(包含文字)事件管理(canvas中实现dom事件)
  • 基于“响应式”(dirty标记)的高效帧渲染机制
  • 可选择的渲染器机制(Canvas/SVG/VML(5.0已放弃VML支持))
  1. ZRender是整体设计思路是面向对象的MVC模式,视图层负责渲染,控制层负责用户输入交互,数据层负责数据模型的编排与存储。

  2. 除了上述MVC3大模块以外,还有以下辅助功能模块:动画管理模块、工具类模块、图形对象模块、图形对象辅助模块。

引擎比较

HTML5游戏引擎X-Canvas:

X-Canvas是由UC优视推出的基于硬件加速的HTML5游戏引擎,除了因具备可与原生游戏竞争的性能外,还能够支持iOS、Android、Windows Phone 8和浏览器发行,真正实现一次开发,跨平台运行。

常见的分析模型?

blog.csdn.net/jaffe507/ca…

1, 产品ABC分类模型

ABC分类模型又称帕累托分析法,主要用于分清产品对象的主次,分为A,B,C三类。

一般地,会用在产品分类上,去测量并构建ABC模型。比如某零售企业有500个SKU以及这些SKU对应的销售额,那么哪些SKU是重要的呢,这就是在业务运营中分清主次的问题。

常见的做法是将产品SKU作为维度,并将对应的销售额作为基础度量指标,将这些销售额指标从大到小排列,并计算截止当前产品SKU的销售额累计合计占总销售额的百分比。

百分比在 70%(含)以内,划分为 A 类。

百分比在 70~90%(含)以内,划分为 B 类。

百分比在 90~100%(含)以内,划分为 C 类。

以上百分比也可以根据自己的实际情况调整。

ABC分析模型,不光可以用来划分产品和销售额,还可以划分客户及客户交易额等。比如给企业贡献80%利润的客户是哪些,占比多少。假设有20%,那么在资源有限的情况下,就知道要重点维护这20%类客户。

漏斗模型

营销漏斗模型常用于营销过程。

是将非潜在客户逐步变为客户的转化量化模型。

营销漏斗模型的价值在于量化了营销过程各个环节的效率,帮助找到薄弱环节。

营销环节指的是:从获取用户到最终转化成购买,这整个流程中的一个个子环节。

相邻环节的转化率则就是指:用数据指标来量化每一个步骤的表现。

所以整个漏斗模型就是先将整个购买流程拆分成一个个步骤,然后用转化率来衡量每一个步骤的表现,最后通过异常的数据指标找出有问题的环节,从而解决问题,优化该步骤,最终达到提升整体购买转化率的目的,整体漏斗模型的核心思想其实可以归为分解和量化。

比如分析电商的转化,我们要做的就是监控每个层级上的用户转化,寻找每个层级的可优化点。对于没有按照流程操作的用户,专门绘制他们的转化模型,缩短路径提升用户体验。

波特五种竞争力模型

波特五力模型是企业制定竞争战略时常用的战略分析工具,任何产业的竞争规律会体现在波特五力模型的五种竞争作用力上。

战略的分析和制定听起来离我们的生活很遥远,但实际上企业新开一家门店,开发一个新产品,都可以用到这个模型。

波特五力模型是将大量不同的因素汇集在一个简便的模型中,以此分析一个行业的基本竞争态势。五种力量模型确定了竞争的五种主要来源,即供应商的讨价还价能力、购买者的讨价还价能力、潜在进入者的威胁、替代品的威胁、来自同行的竞争