Skip to content

Instantly share code, notes, and snippets.

@domoritz
Last active February 28, 2018 18:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save domoritz/91e3c154ef7788448cb9daa0431d1e77 to your computer and use it in GitHub Desktop.
Save domoritz/91e3c154ef7788448cb9daa0431d1e77 to your computer and use it in GitHub Desktop.
Niklas' Reviews
license: bsd-3-clause
{
"$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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment