Meatdata
总结
闪念
常青笔记
重点摘要
- 首先我们将数据可视化分成两种大的类型：可视化库，比如 D3、Echarts 等，这些是面向开发者的，开发者可以基于这些库开发可视化应用。可视化平台，比如 Grafana、Superset 等，这些面向分析师和一般使用者，直接拿来分析数据，无需开发。
- 前端可视化最著名的项目是 D3，它不仅能做出各种可视化效果，还是许多其它图表库的基础，前面说到搜 chart 的结果有 7.6w，而如果改成搜 D3 结果就有 5.6w，可见影响力极广。
- D3 最早出现在 Mike Bostock 读博期间发表的一篇论文里，它的目的并不是做图表库，而是成为更底层的基础设施，简化数据可视化的开发，它在 API 设计方面参考了 jQuery，使用比如这样的写法 d3.selectAll(“p”).attr(“class”, “graf”)，把 改成 就和 jQuery 一样了。d3.selectAll$
- 除了类似 jQuery 的链式调用，D3 还有鲜明的特点是将功能拆得非常细，做到了函数级别，从数据解析、转换到布局算法都有提供，这使得开发者可以十分灵活地进行组合，实现各种可视化的展现，这使得 D3 非常适合拿来学习的可视化算法，而且还能很方便地将这些算法整合到自己的项目中。
- 如果只是想绘制常见图表，倒是没必要直接用 D3，可以看看那些基于 D3 的图表库，比如下面这些：nvd3 早在 2012 年就出现了，但最近更新时间是 2018 年 6 月，尽管之前坚持了 6 年，但还是放弃了，具体原因不清楚，几个核心开发者在 GitHub 上都不活跃了，不过它的故事没结束，下一篇里会有介绍。c3 最早追溯到 2013 年，因为几乎是同时出现的，之前经常拿来和 nvd3 对比，现在看和很多年前没太大差别，从更新日志看这两年基本都在修 bug。vx/Recharts/react-vis/nivo/Victory，这些都是专门给 React 项目使用的图表库，我个人不看好这个思路，一方面是 jsx 写起来比 json 还繁琐，另一方面这种写法的实际收益并不大，还会导致难以使用 canvas 渲染。dc.js 主要是用来做多维分析，特色是支持在前端快速进行不同维度过滤，但这种方案的使用场景有限。billboard.js 是 Naver 开源的，其实是 C3.js 的一个 fork 版本，因为他们公司内部用了 C3.js，实际用的时候发现不少问题，比如不支持 D3 v4，他们提交了 PR 也没人理，就干脆另起炉灶了。Britecharts 提供了类似 D3 的链式调用接口，发版虽然频繁，但每个版本的改进很少，而且目前配置项也很少。ploty.js 在 2012 年就有了，一直都有更新，从功能和项目活跃度看是最好的，代码规模有 9w 多行，远超前面几个，它背后是一家公司，这家公司除了 ploty.js 还有给分析师用的 Dash 应用产品，我们将在下一篇里介绍。
- 论功能丰富度 ploty.js > nivo > vx，其它都没必要看了，D3 虽然很火，但在专业图表领域能拿得出手的其实只有 ploty.js，而 ploty.js 也并不是只用 D3，它还依赖了 gl-plot2d、regl 等基于 WebGL 的库，因为 D3 的接口基于 DOM，用来操作 SVG 没问题，但无法用来操作 Canvas 和 WebGL，这使得 D3 无法用于大数据量及需要像素级别操作的特效。总体来说 D3 是一款成功的可视化基础设施，它的源码值得学习，但不推荐直接使用它例子开发图表，一方面基于它写的代码上手门槛高，另一方面是它的定位并非图表库，要用的话最好是其它基于 D3 开发的图表库，比如 Plot
- y.js。
- 2017 年陆奇加入百度后大力推广开源，ECharts 也在 2018 年进入 Apache 孵化器，开始在国外受到关注，比如 Gitlab 还专门写了篇文章说为什么他们从 D3 换成了 ECharts。
- ECharts 的配置项相当多，预计超过 600 个，我们的 Sugar 平台中大部分图表是基于 Echarts 实现的，至今还有不少高级配置项还没补齐。如果想配制出漂亮的图表，建议多逛逛 Gallery，可以淘到很多漂亮的效果，只看官方文档是想不到的，
- Echarts 和 Highcharts 的 API 非常像，很多公司其实是当成了免费的 Highcharts 来用，但 Echarts 其实有不少自己独特的功能，其中最具亮点的就是 Echarts-gl，它能实现三维图表和地球的展示，这点其他开源库基本没有，而其它商业图表都是基于 SVG 的，只能弄仿三维效果，只有 Echarts-gl 是基于 WebGL 做的真三维，可以配置光照、材质、阴影等，还有独家的后期特效功能。
- Echarts-gl 主要归功于 pissang，最开始听说 pissang 的时候就知道他写了个自己的 WebGL 框架 claygl（之前叫 qtek），作为 WebGL 小白的我没想通为啥有 Threejs 还要自己山寨一个，后来才知道这个框架不简单。
- 学过三维图形学会知道有两种常见的渲染架构，一个是前向渲染，另一个是延迟渲染，一般来说前向渲染实现起来更简单，但它无法支持大量光源，而延迟渲染实现成本更高，但支持大量光源且适合做后期特效，所以包括 Unity、Unreal Engine 4 在内的主流游戏引擎都主要使用延迟渲染，只有在低端设备下才切换为前向渲染。
- 然而你翻遍 GitHub 就会发现，在 WebGL 领域 claygl 是唯一支持延迟渲染的，包括 Three.js（尝试过但放弃了）、Babylon.js、Playcanvas 以及各种你没听说过的 WebGL 引擎都不支持，所以它们都会限制光源数量，比如最多 4 个。除了延迟渲染这个独特的亮点，claygl 还内置了 Bloom、SSAO、SSR 等特效，支持动画、GLTF 等，是少数几个功能完整的 WebGL 框架。正是因为在三维图形方面的深入了解，Echarts-gl 能做出的效果远超其他图表库，然而这个巨大的门槛是优点也是缺点，Echarts-gl 的最大问题是了解 WebGL 的前端工程师太少，加上使用自研的渲染引擎导致门槛更高了，这个项目长期都只有 pissang 一个人在提交，我最近给地球加个小特效竟然就成了贡献榜第二。作为一个公司内的开源产品，Echarts 从功能和文档方面都达到了商业产品的水平，还有主题编辑器和大量社区贡献的案例，而且 Echarts 团队在过去 7 年一直都有提交，非常不容易，目前正在规划新的 5.0 版本，将会在动画、数据处理和性能等方面有明显改善，值得期待。
- Vega 和 D3 一样都出自华盛顿大学的 Interactive Data Lab，这个机构专注于数据交互方面的研究，而 Vega 的目标是做数据可视化的配置语法，你可以基于它配制出各种想要的元素，比如轴线、标注等，虽然 Highcharts/Echarts 的图表也主要是靠一个 options 配置项，但还是需呀依赖 JavaScript 代码来加载数据，而 Vega 做到了只需要 JSON 就能完成所有图表相关的开发，包括数据加载、转换、交互等。
- G2 是支付宝前端团队开发的，虽然当时 Echarts 已经很成熟了，但支付宝还是选择了自己做了一个，也就是 G2 的前身 acharts，它的 API 和 Echarts 基本类似，后来作者看了《The Grammar Of Graphics》那本书，就调整了方向，开始基于这本书的思路开发 G2，这个 G2 的命名就是这本书名里的两个 G。
- 《The Grammar Of Graphics》里作者主要是借鉴了面向对象的思想，将图表拆分成了很多组成部分，比如数据源、数据转换、坐标系、图形等，通过将它们组装起来实现各种展现效果，从技术角度倒是不新奇，但这本书通过数学的方式来进行组合和分析，看起来非常高级。
- G2 中那个看起来奇怪的 写法就是来自那本书，这里的 不是乘法，而是作者自己定义的一种操作符，表示合并，不过因为 JavaScript 不支持操作符重载，导致这里只能用字符串，丢失了类型信息，很容易拼错了都不知道。chart.interval().position(‘genre*sold’);*比起 Echarts 之类的图表库，G2 的定位更接近 Vega，也就是比直接拿来用的图表库低一层，对于想把它当成 Echarts 来用的人来说会觉得上手成本更高，所以 G2 后来又提供了更简化的 G2Plot 专注于普通图表的绘制。
- 值得一提的是 AntV 团队还弄了很多方向，比如关系图 G6/X6、地图 L7、自动选图 AVA 等，但这些项目大多只有一个人，团队精力可能有点分散了。
- TradingView 专注做股票类的，似乎很专业，有不少分析 k 线的小工具。
- 另外还有些 gis 领域的专用可视化库，比如 cesium、deck.gl，但国内对测绘是有规定的，最好直接用百度、高德。
- 虽然有很多开源图表库，但绝大部分不是已经弃坑就是将要弃坑了，目前真正能用的就只有 ECharts、Ploty.js、Vega 和 G2。
- Vega 背后是个学术组织，优点投入相对比较稳定，但缺点是可能更关注学术方面的发展，有些在业界里重要但没技术含量的东西就不怎么关心了，比如主题配色、动画、阴影、涟漪等花里胡哨的东西优先级一定最低，像动画功能在 2016 年就说要做了，而作者在几天前说的是有好多功能想做，动画这个先交给我的学生去研究了。所以 Vega 只推荐在内部使用，而对外产品还是需要点花里胡哨的
- Ploty.js 背后有家公司在专门做这个，代码提交比较稳定，不过作为商业公司，目前似乎主要靠卖另一个开源的 Dash 产品以及咨询服务，后续是否会对高级图表功能收费是个未知数，目前这个图表库知道的人不多，在 npm 上的下载量很低。
- ECharts 和 G2 虽然是在大的互联网企业里，但实际人力投入很难和专门做这个的商业公司比，G2 团队的情况我不太了解，相对来说 ECharts 的社区力量更大，靠用户贡献的例子远远多于其他图表库，一定程度上缓解了 API 太多的学习成本，而且 Echarts 的 Issues 几乎都有回复，能做到这点的开源库没几个。
- 后续会不会出现更好的前端图表库？恐怕不会了，前面提到很多图表库的成功背后都赶上了技术变革，从最早 FusionCharts/AnyChart 的 Flash、到 Highcharts 的 SVG/VML、再到 ECharts 的 Canvas，技术栈的不同让它们一出来就有明显优势，所以如果没有新的技术变革，后续新出的图表库将很难超越，只能在特定领域突破，而目前能看到浏览器的下一次图形技术变革只有 WebGPU，虽然它不会像 WebGL2 那样命苦，但和 WebGL 相比，它的主要优势是减少在 CPU 上的时间，更好利用 GPU，这对后续游戏在浏览器上的表现更有利，但用来做图表和 WebGL 比没有明显优势，加上大部分图表是二维的，除非数据点非常多，否则并行渲染优势不大。
- 图表库商业产品不多，毕竟这个需求很通用，难以差异化竞争，对客户来说都是花钱，为啥不选最好那个？加上有 Echarts 这种赶上商业质量的开源库存在，能满足大部分的需求了，使得商业产品的生存空间有限。
- 如果选商业产品，国内使用最好在 Highcharts、amCharts 和 AnyChart 之间做选择，因为 FusionCharts 好像还不支持中文，不过需要注意这些产品的地图都有错误，把某个省当成国家了，用的时候需要改一下。
- 最终在我们的 BI 产品 https://sugar.baidu.com/ 中选择的是 ECharts，它完善的功能帮我们节省了大量工作，实践证明在 BI 这样复杂的图表场景下用 ECharts 也是没问题的，经常是用户想要某个我们还不支持的功能时，我们就去 ECharts 文档里找找，发现竟然有。。。非常感谢 ECharts 团队的多年付出