You can go to the blockbuilder and to fork this block and create your own visualizations. Check out the Vega-Lite website for more information, tutorials, and documentation. Happy hacking!
forked from domoritz's block: Vega-Lite Bl.ocks example
license: bsd-3-clause |
You can go to the blockbuilder and to fork this block and create your own visualizations. Check out the Vega-Lite website for more information, tutorials, and documentation. Happy hacking!
forked from domoritz's block: Vega-Lite Bl.ocks example
<!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" | |
} | |
} | |
} |