Skip to content

Instantly share code, notes, and snippets.

@italo-batista italo-batista/.block
Last active Mar 27, 2018

Embed
What would you like to do?
Vega-Lite Waterfall Chart Example
license: bsd-3-clause
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "Waterfall chart",
"width": 400,
"height": 250,
"padding": 5,
"data": {
"values": [
{"year":"2005", "start":0, "end": 8, "cat": "increase"},
{"year":"2006", "start":8, "end": 13, "cat": "increase"},
{"year":"2007", "start":13, "end": 16, "cat": "increase"},
{"year":"2008", "start":16, "end": 18, "cat": "increase"},
{"year":"2009", "start":18, "end": 20, "cat": "increase"},
{"year":"2010", "start":20, "end": 19, "cat": "decrease"},
{"year":"2011", "start":19, "end": 14, "cat": "decrease"},
{"year":"2012", "start":14, "end": 12, "cat": "decrease"},
{"year":"2013", "start":12, "end": 13, "cat": "increase"},
{"year":"2014", "start":13, "end": 14, "cat": "increase"},
{"year":"2015", "start":14, "end": 16, "cat": "increase"},
{"year":"2016", "start":16, "end": 15, "cat": "decrease"},
{"year":"2017", "start":14, "end": 12, "cat": "decrease"},
{"year":"2018", "start":12, "end": 11, "cat": "decrease"},
{"year":"Total", "start":11, "end": 0, "cat": "total"}
]
},
"encoding": {
"x": {
"field": "year",
"type": "nominal"
},
"y": {
"field": "start",
"type": "quantitative",
"axis": {"title": "Number of costumers"}
},
"y2": {
"field": "end",
"type": "quantitative"
}
},
"layer": [
{"mark": "bar",
"encoding": {
"color": {
"field": "cat",
"type": "ordinal",
"legend": {"title": ""},
"scale": {
"domain": ["total","increase","decrease"],
"range": ["#4FC3F7","#B2FF59","#FF5252"]
}
}
}
},
{"mark": "text",
"encoding": {
"y": {
"field": "end", "type": "quantitative"
},
"text": {
"condition": {"test": "datum['cat'] == 'total'", "field": "start"},
"field": "end", "type": "nominal"
},
"color": {
"condition": {"test": "datum['cat'] != 'increase'", "value": "white"},
"value": "#1B5E20"
}
}
}
],
"config": {
"text": {
"baseline": "bottom",
"align": "center",
"fontWeight": "bold"
}
}
}
<!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
You can’t perform that action at this time.