transformfoldflattenvega-litetimeunit

timeUnit does not work after a flatten and flod transformation


Is it possible to use timeUnit after a flatten and flod transformation? In the example below it doesnt work!

If I remove the timeUnit from the x axis it plots, but without the good things that come with the timeUnit.

Thanks

This is an example code that can be executed in the link below https://vega.github.io/editor/#/edited

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Sales in a Year.",
  "width": 500,
  "height": 200,
  
  "data": {
    "values": [
      {"timestamp": ["2019-01-01","2019-02-01","2019-03-01","2019-04-01","2019-05-01","2019-06-01",
                     "2019-07-01","2019-08-01","2019-09-01","2019-10-01","2019-11-01","2019-12-01"],
       "cars"  : [55, 43, 91, 81, 53, 19, 87, 52, 52, 44, 52, 52],
       "bikes"     : [12,  6,  2,  0,  0,  0,  0,  0,  0,  3,  9, 15]}
    ]
  },
  
  "transform": [
    {"flatten": ["timestamp", "cars", "bikes"]},
    {"fold": ["cars", "bikes"]}
  ],
  "mark": {"type":"bar", "tooltip": true, "cornerRadiusEnd": 4},

  "encoding": {
    "x": {"field": "timestamp", 
          "timeUnit": "month",
          "type": "ordinal", 
          "title": "", 
          "axis": {"labelAngle": 0}},

    "y": {"field": "value", 
          "type": "quantitative",  
          "title": "Soiling Loss"},

    "color":{"field": "key", 
             "type": "nominal"}
  }
}

Solution

  • For convenience, strings in input data with a simple temporal encoding are automatically parsed as dates, but such parsing is not applied to data that is the result of a transformation.

    In this case, you can do the parsing manually with a calculate transform (view in editor):

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
      "description": "Sales in a Year.",
      "width": 500,
      "height": 200,
      "data": {
        "values": [
          {
            "timestamp": [
              "2019-01-01",
              "2019-02-01",
              "2019-03-01",
              "2019-04-01",
              "2019-05-01",
              "2019-06-01",
              "2019-07-01",
              "2019-08-01",
              "2019-09-01",
              "2019-10-01",
              "2019-11-01",
              "2019-12-01"
            ],
            "cars": [55, 43, 91, 81, 53, 19, 87, 52, 52, 44, 52, 52],
            "bikes": [12, 6, 2, 0, 0, 0, 0, 0, 0, 3, 9, 15]
          }
        ]
      },
      "transform": [
        {"flatten": ["timestamp", "cars", "bikes"]},
        {"fold": ["cars", "bikes"]},
        {"calculate": "toDate(datum.timestamp)", "as": "timestamp"}
      ],
      "mark": {"type": "bar", "tooltip": true, "cornerRadiusEnd": 4},
      "encoding": {
        "x": {
          "field": "timestamp",
          "timeUnit": "month",
          "type": "ordinal",
          "title": "",
          "axis": {"labelAngle": 0}
        },
        "y": {"field": "value", "type": "quantitative", "title": "Soiling Loss"},
        "color": {"field": "key", "type": "nominal"}
      }
    }
    

    enter image description here