Vega spec from Thu Feb 08 2024

spec.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "autosize": {"type": "fit", "contains": "padding"},
  "background": "white",
  "padding": 5,
  "style": "cell",
  "data": [
    {"name": "interval_intervalselection_0_store"},
    {"name": "click_pointselection_0_store"},
    {"name": "legend_pointselection_0_store"},
    {"name": "legend_pointhover_0_store"},
    {
      "name": "dff",
      "values": [
        {"period.column": "apple", "numeric_column": 1},
        {"period.column": "banana", "numeric_column": 2},
        {"period.column": "organge", "numeric_column": 3}
      ]
    },
    {
      "name": "data_0",
      "source": "dff",
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["period\\.column"],
          "ops": ["sum"],
          "fields": ["numeric_column"],
          "as": ["sum_numeric_column"]
        },
        {
          "type": "filter",
          "expr": "isValid(datum[\"sum_numeric_column\"]) && isFinite(+datum[\"sum_numeric_column\"])"
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "width",
      "init": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
      "on": [
        {
          "update": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
          "events": "window:resize"
        }
      ]
    },
    {
      "name": "height",
      "init": "isFinite(containerSize()[1]) ? containerSize()[1] : 200",
      "on": [
        {
          "update": "isFinite(containerSize()[1]) ? containerSize()[1] : 200",
          "events": "window:resize"
        }
      ]
    },
    {
      "name": "unit",
      "value": {},
      "on": [
        {"events": "pointermove", "update": "isTuple(group()) ? group() : unit"}
      ]
    },
    {
      "name": "legend_pointhover_0_period__column_legend",
      "value": null,
      "on": [
        {
          "events": [
            {
              "source": "view",
              "type": "click",
              "markname": "period__column_legend_symbols"
            },
            {
              "source": "view",
              "type": "click",
              "markname": "period__column_legend_labels"
            },
            {
              "source": "view",
              "type": "click",
              "markname": "period__column_legend_entries"
            }
          ],
          "update": "isDefined(datum.value) ? datum.value : item().items[0].items[0].datum.value",
          "force": true
        },
        {
          "events": [{"source": "view", "type": "click"}],
          "update": "!event.item || !datum ? null : legend_pointhover_0_period__column_legend",
          "force": true
        }
      ]
    },
    {
      "name": "legend_pointselection_0_period__column_legend",
      "value": null,
      "on": [
        {
          "events": [
            {
              "source": "view",
              "type": "click",
              "markname": "period__column_legend_symbols"
            },
            {
              "source": "view",
              "type": "click",
              "markname": "period__column_legend_labels"
            },
            {
              "source": "view",
              "type": "click",
              "markname": "period__column_legend_entries"
            }
          ],
          "update": "isDefined(datum.value) ? datum.value : item().items[0].items[0].datum.value",
          "force": true
        },
        {
          "events": [{"source": "view", "type": "click"}],
          "update": "!event.item || !datum ? null : legend_pointselection_0_period__column_legend",
          "force": true
        }
      ]
    },
    {
      "name": "interval_intervalselection_0",
      "update": "vlSelectionResolve(\"interval_intervalselection_0_store\", \"union\")"
    },
    {
      "name": "click_pointselection_0",
      "update": "vlSelectionResolve(\"click_pointselection_0_store\", \"union\", true, true)"
    },
    {
      "name": "legend_pointselection_0",
      "update": "vlSelectionResolve(\"legend_pointselection_0_store\", \"union\", true, true)"
    },
    {
      "name": "legend_pointhover_0",
      "update": "vlSelectionResolve(\"legend_pointhover_0_store\", \"union\", true, true)"
    },
    {
      "name": "interval_intervalselection_0_x",
      "value": [],
      "on": [
        {
          "events": {
            "source": "scope",
            "type": "pointerdown",
            "filter": [
              "!event.item || event.item.mark.name !== \"interval_intervalselection_0_brush\""
            ]
          },
          "update": "[x(unit), x(unit)]"
        },
        {
          "events": {
            "source": "window",
            "type": "pointermove",
            "consume": true,
            "between": [
              {
                "source": "scope",
                "type": "pointerdown",
                "filter": [
                  "!event.item || event.item.mark.name !== \"interval_intervalselection_0_brush\""
                ]
              },
              {"source": "window", "type": "pointerup"}
            ]
          },
          "update": "[interval_intervalselection_0_x[0], clamp(x(unit), 0, width)]"
        },
        {
          "events": {"signal": "interval_intervalselection_0_scale_trigger"},
          "update": "[0, 0]"
        },
        {
          "events": [{"source": "view", "type": "dblclick"}],
          "update": "[0, 0]"
        },
        {
          "events": {"signal": "interval_intervalselection_0_translate_delta"},
          "update": "clampRange(panLinear(interval_intervalselection_0_translate_anchor.extent_x, interval_intervalselection_0_translate_delta.x / span(interval_intervalselection_0_translate_anchor.extent_x)), 0, width)"
        }
      ]
    },
    {
      "name": "interval_intervalselection_0_period__column",
      "on": [
        {
          "events": {"signal": "interval_intervalselection_0_x"},
          "update": "interval_intervalselection_0_x[0] === interval_intervalselection_0_x[1] ? null : invert(\"x\", interval_intervalselection_0_x)"
        }
      ]
    },
    {
      "name": "interval_intervalselection_0_scale_trigger",
      "value": {},
      "on": [
        {
          "events": [{"scale": "x"}],
          "update": "(!isArray(interval_intervalselection_0_period__column) || (invert(\"x\", interval_intervalselection_0_x)[0] === interval_intervalselection_0_period__column[0] && invert(\"x\", interval_intervalselection_0_x)[1] === interval_intervalselection_0_period__column[1])) ? interval_intervalselection_0_scale_trigger : {}"
        }
      ]
    },
    {
      "name": "interval_intervalselection_0_tuple",
      "on": [
        {
          "events": [{"signal": "interval_intervalselection_0_period__column"}],
          "update": "interval_intervalselection_0_period__column ? {unit: \"layer_0_layer_0_layer_0\", fields: interval_intervalselection_0_tuple_fields, values: [interval_intervalselection_0_period__column]} : null"
        }
      ]
    },
    {
      "name": "interval_intervalselection_0_tuple_fields",
      "value": [{"field": "period\\.column", "channel": "x", "type": "E"}]
    },
    {
      "name": "interval_intervalselection_0_translate_anchor",
      "value": {},
      "on": [
        {
          "events": [
            {
              "source": "scope",
              "type": "pointerdown",
              "markname": "interval_intervalselection_0_brush"
            }
          ],
          "update": "{x: x(unit), y: y(unit), extent_x: slice(interval_intervalselection_0_x)}"
        }
      ]
    },
    {
      "name": "interval_intervalselection_0_translate_delta",
      "value": {},
      "on": [
        {
          "events": [
            {
              "source": "window",
              "type": "pointermove",
              "consume": true,
              "between": [
                {
                  "source": "scope",
                  "type": "pointerdown",
                  "markname": "interval_intervalselection_0_brush"
                },
                {"source": "window", "type": "pointerup"}
              ]
            }
          ],
          "update": "{x: interval_intervalselection_0_translate_anchor.x - x(unit), y: interval_intervalselection_0_translate_anchor.y - y(unit)}"
        }
      ]
    },
    {
      "name": "interval_intervalselection_0_modify",
      "on": [
        {
          "events": {"signal": "interval_intervalselection_0_tuple"},
          "update": "modify(\"interval_intervalselection_0_store\", interval_intervalselection_0_tuple, true)"
        }
      ]
    },
    {
      "name": "click_pointselection_0_tuple",
      "on": [
        {
          "events": [{"source": "scope", "type": "click"}],
          "update": "datum && item().mark.marktype !== 'group' && indexof(item().mark.role, 'legend') < 0 && indexof(item().mark.name, 'interval_intervalselection_0_brush') < 0 ? {unit: \"layer_0_layer_0_layer_0\", fields: click_pointselection_0_tuple_fields, values: [(item().isVoronoi ? datum.datum : datum)[\"period\\\\.column\"]]} : null",
          "force": true
        },
        {"events": [{"source": "view", "type": "dblclick"}], "update": "null"}
      ]
    },
    {
      "name": "click_pointselection_0_tuple_fields",
      "value": [{"field": "period\\.column", "channel": "x", "type": "E"}]
    },
    {
      "name": "click_pointselection_0_toggle",
      "value": false,
      "on": [
        {"events": [{"source": "scope", "type": "click"}], "update": "false"},
        {"events": [{"source": "view", "type": "dblclick"}], "update": "false"}
      ]
    },
    {
      "name": "click_pointselection_0_modify",
      "on": [
        {
          "events": {"signal": "click_pointselection_0_tuple"},
          "update": "modify(\"click_pointselection_0_store\", click_pointselection_0_toggle ? null : click_pointselection_0_tuple, click_pointselection_0_toggle ? null : true, click_pointselection_0_toggle ? click_pointselection_0_tuple : null)"
        }
      ]
    },
    {
      "name": "legend_pointselection_0_tuple",
      "update": "legend_pointselection_0_period__column_legend !== null ? {fields: legend_pointselection_0_tuple_fields, values: [legend_pointselection_0_period__column_legend]} : null"
    },
    {
      "name": "legend_pointselection_0_tuple_fields",
      "value": [{"field": "period\\.column", "channel": "color", "type": "E"}]
    },
    {
      "name": "legend_pointselection_0_toggle",
      "value": false,
      "on": [
        {
          "events": {"merge": [{"source": "view", "type": "click"}]},
          "update": "event.shiftKey"
        }
      ]
    },
    {
      "name": "legend_pointselection_0_modify",
      "on": [
        {
          "events": {"signal": "legend_pointselection_0_tuple"},
          "update": "modify(\"legend_pointselection_0_store\", legend_pointselection_0_toggle ? null : legend_pointselection_0_tuple, legend_pointselection_0_toggle ? null : true, legend_pointselection_0_toggle ? legend_pointselection_0_tuple : null)"
        }
      ]
    },
    {
      "name": "legend_pointhover_0_tuple",
      "update": "legend_pointhover_0_period__column_legend !== null ? {fields: legend_pointhover_0_tuple_fields, values: [legend_pointhover_0_period__column_legend]} : null"
    },
    {
      "name": "legend_pointhover_0_tuple_fields",
      "value": [{"field": "period\\.column", "channel": "color", "type": "E"}]
    },
    {
      "name": "legend_pointhover_0_toggle",
      "value": false,
      "on": [
        {
          "events": {"merge": [{"source": "view", "type": "click"}]},
          "update": "event.shiftKey"
        }
      ]
    },
    {
      "name": "legend_pointhover_0_modify",
      "on": [
        {
          "events": {"signal": "legend_pointhover_0_tuple"},
          "update": "modify(\"legend_pointhover_0_store\", legend_pointhover_0_toggle ? null : legend_pointhover_0_tuple, legend_pointhover_0_toggle ? null : true, legend_pointhover_0_toggle ? legend_pointhover_0_tuple : null)"
        }
      ]
    },
    {
      "name": "cursor",
      "value": "default",
      "on": [
        {
          "events": "mousemove",
          "update": "if(isDefined((group()).bounds), if(item().mark.marktype != 'group', 'default', 'crosshair'), 'default')"
        }
      ]
    }
  ],
  "marks": [
    {
      "name": "interval_intervalselection_0_brush_bg",
      "type": "rect",
      "clip": true,
      "encode": {
        "enter": {"fill": {"value": "#669EFF"}, "fillOpacity": {"value": 0.07}},
        "update": {
          "x": [
            {
              "test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\"",
              "signal": "interval_intervalselection_0_x[0]"
            },
            {"value": 0}
          ],
          "y": [
            {
              "test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\"",
              "value": 0
            },
            {"value": 0}
          ],
          "x2": [
            {
              "test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\"",
              "signal": "interval_intervalselection_0_x[1]"
            },
            {"value": 0}
          ],
          "y2": [
            {
              "test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\"",
              "field": {"group": "height"}
            },
            {"value": 0}
          ]
        }
      }
    },
    {
      "name": "layer_0_layer_0_layer_0_marks",
      "type": "rect",
      "clip": true,
      "style": ["bar"],
      "interactive": true,
      "from": {"data": "data_0"},
      "encode": {
        "update": {
          "cursor": {"value": "pointer"},
          "fill": {
            "scale": "layer_0_layer_0_color",
            "field": "period\\.column"
          },
          "opacity": [
            {
              "test": "!((!length(data(\"interval_intervalselection_0_store\")) || vlSelectionTest(\"interval_intervalselection_0_store\", datum)) && (!length(data(\"click_pointselection_0_store\")) || vlSelectionTest(\"click_pointselection_0_store\", datum)) && ((length(data(\"legend_pointselection_0_store\")) && vlSelectionTest(\"legend_pointselection_0_store\", datum)) || (!length(data(\"legend_pointhover_0_store\")) || vlSelectionTest(\"legend_pointhover_0_store\", datum))))",
              "value": 0.3
            },
            {"value": 1}
          ],
          "tooltip": {
            "signal": "{\"period.column\": isValid(datum[\"period.column\"]) ? datum[\"period.column\"] : \"\"+datum[\"period.column\"], \"Sum of numeric_column\": datum[\"sum_numeric_column\"]}"
          },
          "ariaRoleDescription": {"value": "bar"},
          "description": {
            "signal": "\"period.column: \" + (isValid(datum[\"period.column\"]) ? datum[\"period.column\"] : \"\"+datum[\"period.column\"]) + \"; Sum of numeric_column: \" + (datum[\"sum_numeric_column\"])"
          },
          "x": {"scale": "x", "field": "period\\.column"},
          "width": {"signal": "max(0.25, bandwidth('x'))"},
          "y": {"scale": "y", "field": "sum_numeric_column"},
          "y2": {"scale": "y", "value": 0}
        }
      }
    },
    {
      "name": "interval_intervalselection_0_brush",
      "type": "rect",
      "clip": true,
      "encode": {
        "enter": {"fill": {"value": "transparent"}},
        "update": {
          "x": [
            {
              "test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\"",
              "signal": "interval_intervalselection_0_x[0]"
            },
            {"value": 0}
          ],
          "y": [
            {
              "test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\"",
              "value": 0
            },
            {"value": 0}
          ],
          "x2": [
            {
              "test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\"",
              "signal": "interval_intervalselection_0_x[1]"
            },
            {"value": 0}
          ],
          "y2": [
            {
              "test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\"",
              "field": {"group": "height"}
            },
            {"value": 0}
          ],
          "stroke": [
            {
              "test": "interval_intervalselection_0_x[0] !== interval_intervalselection_0_x[1]",
              "value": "#669EFF"
            },
            {"value": null}
          ],
          "strokeOpacity": [
            {
              "test": "interval_intervalselection_0_x[0] !== interval_intervalselection_0_x[1]",
              "value": 0.4
            },
            {"value": null}
          ]
        }
      }
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "band",
      "domain": {
        "data": "dff",
        "field": "period\\.column",
        "sort": {"op": "sum", "field": "numeric_column", "order": "descending"}
      },
      "range": [0, {"signal": "width"}],
      "paddingInner": 0.1,
      "paddingOuter": 0.05
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {"data": "data_0", "field": "sum_numeric_column"},
      "range": [{"signal": "height"}, 0],
      "nice": true,
      "zero": true
    },
    {
      "name": "layer_0_layer_0_color",
      "type": "ordinal",
      "domain": {"data": "data_0", "field": "period\\.column", "sort": true},
      "range": [
        "#4C78A8",
        "#F58518",
        "#E45756",
        "#72B7B2",
        "#54A24B",
        "#EECA3B",
        "#B279A2",
        "#FF9DA6",
        "#9D755D",
        "#BAB0AC"
      ]
    }
  ],
  "axes": [
    {
      "scale": "x",
      "orient": "bottom",
      "grid": true,
      "gridScale": "y",
      "domain": false,
      "labels": false,
      "aria": false,
      "maxExtent": 0,
      "minExtent": 0,
      "ticks": false,
      "zindex": 0
    },
    {
      "scale": "y",
      "orient": "left",
      "grid": true,
      "gridScale": "x",
      "tickCount": {"signal": "ceil(height/40)"},
      "domain": false,
      "labels": false,
      "aria": false,
      "maxExtent": 0,
      "minExtent": 0,
      "ticks": false,
      "zindex": 0
    },
    {
      "scale": "x",
      "orient": "bottom",
      "grid": false,
      "title": "period.column",
      "labelFlush": false,
      "labelOverlap": "greedy",
      "labels": true,
      "ticks": true,
      "labelAlign": "right",
      "labelAngle": 270,
      "labelBaseline": "middle",
      "zindex": 0
    },
    {
      "scale": "y",
      "orient": "left",
      "grid": false,
      "title": "Sum of numeric_column",
      "labelFlush": false,
      "labels": true,
      "ticks": true,
      "labelOverlap": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "encode": {"labels": {"update": {"text": {"signal": "datum.value"}}}},
      "zindex": 0
    }
  ],
  "legends": [
    {
      "symbolOpacity": 1,
      "title": "period.column",
      "fill": "layer_0_layer_0_color",
      "symbolType": "square",
      "encode": {
        "labels": {
          "name": "period__column_legend_labels",
          "interactive": true,
          "update": {
            "opacity": [
              {
                "test": "(!length(data(\"legend_pointselection_0_store\")) || (legend_pointselection_0[\"period\\\\.column\"] && indexof(legend_pointselection_0[\"period\\\\.column\"], datum.value) >= 0)) || (!length(data(\"legend_pointhover_0_store\")) || (legend_pointhover_0[\"period\\\\.column\"] && indexof(legend_pointhover_0[\"period\\\\.column\"], datum.value) >= 0))",
                "value": 1
              },
              {"value": 0.35}
            ]
          }
        },
        "symbols": {
          "name": "period__column_legend_symbols",
          "interactive": true,
          "update": {
            "opacity": [
              {
                "test": "(!length(data(\"legend_pointselection_0_store\")) || (legend_pointselection_0[\"period\\\\.column\"] && indexof(legend_pointselection_0[\"period\\\\.column\"], datum.value) >= 0)) || (!length(data(\"legend_pointhover_0_store\")) || (legend_pointhover_0[\"period\\\\.column\"] && indexof(legend_pointhover_0[\"period\\\\.column\"], datum.value) >= 0))",
                "value": 1
              },
              {"value": 0.35}
            ]
          }
        },
        "entries": {
          "name": "period__column_legend_entries",
          "interactive": true,
          "update": {"fill": {"value": "transparent"}}
        }
      }
    }
  ],
  "config": {
    "customFormatTypes": true,
    "tooltipFormat": {"timeFormat": "%b %d, %Y %H:%M:%S"},
    "legend": {"orient": "right"},
    "style": {
      "guide-label": {
        "font": "\"IBM Plex Sans\", system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
      },
      "guide-title": {
        "font": "\"IBM Plex Sans\", system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
      },
      "group-title": {
        "font": "\"IBM Plex Sans\", system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
      },
      "group-subtitle": {
        "font": "\"IBM Plex Sans\", system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
      },
      "text": {
        "font": "\"IBM Plex Sans\", system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
      }
    }
  },
  "usermeta": {
    "warnings": [],
    "selectionConfigs": {
      "interval_intervalselection_0": {
        "type": "interval",
        "datetimeFields": [],
        "derived": []
      },
      "click_pointselection_0": {
        "type": "point",
        "datetimeFields": [],
        "derived": []
      },
      "legend_pointselection_0": {
        "type": "point",
        "datetimeFields": [],
        "derived": []
      }
    }
  }
}