Last active
November 16, 2022 13:53
-
-
Save lightmania/b713607b8828e588b1b8a45f5831ea78 to your computer and use it in GitHub Desktop.
calendar.vg.json
This file contains 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/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" | |
} | |
} | |
} | |
} | |
] | |
} | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment