Skip to content

Instantly share code, notes, and snippets.

@declann

declann/spec.json

Created September 10, 2024 11:46
Show Gist options
  • Save declann/1dcb8feedb0b5e5bec4d9c82f213a598 to your computer and use it in GitHub Desktop.
Save declann/1dcb8feedb0b5e5bec4d9c82f213a598 to your computer and use it in GitHub Desktop.
Download ZIP
hatch gradient
Raw
spec.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Google's stock price over time.",
"data": {"url": "data/stocks.csv"},
"transform": [{"filter": "datum.symbol==='GOOG'"}],
"layer": [
{"mark": {"type": "area", "fill": "orange"}},
{
"mark": {
"type": "area",
"fill": {
"x1": 0.1,
"y1": 1,
"x2": 1,
"y2": 0,
"gradient": "linear",
"stops": [
{"offset": 0, "color": "transparent"},
{"offset": 0.01, "color": "red"},
{"offset": 0.02, "color": "transparent"},
{"offset": 0.03, "color": "red"},
{"offset": 0.04, "color": "transparent"},
{"offset": 0.05, "color": "red"},
{"offset": 0.06, "color": "transparent"},
{"offset": 0.07, "color": "red"},
{"offset": 0.08, "color": "transparent"},
{"offset": 0.09, "color": "red"},
{"offset": 0.1, "color": "transparent"},
{"offset": 0.11, "color": "red"},
{"offset": 0.12, "color": "transparent"},
{"offset": 0.13, "color": "red"},
{"offset": 0.14, "color": "transparent"},
{"offset": 0.15, "color": "red"},
{"offset": 0.16, "color": "transparent"},
{"offset": 0.17, "color": "red"},
{"offset": 0.18, "color": "transparent"},
{"offset": 0.19, "color": "red"},
{"offset": 0.2, "color": "transparent"},
{"offset": 0.21, "color": "red"},
{"offset": 0.22, "color": "transparent"},
{"offset": 0.23, "color": "red"},
{"offset": 0.24, "color": "transparent"},
{"offset": 0.25, "color": "red"},
{"offset": 0.26, "color": "transparent"},
{"offset": 0.27, "color": "red"},
{"offset": 0.28, "color": "transparent"},
{"offset": 0.29, "color": "red"},
{"offset": 0.3, "color": "transparent"},
{"offset": 0.31, "color": "red"},
{"offset": 0.32, "color": "transparent"},
{"offset": 0.33, "color": "red"},
{"offset": 0.34, "color": "transparent"},
{"offset": 0.35, "color": "red"},
{"offset": 0.36, "color": "transparent"},
{"offset": 0.37, "color": "red"},
{"offset": 0.38, "color": "transparent"},
{"offset": 0.39, "color": "red"},
{"offset": 0.4, "color": "transparent"},
{"offset": 0.41, "color": "red"},
{"offset": 0.42, "color": "transparent"},
{"offset": 0.43, "color": "red"},
{"offset": 0.44, "color": "transparent"},
{"offset": 0.45, "color": "red"},
{"offset": 0.46, "color": "transparent"},
{"offset": 0.47, "color": "red"},
{"offset": 0.48, "color": "transparent"},
{"offset": 0.49, "color": "red"},
{"offset": 0.5, "color": "transparent"},
{"offset": 0.51, "color": "red"},
{"offset": 0.52, "color": "transparent"},
{"offset": 0.53, "color": "red"},
{"offset": 0.54, "color": "transparent"},
{"offset": 0.55, "color": "red"},
{"offset": 0.56, "color": "transparent"},
{"offset": 0.57, "color": "red"},
{"offset": 0.58, "color": "transparent"},
{"offset": 0.59, "color": "red"},
{"offset": 0.6, "color": "transparent"},
{"offset": 0.61, "color": "red"},
{"offset": 0.62, "color": "transparent"},
{"offset": 0.63, "color": "red"},
{"offset": 0.64, "color": "transparent"},
{"offset": 0.65, "color": "red"},
{"offset": 0.66, "color": "transparent"},
{"offset": 0.67, "color": "red"},
{"offset": 0.68, "color": "transparent"},
{"offset": 0.69, "color": "red"},
{"offset": 0.7, "color": "transparent"},
{"offset": 0.71, "color": "red"},
{"offset": 0.72, "color": "transparent"},
{"offset": 0.73, "color": "red"},
{"offset": 0.74, "color": "transparent"},
{"offset": 0.75, "color": "red"},
{"offset": 0.76, "color": "transparent"},
{"offset": 0.77, "color": "red"},
{"offset": 0.78, "color": "transparent"},
{"offset": 0.79, "color": "red"},
{"offset": 0.8, "color": "transparent"},
{"offset": 0.81, "color": "red"},
{"offset": 0.82, "color": "transparent"},
{"offset": 0.83, "color": "red"},
{"offset": 0.84, "color": "transparent"},
{"offset": 0.85, "color": "red"},
{"offset": 0.86, "color": "transparent"},
{"offset": 0.87, "color": "red"},
{"offset": 0.88, "color": "transparent"},
{"offset": 0.89, "color": "red"},
{"offset": 0.9, "color": "transparent"},
{"offset": 0.91, "color": "red"},
{"offset": 0.92, "color": "transparent"},
{"offset": 0.93, "color": "red"},
{"offset": 0.94, "color": "transparent"},
{"offset": 0.95, "color": "red"},
{"offset": 0.96, "color": "transparent"},
{"offset": 0.97, "color": "red"},
{"offset": 0.98, "color": "transparent"},
{"offset": 0.99, "color": "red"}
]
}
},
"encoding": {"opacity": {"value": 0.4}}
}
],
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"},
"opacity": {"value": 1}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment