<script type="module">
import Vue from "https://unpkg.com/vue@2.6.0/dist/vue.esm.browser.min.js";
import {
Runtime,
Inspector
} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "https://api.observablehq.com/@d3/sankey-diagram.js?v=3";
const app = new Vue({
el: "#app",
data() {
return {
notebookModule: null
};
},
mounted() {
const runtime = new Runtime();
const inspect = Inspector.into(this.$refs.chartRef);
this.notebookModule = runtime.module(notebook, name => {
return name === "chart" && inspect();
});
}
});
</script>
<div id="app">
<div ref="chartRef"></div>
</div>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.