Horizon Graph Example
By dividing an area chart into consecutive layers, horizon graphs present time-series data in a compact space while preserving resolution. Click the chart to change the number of layers. Though the chart size changes, the spatial resolution of the area chart stays constant.
Vega JSON Specification <>
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A horizon graph, which preserves resolution by layering slices of an area chart.",
"width": 500,
"height": 100,
"signals": [
{
"name": "layers",
"value": 2,
"on": [{"events": "pointerdown!", "update": "1 + (layers % 4)"}],
"bind": {"input": "select", "options": [1, 2, 3, 4]}
},
{
"name": "height",
"update": "floor(200 / layers)"
},
{
"name": "vheight",
"update": "height * layers"
},
{
"name": "opacity",
"update": "pow(layers, -2/3)"
}
],
"data": [
{
"name": "layer_indices",
"values": [0, 1, 2, 3],
"transform": [
{"type": "filter", "expr": "datum.data < layers"},
{"type": "formula", "expr": "datum.data * -height", "as": "offset"}
]
},
{
"name": "table",
"values": [
{"x": 1, "y": 28}, {"x": 2, "y": 55},
{"x": 3, "y": 43}, {"x": 4, "y": 91},
{"x": 5, "y": 81}, {"x": 6, "y": 53},
{"x": 7, "y": 19}, {"x": 8, "y": 87},
{"x": 9, "y": 52}, {"x": 10, "y": 48},
{"x": 11, "y": 24}, {"x": 12, "y": 49},
{"x": 13, "y": 87}, {"x": 14, "y": 66},
{"x": 15, "y": 17}, {"x": 16, "y": 27},
{"x": 17, "y": 68}, {"x": 18, "y": 16},
{"x": 19, "y": 49}, {"x": 20, "y": 15}
]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"range": "width",
"zero": false, "round": true,
"domain": {"data": "table", "field": "x"}
},
{
"name": "y",
"type": "linear",
"range": [{"signal":"vheight"}, 0],
"nice": true, "zero": true,
"domain": {"data": "table", "field": "y"}
}
],
"axes": [
{"orient": "bottom", "scale": "x", "tickCount": 20}
],
"marks": [
{
"type": "group",
"encode": {
"update": {
"width": {"field": {"group": "width"}},
"height": {"field": {"group": "height"}},
"clip": {"value": true}
}
},
"marks": [
{
"type": "group",
"from": {"data": "layer_indices"},
"encode": {
"update": {
"y": {"field": "offset"}
}
},
"marks": [
{
"type": "area",
"from": {"data": "table"},
"encode": {
"enter": {
"interpolate": {"value": "monotone"},
"x": {"scale": "x", "field": "x"},
"fill": {"value": "steelblue"}
},
"update": {
"y": {"scale": "y", "field": "y"},
"y2": {"scale": "y", "value": 0},
"fillOpacity": {"signal": "opacity"}
}
}
}
]
}
]
}
]
}