我们如何在 Vega 规范中制作这个量子位热图

Question

我想创建这种类型的六边形热图，但似乎在任何地方都找不到它。

热图

我尝试过，但没有成功。

这是我的 vega 规格：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 500,
  "height": 300,
  "padding": {"left": 10, "top": 10, "right": 10, "bottom": 10},

  "signals": [
    {
      "name": "hexRadius",
      "value": 35
    },
    {
      "name": "hexWidth",
      "update": "sqrt(0) * hexRadius"
    },
    {
      "name": "hexHeight",
      "update": "0 * hexRadius"
    }
  ],

  "data": [
    {
      "name": "heatmapData",
      "values": [
        {"row": 1, "column": 1, "metric": 0.01},
        {"row": 2, "column": 1, "metric": 0.02},
        {"row": 3, "column": 1, "metric": 0.03},
        {"row": 1, "column": 2, "metric": 0.04},
        {"row": 2, "column": 2, "metric": 0.05},
        {"row": 3, "column": 2, "metric": 0.06},
        {"row": 1, "column": 3, "metric": 0.07},
        {"row": 2, "column": 3, "metric": 0.08},
        {"row": 3, "column": 3, "metric": 0.09}
      ]
    }
  ],

  "scales": [
    {
      "name": "x",
      "type": "point",
      "domain": {"data": "heatmapData", "field": "column"},
      "range": "width",
      "padding": 0.5
    },
    {
      "name": "y",
      "type": "point",
      "domain": {"data": "heatmapData", "field": "row"},
      "range": "height",
      "padding": 1
    },
    {
      "name": "color",
      "type": "linear",
      "domain": [0.01, 0.09],
      "range": {"scheme": "purples"}
    }
  ],

  "axes": [
    {
      "orient": "left",
      "scale": "y",
      "title": "Row",
      "tickCount": 3
    },
    {
      "orient": "bottom",
      "scale": "x",
      "title": "Column",
      "tickCount": 3
    }
  ],

  "marks": [
    {
      "type": "path",
      "from": {"data": "heatmapData"},
      "encode": {
        "enter": {
          "path": {
            "signal": "'M' + (0) + ',' + (-hexRadius) + ' L' + (hexRadius * sin(60)) + ',' + (-hexRadius/2) + ' L' + (hexRadius * sin(60)) + ',' + (hexRadius/2) + ' L' + (0) + ',' + (hexRadius) + ' L' + (-hexRadius * sin(60)) + ',' + (hexRadius/2) + ' L' + (-hexRadius * sin(60)) + ',' + (-hexRadius/2) + ' Z'"
          },
          "x": {
            "scale": "x",
            "field": "column",
            "offset": {"signal": "datum.column % 2 === 0 ? hexWidth / 2 : 0"}
          },
          "y": {
            "scale": "y",
            "field": "row",
            "offset": {"signal": "datum.row % 2 === 0 ? hexHeight / 2 : 0"}
          },
          "fill": {"scale": "color", "field": "metric"},
          "stroke": {"value": "white"},
          "strokeWidth": {"value": 1}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "heatmapData"},
      "encode": {
        "enter": {
          "x": {
            "scale": "x",
            "field": "column",
            "offset": {"signal": "datum.column % 2 === 0 ? hexWidth / 2 : 0"}
          },
          "y": {
            "scale": "y",
            "field": "row",
            "offset": {"signal": "datum.row % 2 === 0 ? hexHeight / 2 : 0"}
          },
          "text": {"field": "metric"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fill": {"value": "black"}
        }
      }
    }
  ]
}

Answer 1

正如 Joel 所建议的，您可以使用图像、2 层创建一个规范，并相应地过滤每层。这是一个非常基本的规格，使用 2 个六边形形状只是为了演示什么是可能的。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A scatterplot showing horsepower and miles per gallons for various cars.",
  "width": 500,
  "height": 500,
  "data": {"url": "data/cars.json"},
  "layer": [
    {
      "transform": [{"filter": "datum.Horsepower <= 150"}],
      "mark": {
        "type": "image",
        "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Truncated_triangle.svg/80px-Truncated_triangle.svg.png",
        "width": 30,
        "height": 30
      },
      "encoding": {
        "x": {"field": "Horsepower", "type": "quantitative"},
        "y": {"field": "Miles_per_Gallon", "type": "quantitative"}
      }
    },
    {
      "transform": [{"filter": "datum.Horsepower > 150"}],
      "mark": {
        "type": "image",
        "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Regular_polygon_6_annotated.svg/80px-Regular_polygon_6_annotated.svg.png",
        "width": 30,
        "height": 30
      },
      "encoding": {
        "x": {"field": "Horsepower", "type": "quantitative"},
        "y": {"field": "Miles_per_Gallon", "type": "quantitative"}
      }
    }
  ],
  "config": {}
}