Visualization of the number of reviews in https://sites.umiacs.umd.edu/elm/2018/02/27/how-much-reviewing/.
forked from domoritz's block: Vega-Lite Bl.ocks example
license: bsd-3-clause |
Visualization of the number of reviews in https://sites.umiacs.umd.edu/elm/2018/02/27/how-much-reviewing/.
forked from domoritz's block: Vega-Lite Bl.ocks example
{ | |
"$schema": "https://vega.github.io/schema/vega-lite/v2.json", | |
"title": "Niklas Elmqvist's Reviews as of February 2018", | |
"width": 360, | |
"data": { | |
"values": [ | |
{"year": 2008, "reviews": 74}, | |
{"year": 2009, "reviews": 57}, | |
{"year": 2010, "reviews": 85}, | |
{"year": 2011, "reviews": 109}, | |
{"year": 2012, "reviews": 70}, | |
{"year": 2013, "reviews": 84}, | |
{"year": 2014, "reviews": 108}, | |
{"year": 2015, "reviews": 107}, | |
{"year": 2016, "reviews": 85}, | |
{"year": 2017, "reviews": 83}, | |
{"year": 2018, "reviews": 31} | |
] | |
}, | |
"layer": [{ | |
"mark": "bar", | |
"encoding": { | |
"x": { | |
"field": "year", | |
"type": "ordinal", | |
"axis": {"title": "Year"} | |
}, | |
"y": { | |
"field": "reviews", | |
"type": "quantitative", | |
"axis": {"title": "# of Reviews"} | |
}, | |
"opacity": { | |
"condition": { | |
"test": "datum.year == 2018", | |
"value": 0.5 | |
}, | |
"value": 1 | |
} | |
} | |
}, { | |
"transform": [{ | |
"filter": "datum.year < 2018" | |
}], | |
"mark": "rule", | |
"encoding": { | |
"y": {"field": "reviews", "type": "quantitative", "aggregate": "mean"}, | |
"size": {"value": 2}, | |
"color": {"value": "firebrick"} | |
} | |
}, { | |
"transform": [{ | |
"filter": "datum.year < 2018" | |
}], | |
"mark": { | |
"type": "text", | |
"dy": -5 | |
}, | |
"encoding": { | |
"y": {"field": "reviews", "type": "quantitative", "aggregate": "mean"}, | |
"text": {"value": "Average"}, | |
"opacity": {"value": 0.5} | |
} | |
}] | |
} |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdn.jsdelivr.net/npm/vega@3"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script> | |
<style> | |
body { | |
font-family: sans-serif; | |
} | |
.vega-actions a { | |
padding: 0.2em; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="vis"></div> | |
<script> | |
const spec = "bar.vl.json"; | |
vegaEmbed('#vis', spec).catch(console.warn); | |
</script> | |
</body> |