蚂蚁体验技术部 AntV 数据可视化团队，将在《可视化入门：从 0 到 1 开发一个图表库》这本小册中，以理论结合实践的方式，带你顺利入门数据可视化！

作者介绍

作者介绍-1.png

万木：蚂蚁体验技术部前端工程师，AntV G2 栈的核心维护者，多次在 IEEE Vast Changlle，ChinaVis Changlle 等数据分析挑战赛中获得优异成绩。喜欢写代码给自己带来的创造的快乐，开源爱好者，在 GitHub 有一些简单有意思的项目。
逍为：蚂蚁体验技术部 / 数智团队前端开发，前网易游戏测试开发。目前主要负责内部 BI 产品 DeepInsight 的迭代，以及 AntV 开源统计图表 G2 技术栈的研发。 GitHub 上开源了诸多有趣可用的开源项目。
新茗：蚂蚁体验技术部前端工程师，AntV 核心开发者，负责开源统计图表 G2、G2Plot 的研发，以及蚂蚁集团 BI 产品 DeepInsight 的迭代，从图表库到 BI 产品的一体化建设，对商业智能领域的数据可视化建设有较丰富经验。
福晋：蚂蚁体验技术部前端工程师，AntV 核心开发者，从事可视分析相关业务以及可视化基建，负责过多个大型项目的前端交付，擅长小程序、可视化、H5、RN 等领域。
云极：蚂蚁体检技术部/数智团队，主要从事于 BI 产品地理数据可视分析前端研发。曾混迹于 GIS 数字孪生应用创业公司，主要负责 WebGIS 研发工程师的前端架构研发。技术兴趣爱好广泛并热心技术分享，目前沉迷于可视化与 Golang 方向。
缨缨：蚂蚁体验技术部前端工程师，负责蚂蚁集团 BI 产品 DeepInsight 表相关业务迭代。AntV 核心开发者，AntV S2 技术栈负责人。

学习数据可视化有哪些难点？

在这个以数据为核心竞争力的时代，数据可视化已经和机器学习、统计学等热门领域一样，成为了其中最核心的分析工具之一。在 2020 年初新冠病毒爆发之时，各种疫情可视化工具如及时雨一般出现，在展现疫情情况、分析传播趋势等领域立下了汗马功劳，也间接拯救了千千万万脆弱的生命。

但是这个年轻却又古老的领域却依然小众，市面上也很少能见到同时将理论和实践兼顾地很好的课程。高校里面的数据可视化课程将理论讲得异常精彩，却又少了足够的实践让学生能够学以致用。

D3，ECharts，G2，Vega，Vega-lite 都可以做可视化，到底选择哪个？
D3 学习曲线那么高，怎么入门？
ECharts 和 G2 一个是配置式的 API，一个是函数式 API，到底有哪些区别？

网络上的教程尤其青睐将实践部分的数据渲染、性能优化等问题讲得透透彻彻，却又忽略了数据转换在数据可视化流程举足轻重的地位。就比如我们在开发迭代 G2 的过程中，也发现用户们有许多的问题。

Quantile，Threshold，Quantize 比例尺有啥区别？
希望生成的坐标刻度是 6 个，但是为什么却生成了 8 个？
nice 操作到底有什么用？

这些都是因为大家对数据可视化中的图形语法不了解，那为了图形语法能够普罗大众，我们简化了 API，增加了 G2Plot 项目。不仅如此，我们也希望能有机会来提升社区同学对可视化的理解广度，这是这本小册的初衷。

小册是如何设计的？

在这本小册中，我们将围绕着“可视化苏菲的世界”这个具体的数据分析任务展开。

首先你会学到 Tamara Munzner 的《Visualization Analysis & Design》这本书中如下的一个数据分析的模型，并且用它去完成完成“苏菲的世界”中可视化的设计。这里需要注意的因为小册子的篇幅有限，下面的内容不会深入讲解，只会讨论大部分相对重要一点的，剩余的简单提及。

然后，我们会了解前端工程的以下方面，并且搭建我们的开发环境。同样因为篇幅有限，下面提到的工具不会深入细讲，但是会讲解各自的主要作用和基本使用方法，了解最核心的东西，并且给出深入学习的资源。

接着，我们会基于搭建好的开发环境，按照测试驱动的方式，从 0 到 1（不借助任何第三方框架）开发完成基于以下架构图的图形语法图表库：Sparrow [Github、案例]。

Sparrow 同时支持通过 JavaScript Object 和 JavaScript API 去描述一个图表。比如绘制一个条形图的下面两种写法都可以：

import { plot } from "@sparrow-vis/sparrow";

const data = [
  { genre: "Sports", sold: 275 },
  { genre: "Strategy", sold: 115 },
  { genre: "Action", sold: 120 },
  { genre: "Shooter", sold: 350 },
  { genre: "Other", sold: 150 },
];

// 通过 JavaScript Object 描述图表
const chart = plot({
  data,
  element: "interval",
  encode: [
    { channel: "x", field: "genre" },
    { channel: "y", field: "sold" },
    { channel: "fill", field: "genre" },
  ],
});

document.getElementById("container").appendChild(chart);
复制代码

import * as sp from "@sparrow-vis/sparrow";

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// 通过 JavaScrip API 绘制图表
const chart = sp
  .interval()
  .data(data)
  .encode(
    sp.x().field('genre'),
    sp.y().field('sold'),
    sp.fill().field('genre'),
  )
  .plot();

document.getElementById("container").appendChild(chart);
复制代码

上面的两种写法都会得到如下的条形图：

example

Sparrow 可以支持常用的基本图表的绘制：条形图、堆叠条形图、分组条形图、饼图、折线图、面积图、热力图等。

这之后，我们会学习统计图表可视化、图可视化、地理可视化的基本方法，并且用我们的 Sparrow 和下图中的 AntV 技术栈的相关工具去完成“可视化苏菲的世界”这个任务。下面的工具我们都会简单介绍，对于 AntV 技术栈的一些工具我们会在可视化工程中介绍基本用法：G2 & G2Plot，L7 & L7Plot，G6。

最后，我们将得到如下的一些可视化结果（只展示了部分）。

学习理论最好的方法就是用理论去动手解决一个实际的问题，了解一个“轮子”的最好方式就是去写一个“轮子”!

最后的最后，如果你：

在玲琅满目的可视化工具中不知道选择哪个来解决问题；
对可视化和数据分析感兴趣，在日常学习或者工作中常常和它们接触，想深入了解；
对前端或者前端工程化感兴趣，想开发一个完整的前端库来练练手，熟悉其中的主要流程；
想参与 G2 等开源社区的建设，却不知道从哪开始看代码；
想参加 Vast Challenge 、ChinaVis Challenge 等数据分析的挑战赛，但是无从下手；
想加入我们，但是怕通不过面试

那么，这本小册可以说是非常适合你了。现在小册正值上新优惠期，限时5折，只需9.95元（~19.9元~），戳链接即可购买：sourl.co/jgBkbc

小册上新 | 可视化入门：从 0 到 1 开发一个图表库

作者介绍

学习数据可视化有哪些难点？

小册是如何设计的？

猜你喜欢