# Data flow diagram thoughts **URL:** \ **Category:** Help\ **Created:** [September 19, 2022, 2:53pm UTC](https://talk.observablehq.com/t/data-flow-diagram-thoughts/7046 "2022-09-19T14:53:22Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![scoobydoo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/scoobydoo/32/6948_2.png) [@scoobydoo](https://talk.observablehq.com/u/scoobydoo)\ **Post date:** [September 19, 2022, 2:53pm UTC](https://talk.observablehq.com/t/data-flow-diagram-thoughts/7046/1 "2022-09-19T14:53:22Z")
I’d like to create a data flow diagram that looks kind of like something in between a [Sankey](https://observablehq.com/@d3/sankey) diagram and [hierarchical edge bundling](https://observablehq.com/@d3/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. ---
**Author:** ![tophtucker](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tophtucker/32/4781_2.png) [@tophtucker](https://talk.observablehq.com/u/tophtucker)\ **Post date:** [September 20, 2022, 9:13am UTC](https://talk.observablehq.com/t/data-flow-diagram-thoughts/7046/2 "2022-09-20T09:13:14Z")
Hm sounds neat! I hadn’t heard of Simulink. So I have no idea but people have done [a bunch of Sankey variations](https://observablehq.com/search?query=sankey&onlyOwner=false). Could you sketch what you’re imagining? ---
**Author:** ![scoobydoo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/scoobydoo/32/6948_2.png) [@scoobydoo](https://talk.observablehq.com/u/scoobydoo)\ **Post date:** [September 20, 2022, 3:00pm UTC](https://talk.observablehq.com/t/data-flow-diagram-thoughts/7046/3 "2022-09-20T15:00:20Z")
Interesting! [This one](https://observablehq.com/@zacol/marvel-cinematic-universe-sankey-diagram) looks pretty close to what I’m envisioning. ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/4/445cf8b333c236fb08fc3ef06cd69726102b71d7.png) 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. ---
**Author:** ![tophtucker](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tophtucker/32/4781_2.png) [@tophtucker](https://talk.observablehq.com/u/tophtucker)\ **Post date:** [September 20, 2022, 6:56pm UTC](https://talk.observablehq.com/t/data-flow-diagram-thoughts/7046/4 "2022-09-20T18:56:24Z")
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: ![5DD6272F-1CBF-409C-8FB4-F4533C8C3352-653-00032975C3F370D9](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/2/2951028c928394b683245a0747ffc8db27c125d8.png) ---
**Author:** ![scoobydoo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/scoobydoo/32/6948_2.png) [@scoobydoo](https://talk.observablehq.com/u/scoobydoo)\ **Post date:** [October 1, 2022, 4:16pm UTC](https://talk.observablehq.com/t/data-flow-diagram-thoughts/7046/5 "2022-10-01T16:16:10Z")
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. 1. I’m not sure how to prevent lines from cutting through those nodes in the middle, or if that’s possible. 2. Need to figure out how to show the parameter (link) name by the line 3. Need to figure out how to have two links with the same parameter name start at the same X location within a node. 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. ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/8/87efe0f758a9dee34ae51ef2e777d75a12506eb3.png) The screencap is from my local solution, but I also [forked](https://observablehq.com/d/d18dfa7796eeae2c) the Marvel observable… ---
**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\ **Post date:** [October 2, 2022, 8:27am UTC](https://talk.observablehq.com/t/data-flow-diagram-thoughts/7046/6 "2022-10-02T08:27:34Z")
Hi! Not sure if this will help, by @bgchen once created a “multi-part” sankey to help me prototype a concept in the past: > **[Multiple Sankeys](https://observablehq.com/@bryangingechen/multiple-sankeys)** > > See https://talk.observablehq.com/t/examples-of-a-multi-year-sankey/1848 Edit the textareas below to update the Sankey diagram! Each line in the textarea above represents a link in the chart. The source and target of the link are determined by the... ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [October 4, 2022, 6:25am UTC](https://talk.observablehq.com/t/data-flow-diagram-thoughts/7046/7 "2022-10-04T06:25:34Z")
> [@scoobydoo](#): > > 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. 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. > [@scoobydoo](#): > > The screencap is from my local solution, but I also [forked](https://observablehq.com/d/d18dfa7796eeae2c) the Marvel observable… In your Appendix section remove the `width` cell and set the `height` cell to 800. Then you should see the expected behavior. > [@scoobydoo](#): > > I’m not sure how to prevent lines from cutting through those nodes in the middle, or if that’s possible. You can specify a custom sort function via [sankey.linkSort](https://github.com/d3/d3-sankey#sankey_linkSort).