颜色图例

[pearmini]

颜色图例

目前 G2 5.0 中颜色通道只有当对应比例尺是 oridnal 比例尺的时候，才如下展现了图例。

期望当为如下比例尺的时候，也能展现对应的图例。

• continuous: linear, log, pow, sqrt
• threshold
• quantize
• quantile
• sequential

实现思路

实现上参考 d3 的 color legend，如果没有更好的设计，可以完全或者尽量保持一致。

接下来的案例只是一个说明，不用遵循。

案例

Linear

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  width: 900,
  height: 300,
});

chart
  .cell()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/89c20fe8-0c6f-46c8-b36b-4cb653dba8ed.json',
    transform: [{ type: 'map', callback: (d) => ({ salary: d }) }],
  })
  .scale('color', {
    type: 'linear',
    range: ['#eee', 'red'],
  })
  .encode('y', (_, i) => (i % 5) + 1)
  .encode('x', (_, i) => ((i / 5) | 0) + 1)
  .encode('color', 'salary')
  .style('stroke', '#000')
  .style('inset', 2);

chart.render();

threshold

参考 sparrow

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  width: 900,
  height: 300,
});

chart
  .cell()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/89c20fe8-0c6f-46c8-b36b-4cb653dba8ed.json',
    transform: [{ type: 'map', callback: (d) => ({ salary: d }) }],
  })
  .scale('color', {
    type: 'threshold',
    domain: [10000, 100000],
    range: ['#eee', 'pink', 'red'],
  })
  .encode('y', (_, i) => (i % 5) + 1)
  .encode('x', (_, i) => ((i / 5) | 0) + 1)
  .encode('color', 'salary')
  .style('stroke', '#000')
  .style('inset', 2);

chart.render();

quantize

参考 sparrow

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  width: 900,
  height: 300,
});

chart
  .cell()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/89c20fe8-0c6f-46c8-b36b-4cb653dba8ed.json',
    transform: [{ type: 'map', callback: (d) => ({ salary: d }) }],
  })
  .scale('color', { type: 'quantize', range: ['#eee', 'pink', 'red'] })
  .encode('y', (_, i) => (i % 5) + 1)
  .encode('x', (_, i) => ((i / 5) | 0) + 1)
  .encode('color', 'salary')
  .style('stroke', '#000')
  .style('inset', 2);

chart.render();

quantile

参考 sparrow

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  width: 900,
  height: 300,
});

chart
  .cell()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/89c20fe8-0c6f-46c8-b36b-4cb653dba8ed.json',
    transform: [{ type: 'map', callback: (d) => ({ salary: d }) }],
  })
  .scale('color', { type: 'quantile', range: ['#eee', 'pink', 'red'] })
  .encode('y', (_, i) => (i % 5) + 1)
  .encode('x', (_, i) => ((i / 5) | 0) + 1)
  .encode('color', 'salary')
  .style('stroke', '#000')
  .style('inset', 2);

chart.render();

sequential

export function settleWeatherCellGrouped(): G2Spec {
  return {
    type: 'cell',
    height: 300,
    data: {
      type: 'fetch',
      value: 'data/seattle-weather.csv',
    },
    transform: [{ type: 'group', color: 'max' }],
    encode: {
      x: (d) => new Date(d.date).getUTCDate(),
      y: (d) => new Date(d.date).getUTCMonth(),
      color: 'temp_max',
    },
    style: {
      inset: 0.5,
    },
    scale: {
      color: {
        palette: 'gnBu',
      },
    },
  };
}

TODO

对于上述的例子，分别创建一个集成测试去测试：如果是 API 改成 Spec 的形式，同时把远程的数据保存在本地；否者直接测试。

• continuous: linear, log, pow, sqrt
• threshold
• quantize
• quantile
• sequential

[Aarebecca]

重合问题 GUI 这边基本上解决了，样式上的话，像这种刻度线必要性大吗，如果要做的话连续图例需要稍微调整一下

[pearmini]

重合问题 GUI 这边基本上解决了，样式上的话，像这种刻度线必要性大吗，如果要做的话连续图例需要稍微调整一下

我感觉还是有必要的，就像坐标轴一下不仅仅展示首位的刻度。这样更容易感知不同颜色对应的数据。

[Aarebecca]

重合问题 GUI 这边基本上解决了，样式上的话，像这种刻度线必要性大吗，如果要做的话连续图例需要稍微调整一下

我感觉还是有必要的，就像坐标轴一下不仅仅展示首位的刻度。这样更容易感知不同颜色对应的数据。

OK, 那 GUI 这边我调整下

[Aarebecca]

Threshold 的图例稍微有点问题，domain: [10000, 100000]，我理解是划分为 小于 10000, 10000~100000, 大于 100000 三个区间吧。所以绘制出来应该是这样：

[pearmini]

Threshold 的图例稍微有点问题，domain: [10000, 100000]，我理解是划分为 小于 10000, 10000~100000, 大于 100000 三个区间吧。所以绘制出来应该是这样：

嗯嗯，是的，sparrow 里面的那个例子确实有问题