Built with blockbuilder.org
forked from timelyportfolio's block: vega dc.js click behavior
Demonstrate how to fit using viewBox
with runAfter
license: mit |
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> |