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 | |