Created
May 2, 2024 13:00
-
-
Save djbarnwal/0c05d38d97b5dfdb915e7da24a318e5a to your computer and use it in GitHub Desktop.
Stacked area
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "$schema": "https://vega.github.io/schema/vega-lite/v5.json", | |
| "data": { | |
| "values": [ | |
| { | |
| "ts": "2021-12-07T18:30:00.000Z", | |
| "ts_position": "2021-12-08T06:30:00.000Z", | |
| "bin": 0, | |
| "total_records": 6527, | |
| "comparison.ts": "2021-11-30T18:30:00.000Z", | |
| "comparison.ts_position": "2021-12-01T06:30:00.000Z", | |
| "comparison.bin": 0, | |
| "comparison.total_records": 1346 | |
| }, | |
| { | |
| "ts": "2021-12-08T18:30:00.000Z", | |
| "ts_position": "2021-12-09T06:30:00.000Z", | |
| "bin": 0, | |
| "total_records": 6696, | |
| "comparison.ts": "2021-12-01T18:30:00.000Z", | |
| "comparison.ts_position": "2021-12-02T06:30:00.000Z", | |
| "comparison.bin": 0, | |
| "comparison.total_records": 1186 | |
| }, | |
| { | |
| "ts": "2021-12-09T18:30:00.000Z", | |
| "ts_position": "2021-12-10T06:30:00.000Z", | |
| "bin": 0, | |
| "total_records": 6721, | |
| "comparison.ts": "2021-12-02T18:30:00.000Z", | |
| "comparison.ts_position": "2021-12-03T06:30:00.000Z", | |
| "comparison.bin": 0, | |
| "comparison.total_records": 1682 | |
| }, | |
| { | |
| "ts": "2021-12-10T18:30:00.000Z", | |
| "ts_position": "2021-12-11T06:30:00.000Z", | |
| "bin": 0, | |
| "total_records": 6141, | |
| "comparison.ts": "2021-12-03T18:30:00.000Z", | |
| "comparison.ts_position": "2021-12-04T06:30:00.000Z", | |
| "comparison.bin": 0, | |
| "comparison.total_records": 1346 | |
| }, | |
| { | |
| "ts": "2021-12-11T18:30:00.000Z", | |
| "ts_position": "2021-12-12T06:30:00.000Z", | |
| "bin": 0, | |
| "total_records": 6841, | |
| "comparison.ts": "2021-12-04T18:30:00.000Z", | |
| "comparison.ts_position": "2021-12-05T06:30:00.000Z", | |
| "comparison.bin": 0, | |
| "comparison.total_records": 1426 | |
| }, | |
| { | |
| "ts": "2021-12-12T18:30:00.000Z", | |
| "ts_position": "2021-12-13T06:30:00.000Z", | |
| "bin": 0, | |
| "total_records": 7262, | |
| "comparison.ts": "2021-12-05T18:30:00.000Z", | |
| "comparison.ts_position": "2021-12-06T06:30:00.000Z", | |
| "comparison.bin": 0, | |
| "comparison.total_records": 4312 | |
| }, | |
| { | |
| "ts": "2021-12-13T18:30:00.000Z", | |
| "ts_position": "2021-12-14T06:30:00.000Z", | |
| "bin": 0, | |
| "total_records": 6867, | |
| "comparison.ts": "2021-12-06T18:30:00.000Z", | |
| "comparison.ts_position": "2021-12-07T06:30:00.000Z", | |
| "comparison.bin": 0, | |
| "comparison.total_records": 5827 | |
| }, | |
| { | |
| "ts": "2021-12-14T18:30:00.000Z", | |
| "ts_position": "2021-12-15T06:30:00.000Z", | |
| "bin": 0, | |
| "total_records": 1860, | |
| "comparison.ts": "2021-12-07T18:30:00.000Z", | |
| "comparison.ts_position": "2021-12-08T06:30:00.000Z", | |
| "comparison.bin": 0, | |
| "comparison.total_records": 6527 | |
| }, | |
| { | |
| "ts": "2021-12-15T18:30:00.000Z", | |
| "ts_position": "2021-12-16T06:30:00.000Z", | |
| "bin": 0, | |
| "total_records": null, | |
| "comparison.ts": "2021-12-08T18:30:00.000Z", | |
| "comparison.ts_position": "2021-12-09T06:30:00.000Z", | |
| "comparison.bin": 0, | |
| "comparison.total_records": 6696 | |
| } | |
| ] | |
| }, | |
| "width": "container", | |
| "transform": [ | |
| { | |
| "timeUnit": "yearmonthdate", | |
| "field": "comparison\\.ts", | |
| "as": "comparison_ts" | |
| }, | |
| {"fold": ["ts", "comparison_ts"]}, | |
| { | |
| "calculate": "(datum['key'] === 'comparison_ts' ? datum['comparison.total_records'] : datum['total_records'])", | |
| "as": "measure" | |
| }, | |
| { | |
| "calculate": "(datum['key'] === 'comparison_ts' ? datum['comparison_ts'] : datum['ts'])", | |
| "as": "time" | |
| } | |
| ], | |
| "encoding": { | |
| "x": { | |
| "field": "ts", | |
| "type": "temporal", | |
| "scale": { | |
| "domain": ["2021-12-08T18:30:00.000Z", "2021-12-15T07:41:59.999Z"] | |
| }, | |
| "axis": { | |
| "ticks": false, | |
| "orient": "top", | |
| "title": "", | |
| "formatType": "time", | |
| "format": "%b %d" | |
| }, | |
| "timeUnit": "yearmonthdate" | |
| }, | |
| "y": { | |
| "field": "measure", | |
| "type": "quantitative", | |
| "stack": "zero", | |
| "axis": {"title": ""} | |
| }, | |
| "color": { | |
| "field": "key", | |
| "type": "nominal", | |
| "legend": null, | |
| "scale": {"domain": ["ts", "comparison_ts"], "range": ["blue", "gray"]} | |
| }, | |
| "order": {"field": "order", "type": "ordinal"} | |
| }, | |
| "layer": [ | |
| {"mark": {"type": "area", "clip": true, "opacity": 0.7}}, | |
| {"mark": {"type": "line", "strokeWidth": 1, "clip": true}}, | |
| { | |
| "mark": {"type": "rule", "clip": true}, | |
| "encoding": { | |
| "color": { | |
| "condition": {"param": "hover", "empty": false, "value": "red"}, | |
| "value": "transparent" | |
| }, | |
| "y": {"value": -400}, | |
| "tooltip": [ | |
| { | |
| "field": "ts", | |
| "type": "temporal", | |
| "title": "Time", | |
| "format": "%b %d, %Y %H:%M" | |
| }, | |
| {"field": "total_records", "type": "quantitative"}, | |
| {"field": "comparison\\.total_records", "type": "quantitative"} | |
| ] | |
| }, | |
| "params": [ | |
| { | |
| "name": "hover", | |
| "select": { | |
| "type": "point", | |
| "encodings": ["x"], | |
| "nearest": true, | |
| "on": "pointerover", | |
| "clear": "pointerout" | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "transform": [{"filter": {"param": "hover", "empty": false}}], | |
| "mark": { | |
| "type": "point", | |
| "filled": true, | |
| "opacity": 1, | |
| "size": 40, | |
| "clip": true, | |
| "stroke": "white", | |
| "strokeWidth": 1 | |
| } | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment