Skip to content

Instantly share code, notes, and snippets.

@nicolaskruchten
Created February 6, 2024 19:28
Show Gist options
  • Save nicolaskruchten/e4deaffb0f8d2d94f16c6881552fe238 to your computer and use it in GitHub Desktop.
Save nicolaskruchten/e4deaffb0f8d2d94f16c6881552fe238 to your computer and use it in GitHub Desktop.
Vega spec from Tue Feb 06 2024
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"data": [
{"name": "interval_intervalselection_0_store"},
{"name": "click_pointselection_0_store"},
{"name": "df"},
{
"name": "data_0",
"values": [
{"date": 946702800000, "sum_price": 230.82999999999998},
{"date": 949381200000, "sum_price": 225.98999999999998},
{"date": 951886800000, "sum_price": 250.27999999999997},
{"date": 954565200000, "sum_price": 214.51999999999998},
{"date": 957153600000, "sum_price": 191.07},
{"date": 959832000000, "sum_price": 193.37},
{"date": 962424000000, "sum_price": 184.67},
{"date": 965102400000, "sum_price": 218.99},
{"date": 967780800000, "sum_price": 177.04},
{"date": 970372800000, "sum_price": 162.92},
{"date": 973054800000, "sum_price": 140.4},
{"date": 975646800000, "sum_price": 117.12},
{"date": 978325200000, "sum_price": 153.72},
{"date": 981003600000, "sum_price": 133.29},
{"date": 983422800000, "sum_price": 130.14},
{"date": 986101200000, "sum_price": 159.78},
{"date": 988689600000, "sum_price": 155.62999999999997},
{"date": 991368000000, "sum_price": 157.82},
{"date": 993960000000, "sum_price": 143.69000000000003},
{"date": 996638400000, "sum_price": 131.67000000000002},
{"date": 999316800000, "sum_price": 117.36999999999999},
{"date": 1001908800000, "sum_price": 136.99},
{"date": 1004590800000, "sum_price": 152.59},
{"date": 1007182800000, "sum_price": 158.07999999999998},
{"date": 1009861200000, "sum_price": 150.01},
{"date": 1012539600000, "sum_price": 137.5},
{"date": 1014958800000, "sum_price": 144.82000000000002},
{"date": 1017637200000, "sum_price": 125.91},
{"date": 1020225600000, "sum_price": 123.56},
{"date": 1022904000000, "sum_price": 112.67},
{"date": 1025496000000, "sum_price": 105.46},
{"date": 1028174400000, "sum_price": 110.80999999999999},
{"date": 1030852800000, "sum_price": 93.97999999999999},
{"date": 1033444800000, "sum_price": 120.9},
{"date": 1036126800000, "sum_price": 133.72},
{"date": 1038718800000, "sum_price": 117.66},
{"date": 1041397200000, "sum_price": 119.56},
{"date": 1044075600000, "sum_price": 119.99},
{"date": 1046494800000, "sum_price": 124.43},
{"date": 1049173200000, "sum_price": 134.14000000000001},
{"date": 1051761600000, "sum_price": 145.44},
{"date": 1054440000000, "sum_price": 142.20000000000002},
{"date": 1057032000000, "sum_price": 148.02},
{"date": 1059710400000, "sum_price": 154.4},
{"date": 1062388800000, "sum_price": 162.39},
{"date": 1064980800000, "sum_price": 169.27999999999997},
{"date": 1067662800000, "sum_price": 168.59999999999997},
{"date": 1070254800000, "sum_price": 170.82},
{"date": 1072933200000, "sum_price": 175.43},
{"date": 1075611600000, "sum_price": 165.44000000000003},
{"date": 1078117200000, "sum_price": 161.67000000000002},
{"date": 1080795600000, "sum_price": 158.98000000000002},
{"date": 1083384000000, "sum_price": 165.65},
{"date": 1086062400000, "sum_price": 175.3},
{"date": 1088654400000, "sum_price": 158.66000000000003},
{"date": 1091332800000, "sum_price": 258.4},
{"date": 1094011200000, "sum_price": 291.73},
{"date": 1096603200000, "sum_price": 356.83},
{"date": 1099285200000, "sum_price": 366.93999999999994},
{"date": 1101877200000, "sum_price": 384.96},
{"date": 1104555600000, "sum_price": 387.79},
{"date": 1107234000000, "sum_price": 376.96000000000004},
{"date": 1109653200000, "sum_price": 363.35},
{"date": 1112331600000, "sum_price": 382.46999999999997},
{"date": 1114920000000, "sum_price": 446.53999999999996},
{"date": 1117598400000, "sum_price": 455.91},
{"date": 1120190400000, "sum_price": 476.72999999999996},
{"date": 1122868800000, "sum_price": 476.01},
{"date": 1125547200000, "sum_price": 513.9},
{"date": 1128139200000, "sum_price": 569.64},
{"date": 1130821200000, "sum_price": 629.8800000000001},
{"date": 1133413200000, "sum_price": 634.92},
{"date": 1136091600000, "sum_price": 655.02},
{"date": 1138770000000, "sum_price": 568.68},
{"date": 1141189200000, "sum_price": 591.78},
{"date": 1143867600000, "sum_price": 623.09},
{"date": 1146456000000, "sum_price": 562.43},
{"date": 1149134400000, "sum_price": 609.23},
{"date": 1151726400000, "sum_price": 576.6600000000001},
{"date": 1154404800000, "sum_price": 577.6899999999999},
{"date": 1157083200000, "sum_price": 613.94},
{"date": 1159675200000, "sum_price": 709.58},
{"date": 1162357200000, "sum_price": 731.42},
{"date": 1164949200000, "sum_price": 704.8100000000001},
{"date": 1167627600000, "sum_price": 747.76},
{"date": 1170306000000, "sum_price": 688.01},
{"date": 1172725200000, "sum_price": 706.65},
{"date": 1175400000000, "sum_price": 757.79},
{"date": 1177992000000, "sum_price": 818.8900000000001},
{"date": 1180670400000, "sum_price": 841.35},
{"date": 1183262400000, "sum_price": 853.2},
{"date": 1185940800000, "sum_price": 872.52},
{"date": 1188619200000, "sum_price": 954.53},
{"date": 1191211200000, "sum_price": 1132.13},
{"date": 1193889600000, "sum_price": 1098.77},
{"date": 1196485200000, "sum_price": 1119.9},
{"date": 1199163600000, "sum_price": 911.2399999999999},
{"date": 1201842000000, "sum_price": 796.38},
{"date": 1204347600000, "sum_price": 793.35},
{"date": 1207022400000, "sum_price": 970.44},
{"date": 1209614400000, "sum_price": 1008.56},
{"date": 1212292800000, "sum_price": 908.26},
{"date": 1214884800000, "sum_price": 857.53},
{"date": 1217563200000, "sum_price": 858.15},
{"date": 1220241600000, "sum_price": 726.2499999999999},
{"date": 1222833600000, "sum_price": 636.0000000000001},
{"date": 1225512000000, "sum_price": 527.64},
{"date": 1228107600000, "sum_price": 545.34},
{"date": 1230786000000, "sum_price": 593.5699999999999},
{"date": 1233464400000, "sum_price": 598.22},
{"date": 1235883600000, "sum_price": 639.6999999999999},
{"date": 1238558400000, "sum_price": 723.45},
{"date": 1241150400000, "sum_price": 756.47},
{"date": 1243828800000, "sum_price": 774.1099999999999},
{"date": 1246420800000, "sum_price": 831.72},
{"date": 1249099200000, "sum_price": 852.5},
{"date": 1251777600000, "sum_price": 918.6},
{"date": 1254369600000, "sum_price": 990.45},
{"date": 1257048000000, "sum_price": 1073.88},
{"date": 1259643600000, "sum_price": 1125.89},
{"date": 1262322000000, "sum_price": 997.31},
{"date": 1265000400000, "sum_price": 1005.65},
{"date": 1267419600000, "sum_price": 1066.38}
],
"transform": [
{"type": "formula", "expr": "toDate(datum['date'])", "as": "date"}
]
},
{
"name": "data_0_y_domain_sum_price",
"values": [{"min": 93.97999999999999, "max": 1132.13}]
}
],
"signals": [
{
"name": "width",
"init": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"on": [
{
"events": "window:resize",
"update": "isFinite(containerSize()[0]) ? containerSize()[0] : 200"
}
]
},
{
"name": "height",
"init": "isFinite(containerSize()[1]) ? containerSize()[1] : 200",
"on": [
{
"events": "window:resize",
"update": "isFinite(containerSize()[1]) ? containerSize()[1] : 200"
}
]
},
{
"name": "unit",
"value": {},
"on": [
{"events": "pointermove", "update": "isTuple(group()) ? group() : unit"}
]
},
{
"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": "interval_intervalselection_0_x",
"value": [],
"on": [
{
"events": {
"source": "scope",
"filter": [
"!event.item || event.item.mark.name !== \"interval_intervalselection_0_brush\""
],
"type": "pointerdown"
},
"update": "[x(unit), x(unit)]"
},
{
"events": {
"source": "window",
"between": [
{
"source": "scope",
"filter": [
"!event.item || event.item.mark.name !== \"interval_intervalselection_0_brush\""
],
"type": "pointerdown"
},
{"source": "window", "type": "pointerup"}
],
"consume": true,
"type": "pointermove"
},
"update": "[interval_intervalselection_0_x[0], clamp(x(unit), 0, width)]"
},
{
"events": {"signal": "interval_intervalselection_0_scale_trigger"},
"update": "[scale(\"x\", interval_intervalselection_0_date[0]), scale(\"x\", interval_intervalselection_0_date[1])]"
},
{
"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_date",
"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_date) || (+invert(\"x\", interval_intervalselection_0_x)[0] === +interval_intervalselection_0_date[0] && +invert(\"x\", interval_intervalselection_0_x)[1] === +interval_intervalselection_0_date[1])) ? interval_intervalselection_0_scale_trigger : {}"
}
]
},
{
"name": "interval_intervalselection_0_tuple",
"on": [
{
"events": [{"signal": "interval_intervalselection_0_date"}],
"update": "interval_intervalselection_0_date ? {unit: \"layer_0_layer_0_layer_0\", fields: interval_intervalselection_0_tuple_fields, values: [interval_intervalselection_0_date]} : null"
}
]
},
{
"name": "interval_intervalselection_0_tuple_fields",
"value": [{"field": "date", "channel": "x", "type": "R"}]
},
{
"name": "interval_intervalselection_0_translate_anchor",
"value": {},
"on": [
{
"events": [
{
"source": "scope",
"markname": "interval_intervalselection_0_brush",
"type": "pointerdown"
}
],
"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",
"between": [
{
"source": "scope",
"markname": "interval_intervalselection_0_brush",
"type": "pointerdown"
},
{"source": "window", "type": "pointerup"}
],
"consume": true,
"type": "pointermove"
}
],
"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)[\"date\"]]} : null",
"force": true
},
{"events": [{"source": "view", "type": "dblclick"}], "update": "null"}
]
},
{
"name": "click_pointselection_0_tuple_fields",
"value": [{"field": "date", "channel": "x", "type": "E"}]
},
{
"name": "click_pointselection_0_toggle",
"value": false,
"on": [
{
"events": [{"source": "scope", "type": "click"}],
"update": "event.shiftKey"
},
{"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": "cursor",
"value": "default",
"on": [
{
"events": "mousemove",
"update": "if(isDefined((group()).bounds), if(item().mark.marktype != 'group', 'default', 'crosshair'), 'default')"
}
]
}
],
"marks": [
{
"type": "rect",
"name": "interval_intervalselection_0_brush_bg",
"encode": {
"enter": {"fill": {"value": "#669EFF"}, "fillOpacity": {"value": 0.07}},
"update": {
"y": [
{
"value": 0,
"test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\""
},
{"value": 0}
],
"x": [
{
"signal": "interval_intervalselection_0_x[0]",
"test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\""
},
{"value": 0}
],
"x2": [
{
"signal": "interval_intervalselection_0_x[1]",
"test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\""
},
{"value": 0}
],
"y2": [
{
"field": {
"signal": null,
"datum": null,
"group": "height",
"parent": null
},
"test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\""
},
{"value": 0}
]
}
},
"clip": true,
"interactive": false
},
{
"type": "rect",
"name": "layer_0_layer_0_layer_0_marks",
"from": {"data": "data_0"},
"encode": {
"update": {
"description": {
"signal": "\"date: \" + (timeFormat(datum[\"date\"], '%b %d, %Y %H:%M:%S')) + \"; Sum of price: \" + (datum[\"sum_price\"])"
},
"width": {"value": 5},
"tooltip": {
"signal": "{\"date\": timeFormat(datum[\"date\"], '%b %d, %Y %H:%M:%S'), \"Sum of price\": datum[\"sum_price\"]}"
},
"fill": {"value": "#4C78A8"},
"y2": {"value": 0, "scale": "y"},
"ariaRoleDescription": {"value": "bar"},
"cursor": {"value": "pointer"},
"opacity": [
{
"value": 0.3,
"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)))"
},
{"value": 1}
],
"xc": {"field": "date", "scale": "x"},
"y": {"field": "sum_price", "scale": "y"}
}
},
"clip": true,
"style": ["bar"],
"interactive": true
},
{
"type": "rect",
"name": "interval_intervalselection_0_brush",
"encode": {
"enter": {"fill": {"value": "transparent"}},
"update": {
"x2": [
{
"signal": "interval_intervalselection_0_x[1]",
"test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\""
},
{"value": 0}
],
"y": [
{
"value": 0,
"test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\""
},
{"value": 0}
],
"strokeOpacity": [
{
"value": 0.4,
"test": "interval_intervalselection_0_x[0] !== interval_intervalselection_0_x[1]"
},
{}
],
"x": [
{
"signal": "interval_intervalselection_0_x[0]",
"test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\""
},
{"value": 0}
],
"y2": [
{
"field": {
"signal": null,
"datum": null,
"group": "height",
"parent": null
},
"test": "data(\"interval_intervalselection_0_store\").length && data(\"interval_intervalselection_0_store\")[0].unit === \"layer_0_layer_0_layer_0\""
},
{"value": 0}
],
"stroke": [
{
"value": "#669EFF",
"test": "interval_intervalselection_0_x[0] !== interval_intervalselection_0_x[1]"
}
]
}
},
"clip": true,
"interactive": false
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "data_0", "field": "date"},
"range": [0, {"signal": "width"}],
"padding": 5
},
{
"name": "y",
"type": "linear",
"domain": [
{"signal": "(data(\"data_0_y_domain_sum_price\")[0] || {}).min"},
{"signal": "(data(\"data_0_y_domain_sum_price\")[0] || {}).max"}
],
"range": [{"signal": "height"}, 0],
"zero": true,
"nice": true
}
],
"axes": [
{
"scale": "x",
"tickCount": {"signal": "ceil(width/40)"},
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"gridScale": "y",
"ticks": false,
"zindex": 0,
"orient": "bottom",
"aria": false,
"grid": true,
"domain": false
},
{
"scale": "y",
"maxExtent": 0,
"tickCount": {"signal": "ceil(height/40)"},
"domain": false,
"labels": false,
"minExtent": 0,
"zindex": 0,
"orient": "left",
"ticks": false,
"grid": true,
"gridScale": "x",
"aria": false
},
{
"scale": "x",
"title": "date",
"grid": false,
"labelOverlap": true,
"zindex": 0,
"orient": "bottom",
"labels": true,
"labelFlush": false,
"tickCount": {"signal": "ceil(width/40)"},
"ticks": true
},
{
"scale": "y",
"labels": true,
"labelOverlap": true,
"grid": false,
"labelFlush": false,
"encode": {"labels": {"update": {"text": {"signal": "datum.value"}}}},
"orient": "left",
"ticks": true,
"tickCount": {"signal": "ceil(height/40)"},
"zindex": 0,
"title": "Sum of price"
}
],
"usermeta": {
"selectionConfigs": {
"interval_intervalselection_0": {
"type": "interval",
"datetimeFields": ["date"],
"derived": []
},
"click_pointselection_0": {
"type": "point",
"datetimeFields": ["date"],
"derived": []
}
},
"warnings": []
},
"config": {
"customFormatTypes": true,
"tooltipFormat": {"timeFormat": "%b %d, %Y %H:%M:%S"},
"legend": {
"orient": "right",
"titleColor": "#01011b",
"labelColor": "#01011b",
"titleFontWeight": 500,
"titlePadding": 8
},
"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"
},
"cell": {"stroke": "#ecedf2"}
},
"axis": {
"labelColor": "#01011b",
"tickColor": "#ecedf2",
"titleColor": "#01011b",
"titleFontWeight": 500,
"titlePadding": 15,
"gridColor": "#ecedf2",
"domainColor": "#ecedf2"
}
},
"padding": 5,
"autosize": {"type": "fit", "resize": false, "contains": "padding"},
"style": "cell",
"background": "#ffffff"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment