Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/d3"></script>
<script src="https://unpkg.com/vega@3.0.2/build/vega-core.min.js"></script>
</head>
<body>
<div id = "vis"></div>
<pre id = "pre-hovered"></pre>
<script>
// spec from vega 3.0 examples
// https://github.com/uwdata/vega/blob/master/test/spec/bar-hover-label.vg.json
var spec = {
"width": 400,
"height": 200,
"padding": 5,
"signals": [
{
"name": "label",
"value": {"x": 0, "y": 0},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{x:0, y:0}"}
]
}
],
"data": [
{
"name": "table",
"values": [
{"x": 1, "y": 28}, {"x": 2, "y": 55},
{"x": 3, "y": 43}, {"x": 4, "y": 91},
{"x": 5, "y": 81}, {"x": 6, "y": 53},
{"x": 7, "y": 19}, {"x": 8, "y": 87},
{"x": 9, "y": 52}, {"x": 10, "y": 48},
{"x": 11, "y": 24}, {"x": 12, "y": 49},
{"x": 13, "y": 87}, {"x": 14, "y": 66},
{"x": 15, "y": 17}, {"x": 16, "y": 27},
{"x": 17, "y": 68}, {"x": 18, "y": 16},
{"x": 19, "y": 49}, {"x": 20, "y": 15}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"range": "width",
"domain": {"data": "table", "field": "x"}
},
{
"name": "yscale",
"type": "linear",
"range": "height",
"domain": {"data": "table", "field": "y"},
"nice": true
}
],
"axes": [
{"orient": "bottom", "scale": "xscale"},
{"orient": "left", "scale": "yscale"}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "x", "offset":1},
"width": {"scale": "xscale", "band": 1, "offset":-1},
"y": {"scale": "yscale", "field": "y"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": [
{"test": "datum === label", "value": "red"},
{"value": "steelblue"}
]
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "expr": "label.x", "band": 0.5},
"y": {"scale": "yscale", "expr": "label.y", "offset": -5},
"text": {"expr": "label.y"},
"fillOpacity": [
{"test": "!label._id", "value": 0},
{"value": 1}
]
}
}
}
]
};
var runtime = vega.parse(spec); // may throw an Error if parsing fails
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
// add a function to the dataflow to update pre with the hovered value
function hoverfollower(evt, val) {
d3.select("#pre-hovered").text(JSON.stringify(val));
};
// react to the label event stream
view.addSignalListener("label", hoverfollower);
</script>
</body>