谁是五大联赛中最攻守兼备的球队？

在小编感兴趣的体育领域，各个联赛最顶级的球队在进攻和防守中都能取得很好的平衡。衡量进攻和防守的水平有一些简单的指标，例如篮球有得失分，足球有进球和失球。通过这两个维度就可以划分出四个象限。而四象限图顾名思义，就是把各个数据点投射到四个象限中，从而更好地观察他们的分布情况。

下面我们以英超球队为例，看看各支球队截止 11.7 日第 11 轮时的得失球情况，找出那支最攻守兼备的球队。完整代码详见：observablehq.com/d/3a2d2647b...

从上图可以看出，在包括 Big6 在内的几大豪门中，曼城无愧新的欧洲霸主，担得起攻守俱佳的名号，阿森纳、热刺、利物浦紧随其后，这也对应了目前积分榜上的排名；切尔西尽管防守不错，但饱受进攻乏力的困扰；曼联则沦为了"第三象限"球队，得赶紧加把劲了。

那么这样一张图应该如何制作呢？下面就让小编来展示使用 G2 绘制的过程，学会之后，无论是足球五大联赛还是 NBA 球队都可以应用。

使用 G2 制作四象限图

获取数据

首先我们需要获取各支球队数据。对于特定行业的免费公开数据集，小编会先尝试在 Public APIs 上查找。例如上图英超球队的数据来自：Premier League Live Scores API，图标可以在英超联赛官方网站上下载。数据片段如下，我们只需要关心 team（队名）、goalsFor（进球）和 goalsAgainst（失球）这三项，图标则按队名索引。

js 复制代码

const data = [
  {
    team: 'Manchester City',
    played: 11,
    win: 9,
    draw: 0,
    loss: 2,
    goalsFor: 28, // 进球
    goalsAgainst: 8, // 失球
    points: 27,
  },
];
const logos = {
  'Manchester City': 'https://...',
};

绘制图片标记

接下来我们选择 Image Marker 绘制，选择将进球映射到 X 轴，失球映射到 Y 轴，球队队徽作为图片来源：

js 复制代码

{
  type: 'view',
  data,
  title: '英超球队进球/失球情况',
  children: [
    {
      type: 'image',
      encode: {
        x: 'goalsFor',
        y: 'goalsAgainst',
        src: (d) => logos[d.team],
      },
      axis: { x: { title: '进球' }, y: { title: '失球' } },
      legend: false,
    },
  ]
}

此时会得到这样的效果，可以发现 Y 轴代表的失球有一点点反直觉，Y 轴正向应该代表失球少的方向：

改变比例尺值域

不用担心，通过指定 scale 比例尺的值域可以让优秀的球队回归第一象限：

css 复制代码

{
  type: 'image',
  // 省略其他配置项
	scale: {
    y: {
      range: [0, 1],
    },
  },
}

绘制辅助线

上面的图缺少明确的象限划分，例如很难一眼看出攻守兼备的前5只球队有哪些。通过辅助线可以明确的划分出四个象限，例如我们想以进球数的中位数为分界，通过一条直线 lineX 划分：

bash 复制代码

{
  type: 'lineX',
  data: [goalsForMedian],
},

同理通过 lineY 也能以失球数的中位数划分，这样四个象限就一目了然了，第一象限中的球队自然就是攻守兼备的：

进一步美化

处于第三象限的球队表现不佳，如果我们想通过颜色区域展示这一信息，可以继续叠加 range。这里我们为第三象限区域染上了淡红色：

css 复制代码

{
  type: 'range',
  data: [
    {
      goalsFor: [goalsForScaleMin, goalsForMedian],
      goalsAgainst: [goalsAgainstMedian, goalsAgainstScaleMax],
      region: '3',
    },
  ],
  encode: { x: 'goalsFor', y: 'goalsAgainst' },
  style: {
    fill: (d) =>
      d.region === '3'
        ? 'rgba(255,0,0,0.5)'
        : 'transparent',
    fillOpacity: 0.2,
  },
}

同理我们也可以为第一象限着色，也可以通过文本等 Marker 在图表上叠加更多图形，通过 tooltip 可以添加鼠标移入交互，展示详细进失球数据等。

五大联赛？NBA？发挥你的想象力吧

看完本文的你是否也跃跃欲试了呢？小编将五大联赛的示例放在这里： observablehq.com/d/3a2d2647b...

除了足球联赛，NBA 甚至是聚焦到一支球队中各个队员的进攻防守情况都可以用四象限图展示，不妨立刻开始属于你的可视化之旅吧！