# examples of a multi-year sankey?

**URL:** <https://talk.observablehq.com/t/examples-of-a-multi-year-sankey/1848>\
**Category:** Help\
**Created:** [April 4, 2019, 5:57pm UTC](https://talk.observablehq.com/t/examples-of-a-multi-year-sankey/1848 "2019-04-04T17:57:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**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:** [April 4, 2019, 5:57pm UTC](https://talk.observablehq.com/t/examples-of-a-multi-year-sankey/1848/1 "2019-04-04T17:57:55Z")

</div>

I recently stumbled across Tony McGovern’s [Sankey Diagram with Crossfilter](http://bl.ocks.org/tonmcg/570fb0409b6c59768229d5631bc3d77e), which is a fun sankey that changes according to two drop-down menu inputs, one of which is a selection of ‘Fiscal Year’ (FY). This got me wondering - is it possible to iterate a sankey to produce a multi-year flow chart?

I am thinking of something like this (where green are inputs per FY, grey are output per FY, and blue and brown and carry-over coming in and going out of the FY) :

 ![multi-year sankey concept](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/6/631b0753df214adb9ff529eafec8cda975fde195.png)

I’ve been digging around the internet, but have found few leads on how one might achieve this. If you’re reading this and know of any examples (or if you’d like to suggest some approaches to creating this sort of visualization), I’d love to hear from you!

Thanks in advance for your time and guidance!

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [April 4, 2019, 7:32pm UTC](https://talk.observablehq.com/t/examples-of-a-multi-year-sankey/1848/2 "2019-04-04T19:32:46Z")

</div>

Here’s an attempt which just generates several Sankey diagrams and then lines them up with the SVG transform attribute (forked from @mbostock’s [Flow-o-matic](https://observablehq.com/@mbostock/flow-o-matic)):

> **[Multiple Sankeys](https://observablehq.com/d/d20b8d048f3909f1)**
>
> An Observable notebook by Bryan Gin-ge Chen.

The trickiest part is figuring out how to pick the size of the “next” Sankey diagram so that the corresponding bars have equal heights.

I tried to keep the manual fiddling to a minimum, but there are definitely still some things I could do to make the code more general. Hopefully you get the idea though…

---

<div class="post-metadata">

**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:** [April 4, 2019, 8:07pm UTC](https://talk.observablehq.com/t/examples-of-a-multi-year-sankey/1848/3 "2019-04-04T20:07:16Z")

</div>

Woah Bryan! Check you out! This is very impressive.

I also used Mike’s flow-o-matic to generate the component parts in the concept diagram 😉 Given the flexibility offered by the tool, I didn’t really expect it to work well for this sort of a thing. I expect most year-to-year datasets would be organized such that the logic of how sections line up would be more obvious than when I tried generating these component parts… something like:

| FY | carry-over assets | new assets | retired assets |
| --- | --- | --- | --- |
| FY14 | 60 | 15 | 10 |
| FY15 | 65 | 4 | 12 |
| FY16 | 57 | 10 | 5 |

(I see that you grabbed labels and numbers from my PNG above – and corrected my label mistakes. You really went the extra mile. 🦸‍♂️

… Thanks for always being willing to respond to a question or help request!

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [April 4, 2019, 8:25pm UTC](https://talk.observablehq.com/t/examples-of-a-multi-year-sankey/1848/4 "2019-04-04T20:25:25Z")

</div>

> [@aaronkyle](#):
>
> (I see that you grabbed labels and numbers from my PNG above – and corrected my label mistakes. You really went the extra mile. 🦸‍♂️

Hah! I was just feeling too uncreative to generate test data on my own!

> [@aaronkyle](#):
>
> I expect most year-to-year datasets would be organized such that the logic of how sections line up would be more obvious than when I tried generating these component parts… something like:

I agree. It shouldn’t be hard to write a function which takes a table like that one and turns it into a multi-Sankey diagram… I’ll take a look in a bit.

> [@aaronkyle](#):
>
> … Thanks for always being willing to respond to a question or help request!

No problem! Answering questions is one of my favorite ways to learn new things, so thanks for not being shy about posting yours!

---

<div class="post-metadata">

**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:** [April 4, 2019, 8:36pm UTC](https://talk.observablehq.com/t/examples-of-a-multi-year-sankey/1848/5 "2019-04-04T20:36:26Z")

</div>

> [@bgchen](#):
>
> thanks for not being shy about posting yours!

Thanks for the encouragement to do so. I worry at times about writing in too often. You and the other community members are supportive, and I really appreciate all of the care that the Observable team has put into making this a nurturing learning environment. Far less scary (and mean) than StackExchange 🤓
