I’d like to create a data flow diagram that looks kind of like something in between a Sankey diagram and hierarchical edge bundling
The idea would be to show inputs and output parameters between different functions/modules in a system / visualization of a publish/subscribe model.
I’m envisioning something like a simulink block diagram with connections. Maybe d3 isn’t the right tool for this, but thought I’d see what folks thought.
Hm sounds neat! I hadn’t heard of Simulink. So I have no idea but people have done a bunch of Sankey variations. Could you sketch what you’re imagining?
Interesting! This one looks pretty close to what I’m envisioning.
I’m thinking each block would be a node; each edge would have a name as well as a from and to. All edges with a common from node would have their names listed once / right-justified in the node block, with lines going to the to node. Each edge could have multiple to nodes, but should only be listed once in the from node.
Hopefully that makes sense – I have worked with d3 before but with way older versions…the Observable platform / framework is new to me so I’ll play around with that example and see what I can figure out, as well.
Ah nice yeah. Instead of this rect you could append (selectAll / join) a G element and have a function to draw a more complicated “node” component with the rect and label text and whatever else:
Thank you! Starting to play around with this now.
I’ve got lots of issues to solve but I think I’m on the right track.
And of course, I need to figure out how to downsize down my chart 
– I’ve created a fixed-size chart div and am embedding it as:
const main = runtime.module(define, Inspector.into(document.getElementById("chart")));
And that seems to fix the width, but despite the _height being set at 800 (as in the example) the height is actually more like 100px, so it’s just not squeezing it in like it should.
The screencap is from my local solution, but I also forked the Marvel observable…
Hi! Not sure if this will help, by @bgchen once created a “multi-part” sankey to help me prototype a concept in the past:
That is usually a sign of either a missing viewBox attribute on the SVG element or, in absence of viewBox, a missing height attribute. As soon as you set viewBox, your SVG should automatically expand to fill the available width, according to the aspect ratio in your viewBox.
In your Appendix section remove the width cell and set the height cell to 800. Then you should see the expected behavior.
You can specify a custom sort function via sankey.linkSort.
