Skip to content

Instantly share code, notes, and snippets.

@domoritz
Created January 13, 2021 11:30
Show Gist options
  • Save domoritz/a073dbc9e874922006485e46dab0c72d to your computer and use it in GitHub Desktop.
Save domoritz/a073dbc9e874922006485e46dab0c72d to your computer and use it in GitHub Desktop.
Slope Chart Comparison for Keynote
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/barley.json"},
"hconcat": [
{
"mark": {"type": "line", "size": 3},
"height": 250,
"width": {"step": 60},
"encoding": {
"x": {
"field": "year",
"type": "ordinal",
"scale": {"padding": 0.5},
"title": "Year",
"axis": {"labelAngle": 0}
},
"y": {
"aggregate": "median",
"field": "yield",
"type": "quantitative",
"title": "Median Yield"
},
"color": {
"field": "site",
"type": "nominal",
"title": "Site",
"legend": {"symbolStrokeWidth": 4}
}
}
},
{
"height": 250,
"width": {"step": 60},
"mark": {
"type": "circle",
"size": 100
},
"encoding": {
"x": {
"field": "year",
"type": "ordinal",
"scale": {"padding": 0.5},
"title": "Year",
"axis": {"labelAngle": 0}
},
"y": {
"aggregate": "median",
"field": "yield",
"type": "quantitative",
"title": "Median Yield"
},
"color": {
"field": "site",
"type": "nominal",
"title": "Site"
}
}
}
],
"resolve": {"scale": {"color": "independent"}},
"config": {
"background": "#414141",
"title": {"color": "#fff"},
"style": {
"guide-label": {"fill": "#fff", "fontSize": 12},
"guide-title": {"fill": "#fff", "fontSize": 14}
},
"axis": {"domainColor": "#fff", "gridColor": "#888", "tickColor": "#fff"}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment