Vega-lite chart fails when graphing on utcmonthdate

Question

Why is this vega-lite graph failing to display any data? The y-axis is supposed to display the total hours and the x-axis is supposed to display a series of month-day combinations. Instead, it displays nothing at all. If I change the y-axis type from "temporal" to "ordinal", it displays the data all stacked up in a single column, instead of spread out over a series of days, so I know the data is good.

Vega Editor Here

{
  "data": {    
          "values": [ 
            {"category": "Cleaning", "_source": {"hours": 7, "date": "2020-04-12T00:00:00.000Z"}},
            {"category": "Cleaning", "_source": {"hours": 10, "date": "2020-04-06T00:00:00.000Z"}},
            {"category": "Accounting", "_source": {"hours": 10, "date": "2020-04-07T00:00:00.000Z"}},
            {"category": "Accounting", "_source": {"hours": 6, "date": "2020-04-11T00:00:00.000Z"}},
            {"category": "Programming", "_source": {"hours": 3, "date": "2020-04-13T00:00:00.000Z"}},
            {"category": "Programming", "_source": {"hours": 2, "date": "2020-04-15T00:00:00.000Z"}},
            {"category": "Programming", "_source": {"hours": 22, "date": "2020-04-17T00:00:00.000Z"}},
            {"category": "Programming", "_source": {"hours": 5, "date": "2020-04-19T00:00:00.000Z"}},
            {"category": "QA", "_source": {"hours": 15, "date": "2020-04-21T00:00:00.000Z"}},
            {"category": "QA", "_source": {"hours": 30, "date": "2020-04-23T00:00:00.000Z"}},
            {"category": "QA", "_source": {"hours": 30, "date": "2020-04-14T00:00:00.000Z"}}
          ]},
  "transform": [
    {
      "lookup": "category",
      "from": {
        "data": {    
          "name": "hits.hits",
          "values": [
              {"type": "Cleaning", "_source": { "department": "Janitorial"}},
              {"type": "Accounting", "_source": { "department": "Finance"}},
              {"type": "Programming", "_source": { "department": "R and D"}},
              {"type": "QA", "_source": { "department": "R and D"}}
          ]},
        "key": "type",
        "fields": ["_source.department"]
      }
    },
    {"calculate": "datum.category+' - '+datum['_source.department']", "as": "legend"},
    {"timeUnit": "utcmonthdate", "field": "_source.date", "as": "date"},
    {"calculate": "datum._source.hours", "as": "hours"},
    {"aggregate": 
      [{"op": "sum", "field": "hours", "as": "totalhours"}], 
      "groupby": ["legend", "date", "totalhours"]
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {"timeUnit": "utcmonthdate",
          "field": "date",
          "type": "temporal"
    },
    "y": {"field": "totalhours", "type": "quantitative"},
    "color": {
      "field": "legend",
      "title": "My Legend",
      "type": "nominal",
      "legend": {"orient": "top"}
    }
  }
}

Answer 1

When timeUnit is defined via a transform, you must ensure that any input has been parsed as a date. You can do this using a calculate transform with the toDate expression:

{"calculate": "toDate(datum._source.date)", "as": "date"}

Here is how it would look in your example (vega editor):

{
  "data": {
    "values": [
      {
        "category": "Cleaning",
        "_source": {"hours": 7, "date": "2020-04-12T00:00:00.000Z"}
      },
      {
        "category": "Cleaning",
        "_source": {"hours": 10, "date": "2020-04-06T00:00:00.000Z"}
      },
      {
        "category": "Accounting",
        "_source": {"hours": 10, "date": "2020-04-07T00:00:00.000Z"}
      },
      {
        "category": "Accounting",
        "_source": {"hours": 6, "date": "2020-04-11T00:00:00.000Z"}
      },
      {
        "category": "Programming",
        "_source": {"hours": 3, "date": "2020-04-13T00:00:00.000Z"}
      },
      {
        "category": "Programming",
        "_source": {"hours": 2, "date": "2020-04-15T00:00:00.000Z"}
      },
      {
        "category": "Programming",
        "_source": {"hours": 22, "date": "2020-04-17T00:00:00.000Z"}
      },
      {
        "category": "Programming",
        "_source": {"hours": 5, "date": "2020-04-19T00:00:00.000Z"}
      },
      {
        "category": "QA",
        "_source": {"hours": 15, "date": "2020-04-21T00:00:00.000Z"}
      },
      {
        "category": "QA",
        "_source": {"hours": 30, "date": "2020-04-23T00:00:00.000Z"}
      },
      {
        "category": "QA",
        "_source": {"hours": 30, "date": "2020-04-14T00:00:00.000Z"}
      }
    ]
  },
  "transform": [
    {
      "lookup": "category",
      "from": {
        "data": {
          "name": "hits.hits",
          "values": [
            {"type": "Cleaning", "_source": {"department": "Janitorial"}},
            {"type": "Accounting", "_source": {"department": "Finance"}},
            {"type": "Programming", "_source": {"department": "R and D"}},
            {"type": "QA", "_source": {"department": "R and D"}}
          ]
        },
        "key": "type",
        "fields": ["_source.department"]
      }
    },
    {
      "calculate": "datum.category+' - '+datum['_source.department']",
      "as": "legend"
    },
    {"calculate": "toDate(datum._source.date)", "as": "date"},
    {"timeUnit": "utcmonthdate", "field": "date", "as": "date"},
    {"calculate": "datum._source.hours", "as": "hours"},
    {
      "aggregate": [{"op": "sum", "field": "hours", "as": "totalhours"}],
      "groupby": ["legend", "date", "totalhours"]
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {"timeUnit": "utcmonthdate", "field": "date", "type": "temporal"},
    "y": {"field": "totalhours", "type": "quantitative"},
    "color": {
      "field": "legend",
      "title": "My Legend",
      "type": "nominal",
      "legend": {"orient": "top"}
    }
  }
}