forked from domoritz's block: Vega block example
forked from domoritz's block: Demo of config override bug
license: bsd-3-clause |
forked from domoritz's block: Vega block example
forked from domoritz's block: Demo of config override bug
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.33/vega.js"></script> | |
<style> | |
body { | |
font-family: sans-serif; | |
} | |
.vega-actions a { | |
padding: 0.2em; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="vis"></div> | |
<script> | |
var spec = { | |
"$schema": "https://vega.github.io/schema/vega/v3.0.json", | |
"width": 400, | |
"height": 200, | |
"padding": 5, | |
"data": [ | |
{ | |
"name": "table", | |
"values": [ | |
{"category": "A", "amount": 28}, | |
{"category": "B", "amount": 55}, | |
{"category": "C", "amount": 43}, | |
{"category": "D", "amount": 91}, | |
{"category": "E", "amount": 81}, | |
{"category": "F", "amount": 53}, | |
{"category": "G", "amount": 19}, | |
{"category": "H", "amount": 87} | |
] | |
} | |
], | |
"signals": [ | |
{ | |
"name": "tooltip", | |
"value": {}, | |
"on": [ | |
{"events": "rect:mouseover", "update": "datum"}, | |
{"events": "rect:mouseout", "update": "{}"} | |
] | |
} | |
], | |
"scales": [ | |
{ | |
"name": "xscale", | |
"type": "band", | |
"domain": {"data": "table", "field": "category"}, | |
"range": "width" | |
}, | |
{ | |
"name": "yscale", | |
"domain": {"data": "table", "field": "amount"}, | |
"nice": true, | |
"range": "height" | |
} | |
], | |
"axes": [ | |
{ "orient": "bottom", "scale": "xscale" }, | |
{ "orient": "left", "scale": "yscale" } | |
], | |
"marks": [ | |
{ | |
"type": "rect", | |
"from": {"data":"table"}, | |
"encode": { | |
"enter": { | |
"x": {"scale": "xscale", "field": "category", "offset": 1}, | |
"width": {"scale": "xscale", "band": 1, "offset": -1}, | |
"y": {"scale": "yscale", "field": "amount"}, | |
"y2": {"scale": "yscale", "value": 0} | |
}, | |
"update": { | |
"fill": {"value": "steelblue"} | |
}, | |
"hover": { | |
"fill": {"value": "red"} | |
} | |
} | |
}, | |
{ | |
"type": "text", | |
"encode": { | |
"enter": { | |
"align": {"value": "center"}, | |
"baseline": {"value": "bottom"}, | |
"fill": {"value": "#333"} | |
}, | |
"update": { | |
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5}, | |
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2}, | |
"text": {"signal": "tooltip.amount"}, | |
"fillOpacity": [ | |
{"test": "datum === tooltip", "value": 0}, | |
{"value": 1} | |
] | |
} | |
} | |
} | |
], | |
"config": { | |
"axis": { | |
"labelFont": "serif", | |
"labelFontSize": 16, | |
"tickWidth": 3, | |
"tickColor": "red" | |
} | |
} | |
} | |
var runtime = vega.parse(spec, {}); | |
var view = new vega.View(runtime) | |
.logLevel(vega.Warn) // set view logging level | |
.initialize(document.querySelector('#vis')) // set parent DOM element | |
.renderer('svg') // set render type (defaults to 'canvas') | |
.hover() // enable hover event processing | |
.run(); // update and render the view | |
</script> | |
</body> |