Data flow diagram thoughts

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.

1 Like

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.

One thing I’m not sure about is how to figure out another layer here – the Marvel example has the individual lines I’m looking for, while the other sankey has the flow that I’m wanting as far as organizing nodes in Y as well as X.

There is this concept of source, target, value – in this case, to get the lines, value is 1 for everything. But I seem to be missing another layer for grouping the edges…what I really have is source, parameter, target (and value = 1). Where source/target describe the from/to nodes and parameter defines the directional edge.

Edit: digging into the code and sankey docs a bit more, I think I’m getting it. The Marvel example uses the CSV input to create the nodes and links arrays to pass to sankey(). It looks like what I need to do is add a name attribute to each link, and then have that displayed…

I’d paste a screencap of where I’m at now, but I can’t figure out how to size down my chart :rofl: – 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) it overflows down and won’t fit on the page; it’s way bigger than 800px.