Built with blockbuilder.org
forked from timelyportfolio‘s block: vega dc.js click behavior
Demonstrate how to fit using viewBox with runAfter
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/vega-tooltip@0.4.3/build/vega-tooltip.min.css">
<script src = "https://unpkg.com/d3"></script>
<script src="https://unpkg.com/vega@3.0.2/build/vega-core.min.js"></script>
<script src="https://unpkg.com/vega-lite@2.0.0-beta.15/build/vega-lite.min.js"></script>
<script src="https://unpkg.com/vega-tooltip@0.4.3/build/vega-tooltip.min.js"></script>
</head>
<body>
<div id = "example-row-vega" style = "width: 500px; height: 300px;"></div>
<script>
var spec = {
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"description": "A simple bar chart with embedded data.",
"autosize": "pad",
"padding": 5,
"style": "cell",
"data": [
{
"name": "source",
"values": [
{
"x": 40,
"y": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa"
},
{
"x": 20,
"y": "BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"
},
{
"x": 50,
"y": "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC"
},
{
"x": 5,
"y": "DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD"
}
]
},
{
"name": "selected",
"on": [
{"trigger": "clicked", "toggle": "clicked"}
]
}
],
"signals": [
{
"name": "width",
"update": "500"
},
{
"name": "height",
"update": "300"
},
{
"name": "clicked", "value": null,
"on": [
{
"events": "@marks:click",
"update": "{value: datum.y}",
"force": true
}
]
}
],
"marks": [
{
"name": "marks",
"type": "rect",
"style": [
"bar"
],
"from": {
"data": "source"
},
"encode": {
"update": {
"x": {
"scale": "x",
"field": "x"
},
"x2": {
"scale": "x",
"value": 0
},
"y": {
"scale": "y",
"field": "y"
},
"height": {
"scale": "y",
"band": true
},
"fill": [
{
"test": "(!length(data('selected')) || indata('selected', 'value', datum.y))",
"scale": "color",
"field": "y"
},
{
"value": "grey"
}
]
}
}
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {
"data": "source",
"field": "x"
},
"range": [
0,
{
"signal": "width"
}
],
"round": true,
"nice": true,
"zero": true
},
{
"name": "y",
"type": "band",
"domain": {
"data": "source",
"field": "y",
"sort": true
},
"range": [
{
"signal": "height"
},
0
],
"round": true,
"paddingInner": 0.1,
"paddingOuter": 0.05
},
{
"name": "color",
"type": "ordinal",
"domain": {
"data": "source",
"field": "y",
"sort": true
},
"range": "category"
}
],
"axes": [
{
"scale": "x",
"labelOverlap": true,
"orient": "bottom",
"tickCount": {
"signal": "ceil(width/40)"
},
"title": "x",
"zindex": 1
},
{
"scale": "x",
"domain": false,
"grid": true,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"orient": "bottom",
"tickCount": {
"signal": "ceil(width/40)"
},
"ticks": false,
"zindex": 0,
"gridScale": "y"
},
{
"scale": "y",
"labelOverlap": true,
"orient": "left",
"title": "y",
"zindex": 1
}
],
"legends": {
"fill": "color"
},
"config": {
"axis": {
"domainColor": "#888",
"tickColor": "#888"
},
"axisY": {
"minExtent": 30
}
}
}
var view = new vega.View(vega.parse(spec))
.renderer('svg') // set renderer (canvas or svg)
.initialize('#example-row-vega') // initialize view within parent DOM container
.hover() // enable hover encode set processing
.run(); // run the dataflow and render the view
d3.select(view.container()).select('svg')
.style('width', view.width())
.style('height', view.height());
view.addSignalListener('clicked', (sig, val) => {console.log(val)});
vegaTooltip.vega(view);
</script>
</body>
</html>