antvg2 环图轮播_教你使用 G2Plot 绘制星空诺贝尔奖可视化

语雀

作品介绍

本次要分享的是使用 G2Plot 来实现「财新网」 诺贝尔奖可视化作品，原作品地址。本次对该作品进行了部分简化和改造，下文先介绍下具体的视觉设计和视觉元素对应的含义，再给大家介绍下实现该作品的一个技术实现思路。知乎视频​www.zhihu.com

视觉设计

数据分析思路

(1)以时间线为导线，将获奖年龄划分为4个年龄阶段，按年份累计分别展示：各奖项获奖比例(内环图)

各国各奖项按获奖年龄分布的情况(环形散点图)

(2)最后对 1901-2015 年的获奖情况进行一个汇总，可以看到 42 个国家按照获奖年龄段在不同学科奖项上的分布情况，点越大代表获奖人数越多。

视觉通道映射

(1)获奖年龄：位置

(2)国家：位置

(3)奖项学科类别：颜色

(4)获奖人数：大小

(5)其他的数据信息：边栏

实现思路

初步了解视觉设计之后，我们来对该可视化信息图进行拆解分析，可以划分为以下几部分：内环图(含义：代表各奖项获奖比例；视觉通道：颜色；映射属性：奖项学科类别)+ 中心文本

环形散点图(含义：代表各国各奖项按获奖年龄分布的情况；视觉通道：位置、颜色、大小；分别映射属性：国家、获奖年龄、奖项学科类别、获奖人数)

辅助元素：年份边栏、当前年份滑块

经过拆解分析之后，我们可以把每一部分都作为一个 View(1)(即图层)，对每一个 view 进行组装处理之后，进行叠加就可以形成一个多图层的信息图表了

G2Plot 多图层实验室透传 80% G2 能力，下面我们来看下如何利用 G2Plot 多图层实验室来实现该可视化信息图表，重点的部分会使用 ✨ 来标识 (*╹▽╹*)

内环图

我们先准备第一个 view

① 准备数据

② 设置坐标系：theta 坐标系，调整下半径 radius 和内半径 innerRadius

③ 绘制几何图形，确定视觉通道映射：环图对应的几何标记是 interval，x 轴无映射，y 轴位置映射到获奖数量，以 奖项类别 作为颜色映射，因此 type = interval yField = counts colorField = type ，同时还需要对数据进行调整，设置 adjust = stack

④ 进行图表组件和样式的装饰：通过 annotations 来配置中心文本标注，详细可见：Annotations 文档

伪代码：

const view1 = {

// ① 环图的数据 donutData

data: donutData,

region: { start: { x: 0, y: 0.35 }, end: { x: 1, y: 0.65 } },

coordinate: {

type: "theta",

cfg: { innerRadius: 0.84, radius: 0.96 },

},

geometries: [

{

type: "interval",

yField: "counts",