Get the full source code of the d3-sankey example

1

Hello!

I would like to get the full source code of the d3-sankey example https://observablehq.com/@d3/sankey-diagram

However when I download it I only get the javascript code minified.

My problem is, that i want to convert it into a vue.js environment but it seems this line

 const { nodes, links } = sankey(this.data());

returns no data ( return arguments.length ? (nodes = typeof _ === “function” ? _ : constant(_), sankey) : nodes;) is provided in the console for nodes and the svg remains empty.

Thanks for help.

2

Are you using the runtime.js inside your vue.js application? have you see these guidelines?
Or are you trying. to convert the code from the notebook to javascript inside your vue application?

Here is a quick example, mounting the mentioned notebook inside vuejs.

2 Likes
3

Thank you vm but i need full control over all aspects of the script, all variables and stuff. Is there a way to get the complete source unminified?

4

If you’re looking at the source code for the notebook https://api.observablehq.com/@d3/sankey-diagram.js you will see that it’s not minified. But if you’re looking at the source code for the runtime https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js, then you’re right, it’s minified.

The code coming from the notebook needs the runtime to run all the fancy reactivity and data flow. You can use the runtime inside your vue application and take control of your observable code. This is the best example for that case https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app, it’s using react as an example but hopefully it can give you an idea.

If you’re looking into convert the code from Observable to vanilla js, then look at other threads here Yet another attempt to go from Observable to VanillaJS

2 Likes
5

To load the unminified runtime (as individual modules), you can import it via unpkg.com:

const {Runtime, Inspector} = await import('https://unpkg.com/@observablehq/runtime@4/src/index.js?module');

The added ?module parameter tells unpkg.com to rewrite all references to absolute paths, so that nested imports continue to work.

Note that you should only use this method for debugging purposes, as the number of requests will increase significantly, and browser support isn’t guaranteed.

By the way: If you call import() within an Observable notebook you can skip the "https://unpkg.com/" prefix, as Observable will prepend it automatically.

1 Like