Skip to content

Instantly share code, notes, and snippets.

@g3o2

g3o2/.block

Last active August 5, 2017 11:52
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 g3o2/5ea13c866cd2d2f0d57731d2ed4eccee to your computer and use it in GitHub Desktop.
Save g3o2/5ea13c866cd2d2f0d57731d2ed4eccee to your computer and use it in GitHub Desktop.
Download ZIP
Comparative performance sparklines
Raw
.block
license: bsd-3-clause
height: 300
border: no
Raw
README.md

Comparative performance sparklines

Sparklines are described in detail in Edward Tufte's book Beautiful Evidence (2006), more particularly page 54 comparing baseball team performances. Such sparklines are sometimes also referred to as tentacle lines.

The dataset used here is not index-based. If it was, every stock's performance would start at value 100 in the first year and evolve from there. Such data transformation has to be performed outside of vega-lite 2 for now.

Among the current issues, one can note the absence of defining custom rules in vega-lite allowing to solve the label colliding problem.

This block has been forked from Domoritz's Vega-Lite Block example.

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-rc5/vega.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.11/vega-lite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.19/vega-embed.min.js"></script>
<style>
body {
font-family: sans-serif;
}
.vega-actions a {
padding: 0.2em;
}
</style>
</head>
<body>
<div id="vis"></div>
<script>
const spec = "line_tentacle.vl.json";
const opt = { renderer: "svg" };
vega.embed('#vis', spec, opt);
</script>
</body>
Raw
line_tentacle.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "tentacle lines",
"width": 200, "height": 200,
"data": {"url": "https://vega.github.io/vega-datasets/data/stocks.csv"},
"transform": [
{"calculate": "toBoolean('Mar 1 2010' === datum.date)", "as": "is_max_date"}
],
"layer" :[
{
"mark": "line",
"encoding": {
"x": {
"field": "date", "type": "temporal",
"axis": {
"format": "%Y", "grid": false, "domain": false, "title": "",
"tickCount": 2, "ticks":false, "labelPadding": 10, "labelAngle": 0
}
},
"y": {
"field": "price", "type": "quantitative", "axis": {"grid": false, "ticks": false, "labelPadding": 5}
},
"color": {"field": "symbol", "type": "nominal", "legend": null}
}
},
{
"mark": {"type": "text", "role": "myvarlabel"},
"transform": [
{"filter": "datum.is_max_date === true"},
{"calculate": "datum.symbol + ' ' + toString(datum.price)", "as": "symbol_price"}
],
"encoding": {
"x": {"field": "date", "type": "temporal", "axis": {"format": "%Y", "grid": false} },
"y": {"field": "price", "type": "quantitative", "axis": {"grid": false}},
"text": { "field": "symbol_price", "type": "nominal"},
"color": { "field": "symbol", "type": "nominal", "legend": null}
}
},
{
"mark": {"type": "rule", "role": "myrule"},
"encoding": {
"y": {"aggregate": "mean", "field": "price", "type": "quantitative", "axis": {"grid": false, "title": "" } },
"color": {"value": "gray"}
}
}
],
"config": {
"cell": { "strokeWidth": 0 },
"myrule":{ "strokeDash": [3, 3] },
"myvarlabel":{ "dx": 5, "baseline": "middle", "align": "left" }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment