You can go to the blockbuilder and to fork this block and create your own visualizations. Check out the Vega-Lite website for more information, tutorials, and documentation. Happy hacking!
forked from domoritz's block: Vega-Lite Bl.ocks example
license: bsd-3-clause |
You can go to the blockbuilder and to fork this block and create your own visualizations. Check out the Vega-Lite website for more information, tutorials, and documentation. Happy hacking!
forked from domoritz's block: Vega-Lite Bl.ocks example
{ | |
"$schema": "https://vega.github.io/schema/vega-lite/v4.json", | |
"description": "Horizon Graph with 2 layers. (See https://idl.cs.washington.edu/papers/horizon/ for more details on Horizon Graphs.)", | |
"width": 300, | |
"height": 50, | |
"data": { | |
"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": 1}, | |
{"x": 17, "y": -10}, {"x": 18, "y": -40}, | |
{"x": 19, "y": -60}, {"x": 20, "y": -20} | |
] | |
}, | |
"layer": [{ | |
"mark": {"type": "area", "clip": true, "orient": "vertical"}, | |
"encoding": { | |
"x": { | |
"field": "x", "type": "quantitative", | |
"scale": {"zero": false, "nice": false} | |
}, | |
"y": { | |
"field": "y", "type": "quantitative", | |
"scale": {"domain": [0,50]} | |
}, | |
"opacity": {"value": 0.6} | |
} | |
}, { | |
"transform": [ | |
{ | |
"calculate": "datum.y - 50", | |
"as": "ny" | |
} | |
], | |
"mark": {"type": "area", "clip": true, "orient": "vertical"}, | |
"encoding": { | |
"x": { | |
"field": "x", "type": "quantitative" | |
}, | |
"y": { | |
"field": "ny", "type": "quantitative", | |
"scale": {"domain": [0,50]}, | |
"axis": {"title": "y"} | |
}, | |
"opacity": {"value": 0.3} | |
} | |
}, { | |
"transform": [ | |
{ | |
"calculate": "50 + datum.y", | |
"as": "ny" | |
} | |
], | |
"mark": {"type": "area", "clip": true, "orient": "vertical" , | |
"y2": 50, | |
"color": "red"}, | |
"encoding": { | |
"x": { | |
"field": "x", "type": "quantitative" | |
}, | |
"y": { | |
"field": "ny", "type": "quantitative", | |
"scale": {"domain": [0,50]} | |
}, | |
"y2": {"value": 0}, | |
"opacity": {"value": 0.3} | |
} | |
}, { | |
"transform": [ | |
{ | |
"calculate": "100 + datum.y", | |
"as": "ny" | |
} | |
], | |
"mark": {"type": "area", "clip": true, "orient": "vertical" , | |
"y2": 50, | |
"color": "red"}, | |
"encoding": { | |
"x": { | |
"field": "x", "type": "quantitative" | |
}, | |
"y": { | |
"field": "ny", "type": "quantitative", | |
"scale": {"domain": [0,50]} | |
}, | |
"y2": {"value": 0}, | |
"opacity": {"value": 0.3} | |
} | |
}], | |
"config": { | |
"area": {"interpolate": "monotone"} | |
} | |
} |
�PNG | |