Importing d3 sankey component?

[dkrasne]

I'm kind of confused about how I'm supposed to import the D3 sankey component in Framework, since I don't need to import the entirety of D3; and if I understand things correctly, doing so wouldn't actually import the sankey diagram anyway. As always, I'm sure this would be obvious to people with a better understanding of JavaScript! Thanks in advance.

[Fil]

Here's how I do it https://observablehq.observablehq.cloud/pangea/d3/sankey
(click on the top right icon to get to the source)

[dkrasne]

So this page is why I thought I needed to install it with npm: when I try something like d3.sankey(), as in that page you linked to, I get told that isn't a function. Maybe module isn't the correct term: how do I install/access whatever is needed to work with the underlying d3.sankey() commands, on framework? All the other examples I could find were in Observable notebooks, and I couldn't make them work successfully in Framework. Here's what I have so far with my data, using the module, but I know I'm missing something for modifying it more extensively.

[Fil]

The "module", d3-sankey, exports a function called sankey that you can use to build the diagram as positions of nodes and edges in an abstract x/y space.

The "component" (https://github.com/Fil/pangea/blob/main/src/components/sankey.js) imports that module, and exports a function that has nodes and edges as inputs, and returns a concrete image — an SVG structure of rects and paths and colors.

Lastly, the markdown page just calls this component with some data and displays the SVG.

You already have everything running in your framework project, so I don't think you have to install anything else. You'll want to adapt the code of the component to suit your needs, and how you do that depends on what you want to achieve.

[dkrasne]

So you're saying that if I want to, e.g., add some interactions like dragging, or make the node labels not ignore \n line breaks, or draw the nodes above the links (since some are currently hidden), I can do that at the component level, in the .js script that I copied from your example? And ditto with reacting to changes in a value outside of the chart? I ask because whenever I see adjustments like that (e.g., here or here), it appears to me that they're working with the module, not the component.

Thanks for all the help!

[Fil]

Yes, exactly. These two examples are using the module to generate an abstract layout, and have their own code (their own "component" if you will) to transform the abstract layout into a custom SVG.

[dkrasne]

Okay, I think I'm starting to understand.... Thanks again!