Date Explosion Example - Vega-Lite

spec.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Visualize before and after data explosion using vega-lite transforms",
  "params": [{"name": "msPerDay", "expr": "86400000"}],
  "spacing": 45,
  "data": {
    "name": "table",
    "values": [{"item": "Item A", "start": "2023-01-01", "end": "2023-01-10"}]
  },
  "transform": [
    /*** Date Explosion Transformation Start ***/
    {
      "calculate": "sequence(toDate(datum['start']), toDate(datum['end'])+msPerDay, msPerDay)",
      "as": "date"
    },
    {"flatten": ["date"], "as": ["date"]},
    {"calculate": "utcFormat(datum['date'], '%m-%d-%Y')", "as": "date"},
     /*** Date Explosion Transformation End ***/
  ],
  "vconcat": [
    {
      "transform": [
        {"fold": ["start", "end"], "as": ["type", "date"]},
        {
          "window": [{"op": "row_number", "as": "rn"}],
          "groupby": ["item", "type"]
        },
        {"filter": "datum['rn']===1"}
      ],
      "encoding": {
        "x": {
          "field": "type",
          "axis": {
            "title": "Before Date Explosion",
            "labelAngle": 0,
            "orient": "top"
          },
          "sort": {"field": "type", "order": "descending"}
        },
        "y": {
          "field": "item",
          "axis": {"orient": "left", "title": null, "labels": false}
        }
      },
      "width": {"step": 100},
      "height": {"step": 30},
      "layer": [
        {"mark": {"type": "rect", "fill": null, "stroke": "#000"}},
        {"mark": {"type": "text"}, "encoding": {"text": {"field": "date"}}}
      ]
    },
    {
      "hconcat": [
        {"mark": {"type": "point", "opacity": 0}},
        {
          "encoding": {
            "y": {
              "field": "date",
              "axis": null,
              "sort": {"field": "date", "order": "ascending"}
            },
            "x": {
              "field": "item",
              "axis": {
                "title": "Exploded Date",
                "labels": false,
                "orient": "top"
              }
            }
          },
          "width": {"step": 100},
          "height": {"step": 30},
          "layer": [
            {"mark": {"type": "rect", "fill": null, "stroke": "#000"}},
            {"mark": {"type": "text"}, "encoding": {"text": {"field": "date"}}}
          ]
        },
        {"mark":{"type":"point", "opacity": 0}}
      ]
    }
  ]
}