nxt3at / sankeydiagram.net Goto Github PK

Thanks for providing this sankey diagram visualization! I'm actually quite happy it doesn't collapse when adding a circular stream. Just this issue: The value doesn't seem to be right...

Example: https://sankeydiagram.net/?content=PTAEGUHkFUCUGECioDaA1AggGWsgFAMYCGAdqAEYCmoRoA5APx0CUAuqACoawDiiHoPCniQskWK2YAoAO5EA5tRQN2ASxIA3SgGcALuvlT1WvQdQrQ/AGLap17agCMAVgAM7cADIACm9d2OGyc3dkQAVwAnAHtwXSiAD3i3I00dfRJ5c3Y9KIIAa1sc/IcUENBjNIMpIA===&

// SOURCE [VALUE (can be a '?')] TARGET ([COLOR])
wage [?] investing
investing [?] ETFs
ETFs [150] S&P500
ETFs [150] EuroStoxx50
investing [?] stocks
stocks [50] investing

In the current implementation, the node investing has a value of 400, whereby as I read it, it should only be 300, because the 50 are straight fed back into the node, increasing it by another 50.

I've found another library which contains a reference to an algorithm to detect circular references - maybe it helps: https://github.com/tomshanley/d3-sankey-circular

It looks like currently, items are sorted alphabetically by default.
It would be nice to either sort them manually (by order of appeareance in the markup).
Or alternatively, extend the syntax to be able to specify a sorting order for the items below a node.

Currently when using the share sankey as link function only the content gets shared, not the settings. In the future the settings should also be included in the share link.

Attention: I think the share link should only include actually changed settings as that would help keeping the link length in check. The downside is that when we decide to change the default of some settings in the future, the settings would default on the new pre-set value.

This is very useful, thanks!

I'm building up a diagram, which has some very small sub-branches. It would be nice if you could click on something and collapse the child nodes.

Would this be possible?

Add a setting to show relative percentages instead of absolute values next to the flow labels.

After conducting some data tests, it has been found that the above libraries perform perfectly for layer by layer data transmission such as A ->B ->C ->D. However, if there is a cross level data transmission such as A ->B and A ->C, the design of graphic avoidance and anti overlap may not perform well, and further optimization may be needed.
look the data:
var datas = new List()
{
new SankeyData("United States 1", "Canada", 1.553 * 0.18),
new SankeyData("United States 1", "Mexico", 1.553 * 0.157),
new SankeyData("United States 1", "China", 1.553 * 0.084),
new SankeyData("United States 1", "Japan", 1.553 * 0.044),

    new SankeyData("Germany1", "United States", 1.434 * 0.088),
    new SankeyData("Germany1", "France", 1.434 * 0.082),
    new SankeyData("Germany1", "China", 1.434 * 0.068),
    new SankeyData("Germany1", "Netherlands", 1.434 * 0.067),
    new SankeyData("Germany1", "United Kingdom", 1.434 * 0.066),
    new SankeyData("Germany1", "Italy", 1.434 * 0.051),

    new SankeyData("France1", "Germany", 0.549 * 0.148),
    new SankeyData("France1", "Spain", 0.549 * 0.077),
    new SankeyData("France1", "Italy", 0.549 * 0.075),
    new SankeyData("France1", "United States", 0.549 * 0.072),

    new SankeyData("Italy", "Germany", 0.496 * 0.125),
    new SankeyData("Italy", "France", 0.496 * 0.103),
    new SankeyData("Italy", "United States", 0.496 * 0.09),

    new SankeyData("United Kingdom", "United States", 0.441 * 0.132),
    new SankeyData("United Kingdom", "Germany", 0.441 * 0.105),
    new SankeyData("United Kingdom", "France", 0.441 * 0.074),
    new SankeyData("United Kingdom", "Netherlands", 0.441 * 0.062),

    new SankeyData("Canada", "United States", 0.4235 * 0.764),
    new SankeyData("Canada", "China", 0.4235 * 0.043),

    new SankeyData("China1", "United States", 2.216 * 0.192),
    new SankeyData("China1", "Japan", 2.216 * 0.059),
    new SankeyData("China1", "South Korea", 2.216 * 0.044),

    new SankeyData("Australia", "China", 0.2172 * 0.218),
    new SankeyData("Australia", "United States", 0.2172 * 0.125),
    new SankeyData("Australia", "Argentina", 0.2172 * 0.081),
    new SankeyData("Australia", "Netherlands", 0.2172 * 0.043),

    new SankeyData("Mexico", "United States", 0.409 * 0.799),

    new SankeyData("Japan", "United States", 0.6889 * 0.194),
    new SankeyData("Japan", "China", 0.6889 * 0.19),
    new SankeyData("Japan", "South Korea", 0.6889 * 0.076),

    new SankeyData("Brazil", "China", 0.2172 * 0.218),
    new SankeyData("Brazil", "United States", 0.2172 * 0.125),
    new SankeyData("Brazil", "Argentina", 0.2172 * 0.081),
}; 

SankeyDatas = datas;

• bulmacss is really annoying to work with (for me, subjectively)
• migrate to tailwindcss as state-of-the-art framework

Using brotli instead of lz for compressing the input into the sharing url could probably shrink the length of share-urls.

Due to backwards-compatibility we should still keep in LZ tho and mark brotli strings with some magic bit at the beginning.

this issue is to track progress & content ideas for adding a how-to page / user guide.
send me additional topics to cover

topics:

• basic sankey diagram
  • comments
  • auto-calculated flows ([?] operator)
  • important settings like value suffix, decimal related, canvas size, etc.
  • sharing / exporting
  • importing
• advanced(-ish) usage
  • specifying custom colors
  • positions array? (idk if we want to include this, it's implemented highly anti-ux tbh)
• small tips & tricks / hacks
  • hide text: -> change font size to 0
• example gallery
  • highlight real-world sankey diagrams?

• add ~"go back" button to navbar in subpages?

It'd be nice to have the option to automatically fill a target with the remaining value of a source.

source [500] target
target [400] rent 
target [%] savings // automatically fills to 100 and ideally refreshes when other values are changed 

I can try to do it myself, but some pointers would be nice

• allow setting width
• allow choosing if they should be colored according to the flow color palette

show a warning that the action taken by the "anonymize data" button in the settings is not reversible and will obfuscate all data

The default font-size is 20px. Add a setting to change the font-size.
The font-size must also be reflected in exported images/svgs and the share link.

in [100.12] total in
total in [20.55] out

If i set Decimal precision in the settings to 0 or 1 everything works as it should. But if i want to show the whole value without rounding - 2 decimals - nothing happens:

I just git cloned the repo and do run nodejs 20.11.0 LTS

During npm run build I repeating get this error:

@parcel/workers: Expected constructor 2.7.0:BundleGraph to be registered with serializer to deserialize

Is that nodejs version OK to run it? I didn't find any version requirement in the package json file for this. And what can that error be?

While it's nice to receive credit, I think it would be the best to allow users to choose and disable the watermark.

A setting should be added, maybe with a small text like "Support this free project by turning-on our watermark" if disabled.
The watermark should still be enabled by default.

It would be nice if we had the possibility to export and import the sankey diagram input as a text file.

maybe lower the default from it's now 0.8 to around 0.5
add slider to allow setting custom value
use css var like with font size?!

With version 1.2.0 I implemented issue #30 to share changed settings in the URL. There should be a setting to disable this behavior if it's unwanted.