vega-selected
v0.0.2
Published
Convert any interactive vega JSON spec into a reactive widget, exposing all its signals
Downloads
8
Readme
vega-selected
Convert any vega/vega-lite interactive visualization into a reactive widget that can be easily integrated with larger applications for coordinated views or brush and linking.
To use it:
- 🧰 Import the dependencies vega, vega-lite, vega-embed and vega-selected
- 🧰 Wrap your spec with vegaSelected, which returns your widget as an HTML Element.
- 🧰 Listen to input events, and use the current .value
- 🧰 Append your widget to the DOM
It exposes all the vega signals generated by the visualization, but you can also specify which ones to listen to. It should work with any parsed vega, or vega-lite spec, which means that you should be able to use it with the vega-lite JS API, altair or any other library that generates vega specs.
Example Usage
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vegaSelected test</title>
</head>
<body>
<h1>Vega Selected demo</h1>
<div id="target"></div>
<div id="status"></div>
// 🧰 Add dependencies
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-selected"></script>
<!-- <script src="../dist/vegaSelected.js"></script> -->
<script>
const spec = {...} // a parsed vega/vega-lite spec
async function runtIt() {
// 🧰 Wrap your spec with vegaSelected
const myWidget = await vegaSelected(spec);
// 🧰 Listen to changes in the widget
const onInput = (e) => {
console.log("do something with the current value", myWidget.value);
};
myWidget.addEventListener("input", onInput);
onInput();
// 🧰 Append your widget to the page
document.getElementById("target").appendChild(myWidget);
}
runtIt();
</script>
</body>
</html>
``