Vega-Lite美国分级统计图：实现日期列交互式选择需求

问题背景 #

现有基于Vega-Lite的美国郡县分级统计图，通过lookup关联郡县ID与UTC分钟格式的日出时间，但仅支持单日数据展示。日出时间数据集为宽表结构（每列对应一个日期），需实现交互式日期选择功能，解决列名数组编码与交互式列选择两个核心问题。

最优实现方案 #

方案一：动态列提取（高性能） #

直接通过参数关联列名数组，动态提取对应日期的日出时间，无需转换数据结构，性能更优。

实现步骤

1. 定义滑块参数控制日期索引，同时定义日期列名数组，通过索引映射得到选中日期。
2. 通过lookup关联所有日出时间列，存储为对象。
3. 利用表达式根据选中日期提取对应列的日出时间值。

修改后的Spec代码

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 650,
  "height": 400,
  "background": "transparent",
  "data": {
    "url": "http://localhost:7777/_fs/resources/data/counties-10m.json",
    "format": {"type": "topojson", "feature": "counties"},
    "name": "counties-geojson"
  },
  "params": [
    {
      "name": "dateIndex",
      "value": 0,
      "bind": {
        "input": "range",
        "min": 0,
        "max": 364, // 根据实际日期列数调整
        "step": 1,
        "label": "日期索引:"
      }
    },
    {
      "name": "dateList",
      "value": ["1-june", "2-june", "3-june"] // 替换为完整日期列名数组
    },
    {
      "name": "selectedDate",
      "expr": "dateList[dateIndex]"
    }
  ],
  "transform": [
    {
      "lookup": "id",
      "from": {
        "data": {
          "url": "http://localhost:7777/_fs/resources/data/sunrise-times.csv"
        },
        "key": "geoid"
      },
      "as": "sunriseData"
    },
    {
      "calculate": "parseInt(sunriseData[selectedDate])",
      "as": "sunrise"
    }
  ],
  "mark": "geoshape",
  "projection": {"type": "albersUsa"},
  "encoding": {
    "color": {
      "field": "sunrise",
      "type": "quantitative",
      "scale": {"scheme": "rainbow"},
      "title": "日出时间（UTC分钟）"
    }
  }
}

方案二：宽表转长表（高扩展性） #

通过fold转换将宽表转为长表（每行对应一个郡县+日期的组合），再通过参数过滤选中日期，逻辑直观，便于后续扩展日期维度的其他可视化。

实现步骤

1. 定义下拉选择器参数，直接绑定日期列名实现选择。
2. 通过lookup关联所有日出时间列。
3. 将日期列折叠为date（日期字符串）和sunrise（日出时间）两列。
4. 根据参数值过滤数据，仅保留选中日期的行。

修改后的Spec代码

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 650,
  "height": 400,
  "background": "transparent",
  "data": {
    "url": "http://localhost:7777/_fs/resources/data/counties-10m.json",
    "format": {"type": "topojson", "feature": "counties"},
    "name": "counties-geojson"
  },
  "params": [
    {
      "name": "selectedDate",
      "value": "1-june",
      "bind": {
        "input": "select",
        "options": ["1-june", "2-june", "3-june"], // 替换为完整日期列名数组
        "label": "选择日期:"
      }
    }
  ],
  "transform": [
    {
      "lookup": "id",
      "from": {
        "data": {
          "url": "http://localhost:7777/_fs/resources/data/sunrise-times.csv"
        },
        "key": "geoid"
      },
      "as": "sunriseData"
    },
    {
      "fold": ["1-june", "2-june", "3-june"], // 替换为完整日期列名数组
      "as": ["date", "sunrise"],
      "from": "sunriseData"
    },
    {
      "filter": "datum.date === selectedDate"
    },
    {
      "calculate": "parseInt(datum.sunrise)",
      "as": "sunrise"
    }
  ],
  "mark": "geoshape",
  "projection": {"type": "albersUsa"},
  "encoding": {
    "color": {
      "field": "sunrise",
      "type": "quantitative",
      "scale": {"scheme": "rainbow"},
      "title": "日出时间（UTC分钟）"
    }
  }
}

方案对比 #

内容的提问来源于stack exchange，提问作者Nick McAvoy