Skip to content

Instantly share code, notes, and snippets.

@digi0ps digi0ps/.block
Created Feb 25, 2018

Embed
What would you like to do?
Bar chart with Negative Values
license: bsd-3-clause
<!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 = "negbar.vl.json";
vegaEmbed('#vis', spec).catch(console.warn);
</script>
</body>
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "Bar Chart with Negative values",
"width": 400,
"height": 400,
"data": {
"values": [
{
"a": "A",
"b": -118
},
{
"a": "B",
"b": -125
},
{
"a": "C",
"b": -163
},
{
"a": "D",
"b": -131
},
{
"a": "E",
"b": 181
},
{
"a": "F",
"b": 153
},
{
"a": "G",
"b": 119
},
{
"a": "H",
"b": 187
}
]
},
"mark": "bar",
"encoding": {
"x": {
"field": "b",
"type": "quantitative"
},
"y": {
"field": "a",
"type": "ordinal",
"axis": {
"offset": -200,
"title": null
}
},
"color": {
"condition": {
"test": "datum.b < 0",
"value": "#F29135"
},
"value": "#4F81B2"
}
}
}
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.