calendar.vg.json

calendar.vg.json

{
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "description": "A calendar visualization of vacation",
    "padding": 5,
    "signals": [
      {
        "name": "step",
        "value": 16
      },
      {
        "name": "offset",
        "value": 10
      },
      {
        "name": "width",
        "update": "step * 52 + offset * 11"
      },
      {
        "name": "height",
        "update": "step * 7"
      },
      {
        "name": "scheme",
        "value": "pinkyellowgreen",
        "bind": {
          "input": "select",
          "options": [
            "pinkyellowgreen",
            "blueorange",
            "brownbluegreen",
            "purplegreen",
            "purpleorange",
            "redblue",
            "redgrey",
            "redyellowblue",
            "redyellowgreen",
            "spectral"
          ]
        }
      }
    ],
    "data": [
      {
        "name": "dataset",
        "values": [
          { "date": "2022-10-29", "quantity": 100 },
          { "date": "2022-10-30", "quantity": 100 },
          { "date": "2022-10-31", "quantity": 100 },
          { "date": "2022-11-01", "quantity": 101 },
          { "date": "2022-11-02", "quantity": 102 },
          { "date": "2022-11-03", "quantity": 103 },
          { "date": "2022-11-04", "quantity": 104 },
          { "date": "2022-11-05", "quantity": 105 },
          { "date": "2022-11-06", "quantity": 106 },
          { "date": "2022-11-07", "quantity": 107 },
          { "date": "2022-11-08", "quantity": 108 },
          { "date": "2022-11-09", "quantity": 109 },
          { "date": "2022-11-10", "quantity": 110 },
          { "date": "2022-11-11", "quantity": 111 },
          { "date": "2022-11-12", "quantity": 112 },
          { "date": "2022-11-13", "quantity": 113 },
          { "date": "2022-11-14", "quantity": 114 },
          { "date": "2022-11-15", "quantity": 115 },
          { "date": "2022-11-16", "quantity": 116 },
          { "date": "2022-11-17", "quantity": 117 },
          { "date": "2022-11-18", "quantity": 118 },
          { "date": "2022-11-19", "quantity": 119 }
        ],
        "format": {
          "type": "json",
          "parse": {
            "quantity": "number",
            "date": "utc:'%Y-%m-%d'"
          }
        },
        "transform": [
          {
            "type": "formula",
            "expr": "year(datum.date)",
            "as": "Year"
          },
          {
            "type": "formula",
            "expr": "month(datum.date)",
            "as": "Month"
          },
          {
            "type": "formula",
            "expr": "week(datum.date)",
            "as": "weeknum"
          },
          {
            "type": "formula",
            "expr": "day(datum.date)",
            "as": "weekday"
          },
          {
            "type": "timeunit",
            "field": "date",
            "units": ["year", "week"],
            "as": ["w0", "w1"]
          },
          {
            "type": "formula",
            "expr": "timeOffset('day', datum.w0)",
            "as": "w0"
          },
          {
            "type": "timeunit",
            "field": "date",
            "units": ["day"],
            "as": ["d0", "d1"]
          }
        ]
      }
    ],
    "scales": [
      {
        "name": "y",
        "type": "band",
        "domain": {
          "data": "dataset",
          "field": "d0",
          "sort": true
        },
        "range": {
          "step": {
            "signal": "step"
          }
        }
      },
      {
        "name": "color",
        "type": "linear",
        "clamp": true,
        "range": {
          "scheme": {
            "signal": "scheme"
          }
        },
        "domain": [100, 105, 120]
      }
    ],
    "legends": [
      {
        "fill": "color",
        "title": "vacation",
        "titleFontSize": 12,
        "titleOrient": "left",
        "titlePadding": 20,
        "offset": 15,
        "orient": "top",
        "type": "gradient",
        "direction": "horizontal",
        "gradientLength": 250,
        "gradientThickness": 10,
        "format": "f"
      }
    ],
    "layout": {
      "columns": 1,
      "padding": 15
    },
    "marks": [
      {
        "type": "group",
        "from": {
          "facet": {
            "data": "dataset",
            "name": "values",
            "groupby": "Year"
          }
        },
        "sort": {
          "field": "datum.Year",
          "order": "descending"
        },
        "data": [
          {
            "name": "max",
            "source": "values",
            "transform": [
              {
                "type": "aggregate",
                "ops": ["max"],
                "fields": ["date"]
              }
            ]
          },
          {
            "name": "weeks",
            "transform": [
              {
                "type": "sequence",
                "start": 0,
                "stop": 53,
                "as": "weeknum"
              },
              {
                "type": "formula",
                "expr": "datetime(parent.Year, 0, 1 + datum.weeknum * 7)",
                "as": "date"
              },
              {
                "type": "timeunit",
                "units": ["year", "week"],
                "field": "date",
                "as": ["w0", "w1"]
              },
              {
                "type": "formula",
                "expr": "timeOffset('day', datum.w0)",
                "as": "w0"
              },
              {
                "type": "filter",
                "expr": "datum.date < data('max')[0].max_date"
              }
            ]
          }
        ],
        "scales": [
          {
            "name": "x",
            "type": "band",
            "domain": {
              "data": "weeks",
              "field": "w0",
              "sort": true
            },
            "range": {
              "step": {
                "signal": "step"
              }
            }
          }
        ],
        "axes": [
          {
            "orient": "left",
            "scale": "y",
            "ticks": false,
            "domain": false,
            "labelPadding": 8,
            "format": "%a",
            "formatType": "time",
            "title": {
              "signal": "parent.year"
            },
            "titleAngle": 0,
            "titleAlign": "right",
            "titleX": -8,
            "titleY": -2,
            "titleFontSize": 10
          },
          {
            "orient": "top",
            "scale": "x",
            "ticks": false,
            "domain": false,
            "format": "%b",
            "formatType": "time",
            "labelAlign": "left",
            "encode": {
              "labels": {
                "update": {
                  "x": {
                    "scale": "x",
                    "field": "value",
                    "band": 0,
                    "offset": {
                      "signal": "month(datum.value) * offset"
                    }
                  },
                  "opacity": {
                    "signal": "date(datum.value) < 8 ? 1 : 0"
                  }
                }
              }
            }
          }
        ],
        "marks": [
          {
            "type": "rect",
            "from": {
              "data": "values"
            },
            "encode": {
              "enter": {
                "x": {
                  "scale": "x",
                  "field": "w0",
                  "offset": {
                    "signal": "month(datum.date) * offset"
                  }
                },
                "width": {
                  "scale": "x",
                  "band": 1,
                  "offset": -1
                },
                "y": {
                  "scale": "y",
                  "field": "d0"
                },
                "height": {
                  "scale": "y",
                  "band": 1,
                  "offset": -1
                },
                "cornerRadius": {
                  "value": 2
                },
                "tooltip": {
                  "signal": "timeFormat(datum.date, '%a %b %d, %Y') + '\\n:' + format(datum.quantity, '2')"
                }
              },
              "update": {
                "fill": {
                  "scale": "color",
                  "field": "quantity"
                }
              }
            }
          }
        ]
      }
    ]
  }